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.