jueves, 14 de junio de 2012

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. 

miércoles, 13 de junio de 2012

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. 

viernes, 25 de mayo de 2012

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>

miércoles, 16 de mayo de 2012

Ejercicio 12. Creando tablas.

La mejor forma de organizar cosas en filas y columnas es una tabla.
Para añadir una tabla a nuestra página utilizaremos el tag <table></table>. Este tag se puede modificar así:
<table align="alineamiento" border="tamañoborde" width="anchura".
Donde "alineamiento" puede ser left, center o right; "tamañoborde" es un valor en píxeles para la anchura del borde y "anchura"es el ancho total de la tabla y se puede expresar en píxeles (width="200") o porcentajes (width="90%").

Si incluimos la tabla en nuestra página podría quedar así:

...
<li>Ordenando el texto </ul>
           <table align="center" border="1" width="75%" height="150">
           </table>
           <p><font color=#4ff3ff size=+2>Lola Mena </font><img src="f1.gif" alt="[Smile]">
           </p>

La tabla que hemos insertado sería una tabla alineada al centro, con un tamaño de borde de un pixel, cuyo ancho total ocuparía el 75% de la pantalla y de alto tendría 150 píxeles.

Pero para que la tabla tenga sentido tendremos que introducir las filas con el tag <tr></tr> y las columnas con el tag <td></td>.
Sería así:

...

<table align="center" border="1" width="75%" height="150">
<tr>
       <td>Primera fila, columna una</td>
       <td>Primera fila, columna dos</td>
       <td>Primera fila, columna tres</td>
       <td>...</td>
</tr>
           </table>

Podemos seguir introduciendo columnas según este esquema:


...

<table align="center" border="1" width="75%" height="150">
<tr>
       <td>Primera fila, columna una</td>
       <td>Primera fila, columna dos</td>
       <td>Primera fila, columna tres</td>
       <td>...</td>
</tr>
<tr>
       <td>Segunda fila, columna una</td>
       <td>Segunda fila, columna dos</td>
       <td>Segunda fila, columna tres</td>
       <td>...</td>
</tr>


           </table>

Podemos, como ya hemos dicho antes, modificar los parámetros de la tabla para que cambie. Haz algunos cambios y quédate con la tabla que más te guste:


...

<table align="center" border="1" width="75%" height="150">
<tr>
       <td align="center">Primera fila, columna una</td>
       <td align="left">Primera fila, columna dos</td>
       <td align="right">Primera fila, columna tres</td>
       <td>...</td>
</tr>
<tr align="center">
       <td>Segunda fila, columna una</td>
       <td>Segunda fila, columna dos</td>
       <td>Segunda fila, columna tres</td>
       <td>...</td>
</tr>


           </table>



Ejercicio 11. Subimos nuestro trabajo a Dropbox


Vamos a subir nuestro trabajo HTML a nuestra Dropbox. Accede a tu cuenta, crea una carpeta que se llame trabajo html, sube el archivo html que has realizado. También tienes que subir las fotos que insertaste en tu web html.

jueves, 10 de mayo de 2012

10. Cómo introducir imágenes.

Para incluir una imagen en una página web HTML tendremos que utilizar el tag <img src="imagen">. Para que el código funcione es necesario que tengas la imagen en el directorio donde tengas el archivo de la página web. Para eso puedes guardar las imágenes en una carpeta independiente que llames "images".
El ejemplo quedaría así:


<html>
         <head>
                   <title>Primera Página</title>
         </head>
         <body bgcolor=#5d0000 text=#f9e783>  
                   <img src="banner.gif">
                   <h1>Mi primera página web.</h1>
                   <p>Estoy haciendo mi primera página web y esto empieza a gustarme, ya sé darle <i>color al fondo</i> y a <i>las letras</i> y ahora estoy aprendiendo a <b>darle formato al texto.</b></p>
                   <h2>Dando Formato al Texto</h2>
                   <ul> 
                            <li>Salto de línea    
                                       <ul type="square">
                                                <li>tag &lt br &gt
                                                <li>tag &lt p &gt
                                       </ul>   
                            <li>Enfatizando el texto
                            <li>Tamaño de la fuente
                            <li>Ordenando el texto
                   </ul>
                   <p><font color=#4ff3ff size= 6>Lola Mena</font></p>
         </body>
</html>


O también:

...
<img src="images/banner.gif">


Para colocar la imagen en un lugar determinado de la página, utilizaremos modificadores del tag <img>. Por ejemplo, para colocarla en el centro <center><img....></center>; si la queremos alinear a derecha o izquierda pondremos <img src=banner.gif align="right">, o left en vez de right...

Si la imagen va más arriba, en medio o abajo usaremos top, middle ó bottom. Por ejemplo:

...

 <p><font color=#4ff3ff size= 6>Lola Mena</font>
 <img src="f1.gif" align="top"></p>
 </body>
 </html>

Finalmente si queremos que nos aparezca un comentario cuando pongamos el ratón encima de imagen, tendremos que colocar el modificador title del tag <img>. El texto que queremos que aparezca, lo pondremos entrecomillado.

...

 <p><font color=#4ff3ff size= 6>Lola Mena</font>
 <img src="f1.gif" title="Smile"></p>
 </body>
 </html>



martes, 8 de mayo de 2012

9. Ordenando el texto.


En cuanto al orden del texto, podemos utilizar viñetas ordenadas o sin ordenar, que llamaremos listas ordenadas (si están numeradas) o listas desordenadas:

<ol><li>Primer elemento<li>Segundo elemento...</ol>
<ul><li>Primer elemento<li>Segundo elemento...</ul>

<html>
         <head>
                   <title>Primera Página</title>
         </head>
         <body bgcolor=#5d0000 text=#f9e783>
                   <h1>Mi primera página web.</h1>
                   <p>Estoy haciendo mi primera página web y esto empieza a gustarme, ya sé darle <i>color al fondo</i> y a <i>las letras</i> y ahora estoy aprendiendo a <b>darle formato al texto.</b></p>
                   <h2>Dando Formato al Texto</h2>
                   <ol type="A">
                            <li>Salto de línea
                            <li>Enfatizando el texto
                            <li>Tamaño de la fuente
                            <li>Ordenando el texto
                   </ol>
                   <p><font color=#4ff3ff size= 6>Lola Mena</font></p>
         </body>
</html>

Lo que hemos introducido como nuevo quedaría así:

Dando Formato al Texto

A. Salto de línea
B. Enfatizando el texto
C. Tamaño de la fuente
D. Ordenando el texto

En vez de poner type="A", podemos también poner "a" (letras minúsculas), "I" (números romanos en mayúsculas), "i" (números romanos en minúsculas) ó "1" (numeración decimal). Si no ponemos nada, utilizará automáticamente la decimal. 

También podemos utilizar listas anidadas, como por ejemplo:

<html>
         <head>
                   <title>Primera Página</title>
         </head>
         <body bgcolor=#5d0000 text=#f9e783>
                   <h1>Mi primera página web.</h1>
                   <p>Estoy haciendo mi primera página web y esto empieza a gustarme, ya sé darle <i>color al fondo</i> y a <i>las letras</i> y ahora estoy aprendiendo a <b>darle formato al texto.</b></p>
                   <h2>Dando Formato al Texto</h2>
                   <ol> 
                            <li>Salto de línea    
                                       <ol type="a">
                                                <li>tag &lt br &gt
                                                <li>tag &lt p &gt
                                       </ol>   
                            <li>Enfatizando el texto
                            <li>Tamaño de la fuente
                            <li>Ordenando el texto
                   </ol>
                   <p><font color=#4ff3ff size= 6>Lola Mena</font></p>
         </body>
</html>

En este caso hemos hecho dos cosas: la primera introducir una lista dentro de otra. La segunda, para que aparezca en la página web los símbolos < y > que forman parte del código, hay que utilizar &lt y &gt. Quedaría así:

Dando Formato al Texto

1. Salto de línea
         a. tag < br >
         b. tag < p >
2. Enfatizando el texto
3. Tamaño de la fuente
4. Ordenando el texto

Por último, dentro de las listas desordenadas (viñetas) utilizaremos el tag <ul> con el parámetro <ul type="valor">, donde valor puede ser circle (círculo abierto), square (cuadrado sólido) ó disk (disco sólido). Quedaría así:

...
<h2>Dando Formato al Texto</h2>
 <ul> 
                            <li>Salto de línea    
                                       <ul type="square">
                                                <li>tag &lt br &gt
                                                <li>tag &lt p &gt
                                       </ul>   
                            <li>Enfatizando el texto
                            <li>Tamaño de la fuente
                            <li>Ordenando el texto
                   </ul>

Dando Formato al Texto

  •  Salto de línea
       (viñeta cuadrada) tag < br >
       (viñeta cuadrada) tag < p >
  •  Enfatizando el texto
  •  Tamaño de la fuente
  •  Ordenando el texto

8. Tamaño de la fuente.

Al hablar del tamaño de la fuente, lo primero es que tenemos que distinguir entre el tag <h1>...</h1> (que es el encabezado de nivel 1 y hay hasta seis <h2>...</h2>, <h3>...</h3>,...,<h6>...</h6>) y el tamaño de la fuente.

En el primer caso:

<html>
         <head>
                   <title>Primera Página</title>
         </head>
         <body bgcolor=#5d0000 text=#f9e783>
                   <h1>Mi primera página web.</h1>
                   <p>Estoy haciendo mi primera página web y esto empieza a gustarme, ya sé darle <i>color al fondo</i> y a <i>las letras</i> y ahora estoy aprendiendo a <b>darle formato al texto.</b></p>
                   <p><font color=#4ff3ff>Lola Mena</font></p>
         </body>
</html>

El resultado será que Mi primera página web aparecerá en un tamaño mucho mayor, indicando que es el título principal.

En el segundo caso, cuando queremos modificar el tamaño de la fuente, tendremos que incluir size dentro del tag <font>...</font>, poniéndole un + delante del número para agrandar y un - para reducir la letra del tamaño estándar (size=0).

Podría quedar así:

<html>
         <head>
                   <title>Primera Página</title>
         </head>
         <body bgcolor=#5d0000 text=#f9e783>
                   <h1>Mi primera página web.</h1>
                   <p>Estoy haciendo mi primera página web y esto empieza a gustarme, ya sé darle <i>color al fondo</i> y a <i>las letras</i> y ahora estoy aprendiendo a <b>darle formato al texto.</b></p>
                   <p><font color=#4ff3ff size= +2>Lola Mena</font></p>
         </body>
</html>

También podemos indicar simplemente el tamaño en una escala del 1 a 7:

<html>
         <head>
                   <title>Primera Página</title>
         </head>
         <body bgcolor=#5d0000 text=#f9e783>
                   <h1>Mi primera página web.</h1>
                   <p>Estoy haciendo mi primera página web y esto empieza a gustarme, ya sé darle <i>color al fondo</i> y a <i>las letras</i> y ahora estoy aprendiendo a <b>darle formato al texto.</b></p>
                   <p><font color=#4ff3ff size= 6>Lola Mena</font></p>
         </body>
</html>





viernes, 4 de mayo de 2012

7. Dándole color y forma al texto.

Seguimos con nuestro archivo HTML y ahora nos vamos a ocupar del texto:

1. Si le hemos puesto un color oscuro al fondo, elegiremos un color claro para el texto, por ejemplo:

<html>
         <head>
                   <title>Primera Página</title>
         </head>
         <body bgcolor=#5d0000 text=#f9e783>
                   Mi primera página web
         </body>
</html>

Este parámetro text dentro del tag body da formato a todo el texto del documento. Si queremos también podemos dar sólo color a algunas palabra o incluso a letras concretas. Podemos hacerlo añadiendo nuestro nombre, por ejemplo:


<html>
         <head>
                   <title>Primera Página</title>
         </head>
         <body bgcolor=#5d0000 text=#f9e783>
                   Mi primera página web
                   <font color=#4ff3ff>Lola Me</font>na
         </body>
</html>

El tag font se usa para cambiar características del tipo de letra, en este caso con el parámetro color se define el color del texto.

3. Para darle formato al texto, ya conocemos algunos tags, como por ejemplo los que se refieren a:


  • Salto de línea: Hay dos tags que son <br> y <p>...</p>. <br> Corte (break), corta la línea sin que se interrumpa el texto, mientras que <p>...</p> marca el contenido de un párrafo. 
Podéis probar con los dos tags y ver los efectos que producen:

<html>
         <head>
                   <title>Primera Página</title>
         </head>
         <body bgcolor=#5d0000 text=#f9e783>
                   Mi primera página web
                   <p><font color=#4ff3ff>Lola Me</font>na</p>
         </body>
</html>


o:


<html>
         <head>
                   <title>Primera Página</title>
         </head>
         <body bgcolor=#5d0000 text=#f9e783>
                   Mi primera página web
                   <br><font color=#4ff3ff>Lola Me</font>na
         </body>
</html>

En el primer caso tiene que quedar así:

Mi primera página web

Lola Mena

Y en el segundo quedará así:

Mi primera página web
Lola Mena

Como veis la diferencia está en la distancia entre párrafos, con lo que podemos enfatizar el texto.


  • Para poner el texto en cursiva o negrita utilizamos <i>...</i> de itálica y <b>...</b> de bold (negrita).



<html>
         <head>
                   <title>Primera Página</title>
         </head>
         <body bgcolor=#5d0000 text=#f9e783>
                   Mi primera página web
                   <p>Estoy haciendo mi primera página web y esto empieza a gustarme, ya sé darle <i>color al fondo</i> y a <i>las letras</i> y ahora estoy aprendiendo a <b>darle formato al texto.</b></p>
                   <p><font color=#4ff3ff>Lola Me</font>na</p>
         </body>
</html>

Otros tags que remarcan el texto son:

  • <s>...texto tachado...</s> (también <strike>...</strike>)
  • <u>...texto subrayado...</u>
En la próxima entrada abordaremos el tema del tamaño de la fuente y la ordenación del texto.


Ejercicio 6: Dropbox.


Antes de continuar vamos a abrirnos una cuenta en Dropbox. Es muy útil. Se trata de tener un espacio gratuito de 2 Gigas en Internet, donde podemos subir los archivos que queramos y acceder a ellos desde cualquier ordenador (sólo puedes acceder tu, claro).

Intenta abrirte una cuenta. En internet hay muchas páginas que te dicen como hacerlo, como por ejemplo esta:

http://www.tecnologiadiaria.com/2011/03/crear-cuenta-dropbox.html

Ejercicio 5. Mi primera Página Web paso a paso.

1. Ya sabéis que lo primero es abrir el editor de texto y escribir el código de inicio y fin de página:

<html>
         Mi primera página web
</html>

Después de esto ya podéis guardarlo en vuestra carpeta de trabajo con el nombre primera.html o vuestronombre.html.

Si abrís la carpeta con doble clic, os aparecerá la estructura más simple de una página web...

2. Ahora vamos a añadir las dos secciones principales en las que se divide una página web: cabecera (<head> </head>) y el cuerpo (<body> </body>).
Como ya hemos indicado antes, en el head irá todo lo que no se ve dentro de la página pero es información sobre la misma: autor, título,...
En el body insertaremos el texto, los gráficos y todos los demás tags que darán forma al texto.

3. Abrimos de nuevo el editor de texto con nuestro documento y lo modificamos:

<html>
         <head>
                   <title>Primera Página</title>
         </head>
         <body>
                   Mi primera página web
         </body>
</html>

4. Al abrirlo en el navegador, lo que aparece entre los tag <title> </title> es el título que veremos en la barra del navegador.

5. Ahora vamos a darle color a la página. 
HTML utiliza un sistema de color llamado RGB y para especificar un color se utilizan seis dígitos en parejas de dos números escritos en sistema hexadecimal cuyo formato será el siguiente:

                                                            color=#rrggbb

  • rr es la cantidad de color rojo que lleva la mezcla.
  • gg es la cantidad de verde (green).
  • bb será la cantidad de azul (blue).
El ejemplo que sigue sería la manera de darle color a nuestra página web (os pongo en negrita lo único que añadimos, bgcolor que es background color o color de fondo y va dentro del tag <body>):

<html>
         <head>
                   <title>Primera Página</title>
         </head>
         <body bgcolor=#5d0000>
                   Mi primera página web
         </body>
</html>


Para escoger el color podemos utilizar cualquier herramienta de dibujo que tenga una paleta de colores o el mismo programa GIMP. Abriendo el programa y haciendo doble click sobre el cuadrado de color negro se nos abre un cuadro de diálogo donde podemos escoger el color que nos gusta o modificar los valores de rojo, verde o azul.

En la próxima entrada hablaremos de cómo darle forma y color al texto...

jueves, 3 de mayo de 2012

Ejercicio 4: Estructura de la página web.

La página web que vais a elaborar tendrá que tener al menos las siguientes características:

1. Tendrá mínimo 3 páginas escritas en código html.
2. Las 3 páginas estarán enlazadas entre sí.
3. Una página tendrá al menos un enlace a un lugar dentro de ella.
4. Por lo menos una página contendrá una imagen pequeña enlazada a la original más grande.
5. Una página tendrá una tabla.
6. Insertaréis una lista ordenada.
7. Todas las páginas tendrán fondo distinto al blanco y letras de distinto tamaño y color.
8. Tema: libre, pero os recuerdo que cuanto más enlazado con vuestro currículo, mejor. No puntuaré ninguna página web que presente contenidos ofensivos, discriminatorios o que atenten contra el respeto y las opiniones del resto de los compañeros. Cuanto más educativo, mejor nota obtendréis...

Más teoría HTML...

Bueno, por si todavía no tenéis claras algunos conceptos sobre el nuevo lenguaje que estamos utilizando, aquí os dejo estas aclaraciones que espero que os ayudarán a entenderlo.

1. HTML significa Hypertext Markup Languaje, o lenguaje de marcas de hipertexto. Los ficheros html (pág. web) son ficheros de texto y la forma del texto viene definida por un conjunto de marcas o tags.

2. El Navegador distingue los tags del resto del texto porque van dentro de <...>.

3. Las letras de la etiqueta pueden estar en mayúsculas o minúsculas. Usaremos las minúsculas.

4. Todo lo que haya entre ambas etiquetas estará influenciada por ellas. Por ejemplo, todo el documento HTML debe estar entre las etiquetas <html> y </html>.

5. Para crear las páginas html sólo necesitamos un editor de textos lo más simple posible. Hay programas específicos que hacen directamente páginas web sin que tengamos que aprender los códigos, pero el conocer la estructura de una página HTML es fundamental para que las cosas aparezcan en el navegador como queramos.

Ejercicio 3: más html


Te dejo aquí un enlace con los códigos básicos del lenguaje html.
Debes diseñar una web utilizando el máximo de comandos de la lista.
Cuando termines copia el código html que usaste y copia y pégalo en una nueva entrada (en la parte redactar). Titula la entrada MÁS HTML.

Fúmbol


lunes, 30 de abril de 2012

Ejercicio 2: Estructura básica del código fuente de una web


<html>
<meta Charset=utf-8>
<head>
<title>
Página de prueba
</title>
</head>
<body bgcolor="red" text="blue">
<h1>
letras de tipo uno
</h1>
<hr>
<center><img src="nombredeunafoto.jpg"</center>
<h2>
tipo de letra dos<br></br>
</h2>
<h3>
tipo de letra tres
</h3>
</body>
</html>

Hemos aprendido la estructura básica en html de una web. Debes subir a tu blog el código fuente que has empleado hasta ahora ( copiarlo y pegarlo en una entrada- en la parte redactar, no en la de html)

miércoles, 25 de abril de 2012

Ejercicio 1: Primeros pasos en Lenguaje HTML.

1. Busca unas indicaciones sencillas y claras de qué es y para que se utiliza el lenguaje HTML. Sube a tu blog esa pequeña reseña.

2. Observa los dos vídeos tutoriales, vamos a realizar una pequeña página web en lenguaje HTML tal y como nos indica los vídeos.



Resumen:

Recordamos los primeros pasos:
1- Creamos un archivo vacío en el escritorio, y lo renombramos con el nombre que queramos .html
2- Damos en botón derecho del ratón y abrimos el archivo con gedit. Reducimos el tamaño de la ventana con la que hemos trabajado.
3. Pulsamos con doble clic en el archivo html: se abre el archivo desde el navegador para internet.
4. Escribimos cualquier cosa en el editor gedit, una frase larga en dos renglones distintos. Damos a guardar. En la ventana del navegador recargamos la página. Aparecerá lo que hemos escrito pero en una sola línea, así que vamos a dar la orden en lenguaje html de que existan dos renglones y no solo una línea. La orden es esta expresión:   <br>, las expresiones del lenguaje html siempre van entre  estos dos símbolos: < >   br significa break, romper.
Es un ejemplo sencillo de como va a funcionar la programación en html, tendremos que seguir indicando en el editor de texto nuevas expresiones html hasta que consigamos la apariencia de página web.

viernes, 20 de abril de 2012

Ejercicio 25b. Subir fotos con Picasa Web.







Ejercicio 25a. Subir fotos con Picasa.









Os dejo otro tutorial que se escucha mejor que el anterior y parece más claro en sus explicaciones. Espero que con los dos seáis capaces de realizar este ejercicio, que además de la instalación de Picasa, consiste en subir al blog una foto que tenga un enlace a vuestro álbum en la Web Picasa... En fin, también podéis buscar vuestro propios tutoriales y organizar las fotos como os parezca.

 

martes, 10 de abril de 2012

El Troll de Internet... está en Twitter

Cultivando nuestra identidad digital

Ejercicio 24: Pasos para crearte una cuenta en Twitter.

Vale, ya sabes qué es el Twitter y para qué sirve, ¿no?... Ahora quiero que busques un tutorial (o elabores una entrada) que tendrás que colgar en tu blog en el que se explique de forma clara cuáles son los pasos para crear una cuenta en Twitter. Si después deseas crearte la cuenta...ya sabrás cómo!!!

Qué es el twitter y para que sirve


Twitter pertenece a los novatos. Sólo tiene tres años de edad y su crecimiento está siendo tan sorprendente… que casi todo el mundo acaba de llegar: últimamente incorpora 10 millones de nuevos usuarios al mes. Los primeros días son decisivos para odiar o amar Twitter. Esta es una pequeña guía para los que están empezando.
¿Para qué sirve?
Para nada y para todo. En Twitter se puede perder el tiempo, labrar una carrera profesional y una red de contactos, hacer el ridículo en público, seguir a sus celebrities favoritas, charlar con sus amigos, vigilar a sus enemigos, enterarse de las noticias de última hora o encontrar buenos artículos para leer.
De alguna forma, ciertas estructuras sociales creadas alrededor de los blogs se han trasladado a Twitter, un microcosmos que se ha liberado de la pesada carga de escribir posts para centrarse en lo esencial: las personas y su conversación, que ahora es más informal y pública. La mejor forma de entenderlo es crear una cuenta y empezar a crearse una red.
¿Qué es eso de followings y followers?
Esos dos numeritos traen de cabeza a recién llegados y a veteranos por igual. No es muy intuitivo, pero “Following_me” indica el número de personas a las que se siguen, y “Followers_me” las que lo siguen a ustéd.
Cuanto mayor sea el número de la izquierda, más se complicará su página de Twitter, porque recibirás más actualizaciones. Y cuantos más seguidores tenga, más personas recibirán sus mensajes.
¿Cómo funciona?
Cuando tenga una cuenta y siga a unos cuantos verá cómo sus mensajes empiezan a aparecer en su página según vayan siendo escritos. Para hablar, escriba en el recuadro superior, que va contando los caracteres que te quedan hasta llegar a 140 (no puede pasarse) y oprima “update”.
Si quiere responder a algún comentario, acerca el cursor del ratón a la derecha del mensaje, donde verá una flecha: oprima y escriba.
¿A cuántos debo seguir?
Hay muchas teorías: que sólo hay que seguir a un número manejable de personas para atenderlas bien, que por cortesía se debe seguir a aquellos que te siguen, que vale añadir a cualquiera para que por lo menos visiten tu página una vez… Haga lo que haga comienza despacio para habituarte y procure saber de dónde ha salido cada persona a la que sigue. Así encontrará su límite.
Si tiene miedo de equivocarse experimenta con famosos, con cuentas corporativas o con los “vips”, que para eso están… pero tenga cuidado porque algunos actualizan tanto que terminará odiando su avatar cada vez que aparezca.
¿Consejos?: Recuerde que la gente interesante suele hablar con gente interesante, husmea en los “favoritos” de los usuarios que le gusten, encuentre en twitter a sus bloggers preferidos, defina los temas que le interesan y descubra quién los domina, que no le tiemble el pulso al “desfollowear”.
Si aun así, le da vergüenza entrar solo en este bar, convence a algún amigo de que lo acompañe y cree cuentas a la vez.
¿Cuánto y cómo actualizo?
Aquí tampoco hay reglas. Unos instalan Twitter en el móvil y se toman al pie de la letra el “¿Qué estás haciendo?” desde el desayuno hasta la hora de ir a dormir.
Otros sólo abren la boca para sentar cátedra, hacer un buen chiste, informar de algo o escandalizar al personal. Al final, todo dependerá de su carácter y de lo que quiera charlar con los demás.
Sobre los contenidos, la única recomendación es que tenga cuidado: Google indexa bien las conversaciones y las acaba convirtiendo en muy poco íntimas.
Los “tweets” se pueden borrar… pero el buscador interno los sigue encontrando. Así que cuidado con hablar mal de nadie (excepto si quiere que se entere, en cuyo caso usar Twitter es una gran opción).
¿Qué es eso de las @?
Si su usuario es “rcntufanboy”, por ejemplo, serás @rcntufanboy en Twitter. Elija bien el nombre, porque puede encontrarse en la incómoda situación de que alguien lo llame así en voz alta en la vida real alguna vez. Cuando alguien quiera enviarle un mensaje (público, pero dirigido especialmente a ustéd) usará ese nombre.
Si alguien escribe “esto le gustará a @rcntufanboy”, aunque no lo siga, lo podrá ver en el menú de la derecha (debajo de “home”, donde aparece su usuario precedido por la arroba). Y del mismo modo, si quiere que algo le llegue a alguien, abusa de la arroba.
¿Qué son las #?
La almohadilla (#) es otro de los “comandos” básicos de Twitter. De forma más o menos espontánea los usuarios la utilizan para etiquetar temas, noticias o eventos y que así toda la información producida sobre ese asunto sea más fácil de seguir.
Por ejemplo, #escandalogt sirve para seguir los últimos sucesos en Guatemala. Y #3wordsaftersex… para bien poco. Si quiere crear un tema o que sus “tweets” sobre ese tema sean leídos, use las almohadillas.
¿Qué son los “trending topics”?
Esas palabras que ve en la barra de la derecha indican los temas sobre los que más se está hablando en este momento. Si hace clic en uno verá que su ritmo de actualización es impresionante.
Si se cae un avión, tardará poco en aparecer ahí. La industria está del todo fascinada por la velocidad a la que se extienden y por el tipo de temas que triunfan.
Eso sí, se nota el peso de la comunidad estadounidense y caracter “geek” que aún posee la red. Es posible que no entienda a qué se refieren muchos de esos “trending topics”.
¿Cómo uso el buscador?
Si creía que con buscar su nombre de vez en cuando en Google tenía suficiente para saber si se había dicho algo sobre ustéd, o sobre su empresa, está equivocado.
La nueva obsesión de la industria y los usuarios es el buscador de Twitter, al que se puede acceder por search.twitter.com o a través de la cajita de búsqueda de la barra derecha.
Es la forma de llegar a millones de conversaciones en tiempo real. Prueba buscando un tema que le interese seguir en el tiempo y guárdé la búsqueda (en “save this search”) para ahorrar tiempo.
¿Qué es un tweet? ¿Y un RT? ¿Y un retweet?
Un tweet es cada micro mensaje de Twitter. Un retweet (abreviado RT) es una forma de “reenviar” a sus seguidores un tweet que le ha gustado de alguien a quien sigues. Es una forma poderosa de extender información, de unir redes y de “presentar” gente entre sí, pero conviene no abusar. Muchos usuarios comienzan a ser críticos con ellos.
Y además las redes están más relacionadas de lo que parece. Es posible que un mismo tweet le acabe llegando a una persona docenas de veces.
¿Qué es un DM?
Es la abreviatura de “direct message”, un mensaje directo y privado. Se trata de un minisistema parecido al correo electrónico que Twitter ha creado para que los usuarios se comuniquen entre ellos sin que lo sepa todo el mundo. Es muy útil y la conversación suele ser mucho más rápida, informal y corta que por e-mail, pero sólo permiten la comunicación entre gente que se sigue mutuamente.
Hay un comando para ello, pero al principio es mejor que para evitar un “epic fail” (un error catastrófico, en jerga) use el menú de la derecha, donde pone “Direct Messages”.
¿Qué es el “follow friday”? ¿Y el “twittmad”?
Muy popular entre los usuarios latinos, el “follow friday” es un heredero de los viejos “memes” (cadenas) sobre las que escribían los bloggers cuando no sabían de qué hablar o les apetecía confraternizar un poco con la comunidad.
El #twittmad es la reunión física de los usuarios de Twitter en europa, abierta a quien quiera pasarse. También hay twittsev, twittbarna, twittgranada, twittpalma, twittche…
¿Qué son esos enlaces en los que pone tinyurl, cort.as…?
La limitación de caracteres de Twitter ha servido para encontrar por fin un uso a los acortadores de URLS. Si quiere enlazar, deberá aprender a usarlos. Son sencillos. Puede usar el veterano Tinyurl, Bit.ly (el que Twitter usa por defecto) o cualquier otro.
¿Qué foto pongo?
Tenga en cuenta que mucha gente va a ver su foto, puede que varias veces al día. Piense en ellos y medite su decisión. Si duda, el artículo “Tu foto en Facebook te delata” es perfectamente aplicable a Twitter. Pero haga lo que haga, no deje el feo icono marrón que viene por defecto.
¿Por qué a los demás les aparece “posted from Twitterfox/Twitterrific” bajo sus tweets?
Mucha gente jamás le coge el truco a la diabólica interfaz web de Twitter y descubren de verdad el programa a través de clientes para el ordenador y el móvil que son, sorprendentemente, más sencillos de utilizar y que cambian la experiencia de forma sustancial.
Twitter es, además, una de las cosas más divertidas que se le puede instalar a un smartphone. Podemos recomendar: Twitterrific (Mac, iPhone), Twidroid (Android), Twitterfon (iPhone), TwitterBerry (BlackBerry) y Twitterfox (para Firefox en Windows, Mac, Linux), Twibble (Nokia, Blackberry) y Twobile (Windows Mobile).