3ª Evaluación: Relación de actividades.

Bueno, pues estamos llegando al final y como la evaluación es contínua, también y especialmente en informática, será necesario que tengáis hechas TODAS las actividades de este tercer trimestre para aprobar la asignatura y sobre todo, para recuperar alguna evaluación suspensa...
Esta es la relación de actividades que hemos trabajado en la 3ª Evaluación:

1. Ejercicio 20: Filtros (al menos 3).
2. Ejercicio 21: Animación GIF.
3. Ejercicio 22: Marco (al menos 2).
4. Ejercicio 23: Efecto Dragan.

Hasta aquí los ejercicios que quedaban de GIMP. Todas las actividades deben estar colgadas en vuestros respectivos blogs.

5. Ejercicio 24. Tutorial sobre cómo abrirse una cuenta en Twitter (en el blog).
6. Ejercicio 25a y b. Subir fotos con Picasa Web.

A partir de esta última actividad empieza la programación HTML.

7. Ejercicio 1. Reseña sobre lenguaje HTML (en el blog).
8. Ejercicio 2. Estructura básica del código fuente de una web (este, como todos los demás ejercicios deberíais de haberlos colgado en el blog, en el modo redactar, para que yo los pueda corregir).
9. Ejercicio 4. Página web: Incluye los ejercicios 3, 5, 7, 8, 9, 10, 12 y 13.
La página web tiene que tener al menos:

• 3 páginas en código html.
• las 3 pág. enlazadas entre sí.
• 1 página con 1 enlace a 1 lugar dentro de ella.
• 1 página con 1 imagen pequeña enlazada a la original (más grande).
• 1 tabla.
• 1 lista ordenada.
• fondo distinto al blanco/letras de distinto tamaño y color.
• Tema libre.

10. Ejercicio 6: Cuenta en Dropbox.

11. Ejercicio 14: Enlace a una URL que no está en nuestro servidor.

12. Ejercicio 18: Insertar un vídeo.

La web tiene que ceñirse al menos a lo explicado en el ejercicio 4. Los dos últimos (el 14 y el 18) servirán para subir nota. 

18. Insertar un vídeo.

Si queréis insertar un vídeo de Youtube en vuestra web, estos son los pasos a seguir: 

1. Busca en You Tube un vídeo que te guste o que quieras insertar.
2. Abajo del vídeo existe un botón que pone "compartir", pulsalo.
3. Una vez pulsado aparece la opción "Insertar", púlsala y aparecerá un código en HTML que debemos copiar y pegar en el código HTML de nuestra web.

17. Imágenes.

1. El problema de las imágenes es el tamaño que ocupan. Si ponemos muchas imágenes la navegación será lenta. Cuanto más grandes, más tardará el navegador en cargarlas.
2. Conviene utilizar formatos como .gif o .jpg que son gráficos comprimidos. Tienen menos calidad pero más rapidez.
3. Otra solución es "empequeñecer" las imágenes y poner un enlace a ellas mismas en una página aparte. Para empequeñecer la imagen haremos lo siguiente:

• Abrimos la imagen con GIMP.
• Hacemos click con el botón derecho en la imagen y escogemos imagen-redimensionar imagen. 
• En el cuadro de diálogo que aparece reducimos el tamaño hasta obtener un tamaño de imagen que pueda ser visto y ocupe (en kb) el menor tamaño posible.
• La guardamos como bannerpeq.jpg (o el nombredenuestraimagenpeq...).
• Y creamos el siguiente enlace en la página:

          <a href="imagenes/banner.jpg><img src="imagenes/bannerpeq.jpg"></a>

• Sustituimos la imagen que se cargaba banner.jpg por la nueva imagen más pequeña bannerpeq.jpg y ponemos un enlace a la imagen original, de manera que el navegador abra una nueva ventana conteniendo la imagen con el tamaño normal.

16. Estructura de una web.

1. La página web tiene que estar estructurada de forma clara. Para ello, lo primero es que debemos tener al  menos una carpeta para las imágenes, que llamaremos "imagenes" (sin acento). Si incluimos sonidos tendremos otra para los mismos, llamada también "sonidos".
2. Esas carpetas estarán en otra donde también incluiremos nuestra página principal, index.html y las demás, bloque1.html, bloque2.html...
3. Si en un enlace hacemos referencia a una página o a una imagen de nuestra web, utilizaremos la dirección relativa de esta página o de esta imagen. Por ejemplo:

<img src="imagenes/banner.jpg">

Lo que estamos diciéndole al navegador es que busque el archivo banner.jpg que está dentro de la carpeta "imagenes" que está en el mismo nivel que index.
4. En cuanto a los nombres de los archivos hay que seguir unas pautas muy simples:

• Utilizar nombres lo más cortos posibles (ocho caracteres)
• No dejar espacios en blanco en el nombre. Como alternativa utilizar el guión bajo.
• No introducir caracteres extraños, como %, 1ª, 1º...

Ejercicio 15: Enlace en la misma página web.

El enlace dentro de la misma página lo haremos, por ejemplo, dentro de la página bloque1.html.
Para eso tendremos que desarrollar los contenidos del bloque 1.
Este es el código que ya tenemos de nuestro Bloque 1, y tendremos que añadir el código siguiente:

<html>

         <head>

                   <title>Página web de Lola Mena-Bloque1</title>

         </head>

         <body bgcolor=#5d0000 text=#f9e783>

                   <center><a href="index.html"><img src="imagenes/banner.jpg">
border="0" alt="Página Principal" title="Página Principal"></a></center>

                   <h1>Teoría del color: El color luz</h1>

                   <ol type="A">

                            <li><a href="#a.">Newton y la teoría de la descomposición de la luz.</a></li>

                            <li><a href="#b."> síntesis aditiva del color luz.</b></li>

                            <li><a href="#c."> terapéutico del color.</c></li>

                            <li>Colores luz y escenografía.</li>

                   </ol>

<a name="a.><h2>a. Newton y la teoría de la descomposición de la luz.</h2>
<p>Sir Isaac Newton  fue un físico, filósofo, teólogo, inventor, alquimista y matemático inglés. Entre sus  descubrimientos científicos destacan los trabajos sobre la naturaleza de la luz y la óptica.</p>

<p>Entre sus hallazgos científicos se encuentran el descubrimiento de que el espectro de color que se observa cuando la luz blanca pasa por un prisma es inherente a esa luz.</p>
<br>
<br>
<br> 
<a name="b.><h2>b. ¿Qué es la síntesis aditiva del color?</h2>
<p>Un sistema de color aditivo: implica que se emita luz directamente de una fuente de iluminación de algún tipo. El proceso de reproducción aditiva normalmente utiliza luz roja, verde y azul para producir el resto de colores.</p>
<p> Combinando uno de estos colores primarios con otro en proporciones iguales produce los colores aditivos secundarios: cian, magenta y amarillo.</p>
<p> Combinando los tres colores primarios de luz con las mismas intensidades, se produce el blanco. Variando la intensidad de cada luz de color finalmente deja ver el espectro completo de estas tres luces.</p>
<p>Las televisiones y los monitores de ordenador son las aplicaciones prácticas más comunes de la síntesis aditiva.</p>

<br>
<br>
<br> 
<a name="c.><h2>c....</h2>

<p>...</p> 

 <br>
<br>
<br> 
<p>...</p>

                   <table align="center" border="1" width="75%" height="150">

                             <tr>

                                        <td>Síntesis aditiva</td>

                                        <td>Síntesis sustractiva</td>

                                        <td>Colores complementarios</td>

                                        <td>...</td>

                                        </tr>

                    </table>

         </body>

</html>

Para poner un enlace dentro de la misma página se utiliza el tag <a href="#nombre_del_ancla"></a> y el <a name="nombre_del_ancla">


Pondremos el tag <a name="nombre_del_ancla"> en el lugar dónde queramos que nos mande al pulsar sobre el hiperenlace y el tag <a href="#nombre_del_ancla"></a> entre el texto que enlaza.

Una vez hecho esto, copia el texto en el editor de texto (linux), guárdalo y carga la página en el navegador Mozilla para observar como funciona el enlace dentro de la misma página. 

Ejercicio 14: Enlace a una URL que no está en nuestro servidor.

Vamos a poner un enlace en nuestra página index.html a la página principal de otra página web, como por ejemplo http://www.pinturayartistas.com.
Podemos incluso copiar una imagen de la página web y ponerla en nuestra página para que funcione como enlace. Para ello, pulsamos con el botón derecho sobre la imagen en cuestión y la guardamos en nuestro disco en la carpeta "imagenes" que ya tenemos creada.
Lo primero será incluirla en nuestro index.html y luego enlazarla. Vayamos por partes:

<html>

         <head>

                   <title>Página web de Lola Mena</title>

         </head>

         <body bgcolor=#5d0000 text=#f9e783>

                   <center><img src="imagenes/banner.jpg"></center>

                   <p><h1>Teoría del color</h1></p>
                   <img src="/imagenes/artista.gif" align="right">
                   <ol type="A">

                            <li>El color luz

                            <li>El color pigmento

                            <li>Colores cálidos

                            <li>Colores fríos

                   </ol>
...

Ya hemos colocado la imagen (se llama por ejemplo artista.gif y está en la carpeta "imagenes"). Ahora vamos a hacer el enlace a la página:

...

  <p><h1>Teoría del color</h1></p>
                   <a href="http://www.pinturayartistas.com"><img src="/imagenes/artista.gif" align="right"></a>
                   <ol type="A">

                            <li>El color luz

                            <li>El color pigmento

                            <li>Colores cálidos

                            <li>Colores fríos

                   </ol>

...

Guardamos el archivo, lo visualizamos en el navegador y probamos el enlace...

Ejercicio 13: Los hiperenlaces.

El hipertexto o hiperenlace nos permite enlazar nuestra página web con otras de dos formas:

1. Dentro de la misma página: poniendo un enlace que nos lleve a otro lugar dentro de la misma página.
2. A otra página: simplemente tendremos que dar la URL donde se encuentra, bien en nuestro disco duro, bien en internet.

A estos enlaces se les llama también link.


Vamos a construir tres páginas y partir de aquí las enlazaremos primero unas con otras.

Empezaremos con la primera página. A esta primera página o página principal la llamaremos index.html.

Escribamos su código:

<html>

         <head>

                   <title>Página web de Lola Mena</title>

         </head>

         <body bgcolor=#5d0000 text=#f9e783>

                   <center><img src="imagenes/banner.jpg"></center>

                   <h1>Teoría del color</h1>
                   <ol type="A">

                            <li>El color luz

                            <li>El color pigmento

                            <li>Colores cálidos

                            <li>Colores fríos

                   </ol>
                   <table align="center" border="1" width="75%" height="150">

                             <tr>

                                        <td>Síntesis aditiva</td>

                                        <td>Síntesis sustractiva</td>

                                        <td>Colores complementarios</td>

                                        <td>...</td>

                                        </tr>

                    </table>

         </body>

</html>

Esto, que es más o menos lo que llevamos hecho hasta ahora, habrá que guardarlo en un directorio nuevo. Construiremos una página con los títulos para el bloque uno. Este archivo se llamará bloque1.html y éste es su código:

<html>

         <head>

                   <title>Página web de Lola Mena-Bloque1</title>

         </head>

         <body bgcolor=#5d0000 text=#f9e783>

                   <center><img src="imagenes/banner.jpg"></center>

                   <h1>Teoría del color: El color luz</h1>
                   <ol type="A">

                            <li>Newton y la teoría de las descomposición de la luz.

                            <li>La síntesis aditiva del color luz.

                            <li>Uso terapéutico del color.

                            <li>Colores luz y escenografía.

                   </ol>
                   <table align="center" border="1" width="75%" height="150">

                             <tr>

                                        <td>Síntesis aditiva</td>

                                        <td>Síntesis sustractiva</td>

                                        <td>Colores complementarios</td>

                                        <td>...</td>

                                        </tr>

                    </table>

         </body>

</html>

Bien, ahora enlazaremos la página principal (index.html) con la página bloque1.html. Para ello utilizaremos el tag <a href="URL">Texto de enlace</a>.


Ahora tendremos que añadir el código necesario en el archivo index.html.

<html>

         <head>

                   <title>Página web de Lola Mena</title>

         </head>

         <body bgcolor=#5d0000 text=#f9e783>

                   <center><img src="imagenes/banner.jpg"></center>

                   <h1>Teoría del color</h1>
                   <ol type="A">

                            <li><a href="bloque1.html"> El color luz</a>

                            <li>El color pigmento

                            <li>Colores cálidos

                            <li>Colores fríos

                   </ol>
...

Una vez que guardes este código en el archivo index.html, tus archivos deben quedar como siguen:

1. Tendrás una carpeta en la que debe haber asimismo una carpeta "imagenes" en las que estarán tus imágenes (las que utilices en la página web).
2. Dentro de esa carpeta mayor habrá también un documento llamado bloque1.html y otro llamado index.html.

Bien sólo nos queda enlazar ahora la página bloque1.html con index.html. Para ello pondremos un enlace , por ejemplo, en la imagen que tenemos. Modificamos el código del archivo bloque1.html y lo guardamos, actualizamos el navegador y comprobamos los enlaces.

<html>

         <head>

                   <title>Página web de Lola Mena-Bloque1</title>

         </head>

         <body bgcolor=#5d0000 text=#f9e783>

                   <center><a href="index.html"><img src="imagenes/banner.jpg">
border="0" alt="Página Principal" title="Página Principal"></a></center>

                   <h1>Teoría del color: El color luz</h1>