Hoy intentamos hablar de...
Desde que pulsas un enlace a terzas.es hasta que te llega de vuelta esta página hay un largo camino que recorrer... ¡a la velocidad de la luz!
O, dicho en román paladino, de qué [beeeeeeep] va este sito.
El tema cero introduce la organización y la metodología didactica del aula. así como los objetivos y la motivacion de este proyecto
También te cuento como es el servicio paralelo de clases particulares que te ofrezco
Un repaso rápido por la parte operativa de internet para que sepamos localizarnos y no nos perdamos cuando entremos en materia.
PERO, apenas comienza la clase, un alumno interrumpe al profe con una pregunta impertinente... ¿o... no era tan impertinente la pregunta?
A ver si esta vez no hay interrupciones y podemos avanzar
Intentaremos hablar de Internet, La última versión del Telégrafo de Samuel Morse... ¿Habrá suerte?
¡¡¡No corras tan despavorido!!!... ¡que no vamos a contar ningún rollazo sobre historia...!
O de como un humilde programa llamado "navegador" realiza un titánico viaje de ida y vuela, no una, si no innumerables veces hasta que te puede mostrar lo que ahora estás leyendo
'eishshtii emmeeell faaaif an Siii esseess zriii'. pronúncialo despacio, comiendo chicle y alargaaaando las vocales. (¡¡¡ooooh!!!, este sí que sabe, pensarán los que te oigan....)
En España se puede medir el nivel de incompetencia de un sujeto cualquiera por el número de parrafadas en inglés que suelta por su boca.
Para hacer bien las cosas desde el principio con html y CSS necesitamos un servidor.
Pero contratar uno al principio no es la mejor opción, así que nos vamos de excursión a casa de Rubén Alonso, autor de Mi posicionamiento web a que nos enseñe como instalar el "localhost"
"Hace algún tiempo, en ese lugar donde hoy los bosques se vistn de espino, se oyó la voz del poeta gritar, Caminante no hay camino, se hace camino al andar."
Antonio Machado
La volatilidad del los caminos de Internet hubiera inspirado este poema a Machado si viviera hoy.
Que el profe se retrase no es normal… Hasta ahora siempre ha tenido una puntualidad sajona.
Los alumnos han bajado el nivel de ruido propio de cuando están solos en clase. Algo está captando su atención filtrándose poco a poco entre todo el grupo.
- ¿qué es eso?…
La pizarra parece ocupar todo. Parece elástica, como si se pudiera expandir reptando por todas las paredes… Tizas de muchos colores dibujan una trama compleja de líneas… algunos empieaan a intuir que las líneas son caminos…
- ¡mira!… ordenador, … portátil, … tablet, … móvil….
- ahí pone “VPN”… eso lo he tenido que activar en mi móvil par los datos.
- Router… sí, eso lo tengo en mi casa, Por detrás tiene escrita la contraseña de la WIFI.
Entra el profesor, pero los alumnos no se dan cuenta de inmediato de su presencia. Siguen absortos mirando a ……
- Profe, ¿Y eso, qué es?
Eso es el largo camino que tiene que recorrer tu dispositivo (Ordenador, móvil, …) para alcanzar al ISP.
¿Qué dijimos ayer sobre la tarea del ISP?
- (caras dudosas, cuchicheo… uno está mirando sus apuntes y lee:) “ISP: Internet services provider. Es el mediador entre Internet y todos los usuarios...”
Eeeexacto….!!!!
El esquema de la pizarra muestra lo lejos que está el ISP de nosotros y que hay, no uno, si no muchos caminos, a cual mas largo, hasta que nuestro dispositivo lo alcanza. Mas tarde diremos algo sobre estos caminos. Ahora solo diremos que topológicamente podemos resumir el camino completo hasta un sitio así:
1- Para acceder a un sitio nuestro dispositivo debe conectar con un ISP
2- El sitio buscado se encuentra en un servidor.
3- El mapa y las instrucciones para alcanzar el sitio están en un DNS (Servidor de nombres de dominios)
Abrid el navegador Mozilla Firefox.
Ahora podéis, o bien teclear en la barra de direcciones esto,
o bien podeis abrir Google y teclear esto otro:
Vamos a ver qué ocurre desde el momento que pulsáis ”intro”, en el primer caso, o hacéis click en un enlace, en el segundo caso:
1- Firefox llama al ISP.
2- el ISP responde a la llamada.
3- Firefox pregunta al ISP: ¿Dónde está “terzas.es”?. Y se queda esperando una respuesta.
4- El ISP llama al DNS correspondiente y le pregunta por la dirección de “terzas.es”. Si no lo encuentra en el primer DNS sigue llamando a otros DNS hasta que lo encuentre en alguno. A esta tarea se la conoce como “resolver la dirección de un sitio”.
5- Cuando el ISP tiene la dirección le responde a Firefox diciéndole que terzas.es está en el servidor de Raiola Networks y le da la dirección IP para comunicar con el sitio. El ISP cuelga la llamada.
7- Firefox vuelve a llamar al ISP
6- Firefox le pide al ISP que le pase la llamada a Raiola Networks para visitar el sitio “terzas.es”
7- el ISP llama a Raiola y le informa de que queremos visitar “terzas.es”
8. Raiola comprueba que tiene alojado a “terzas.es” y, como en este caso solo le hemos mandado el nombre de dominio, sin ninguna ruta en el árbol de carpetas, busca en la carpeta raiz del sitio un archivo que se llame “index.html”. Cuando lo encuentra se lo envía al ISP.
9- El ISP le envía a Firefox el archivo que le ha dado Raiola. Y cuelga la llamada. El archivo contiene un texto que tiene este aspecto:
10- Firefox lo guarda en una carpeta de archivos temporales y comienza su trabajo mas complicado: Interpreta la secuencia de órdenes que vienen en el archivo recibido hasta que logra dibujar esto:
11- Si en las instrucciones que trae el documento para qu el navegador dibuje el resultado hay llamadas a, por ejemplo, fotografías, videos, textos de otros documentos, … el navegador tiene que realizar todo el proceso de llamada al ISP ¡¡¡para cada elemento nuevo!!!
Acabamos de ver que:
- el navegador es capaz de conectarse con el ISP, pedirle que nos lleve hasta un sitio y recibir de vuelta un archivo que coloca en un directorio temporal.
- por otra parte, el navegador es capaz de leer el documento que ha recibido y ¡¡renderizarlo!!. O sea, dibujar una imagen a partir de unas instrucciones que le vienen dadas en el documento que ha recibido.
- Accede a cualquier carpeta de tu ordenador donde tengas documentos, selecciona un documeto de imagen (jpg, png, …), seleccionalo y abre el menú de contexto (botón derecho del ratón, izquierodo si lo tienes configurado para zurdos), selecciona la opción “abrir con...” y “navegador Firefox”.
- Se abre el navegador y te muestra la imagen seleccionada. Observa la barra de direcciones y fíjate lo que pone. Ya no pone algo así como “http://dominio.com”… ¿Verdad?
- haz la misma prueba con documentos PDF, word, … Habrá algunos que no se abran y te diga que no puede abrir ese formato, o te dirá que falta algún plug-in… Pero, por lo general, te abrirá muchos tipos de documentos.
En el experimento que acabamos de hacer hemos visto la tarea mas complicada que tiene que hacer el navegador. La de renderizar, dibujar, documentos; ésto es, interpretar las instrucciones para poder dibujar un documentos de texto, de imagen, ….
Pero NO le llamamos “programa de dibujo”, como tampoco llamamos “programa de dibujo” a un procesador de texto, a un procesador de hojas de cálculo o a programa de manipulación de imágenes… ¡¡y eso que todos ellos son programas de dibujo!!, o, mejor dicho, de renderización.
A Firefox y sus homólogos le llamamos “navegadores” porque tienen la capacidad de comunicarse con algún dispositivo (nuestro disco duro o un ISP) para que le suministren un archivo.
Ten cuidado con la palabra “navegador”. Es un error muy común confundir su significado con “buscador”.
El “navegador” se limita a hacer llamadas a un dispositivo interno o externo de tu ordenador y a informar de qué archivo quiere y de qué sitio lo quiere. Son otros (El ISP o el explorador de archivos de tu ordenador) quien le entrega el archivo pedido o el informe de que no existe el archivo y/o el sitio donde se supone que está el tal archivo.
El uso que acabamos de darle al navegador para “renderizar” documentos de distintos tipos que están en nuestro disco duro, no es el mas habitual. Para los documentos guardados en nuestro disco, normalmente, vamos a utilizar el programa mas adecuado para trabajar con ellos.
La verdadera potencia del navegador es que podemos acceder a archivos que están en otros sitios. ¡¡lo usamos para eso!! y gracias a esa capacidad es por lo que tú estás leyendo ahora este tema.
Aún no hemos hablado de qué es HTML o CSS. En la clase de mañana (tema IV) comenzaremos a trabajar con ellos. Por ahora solo vamos a decir que HTML es un formato de archivos, como “.doc.”, “.jgp”, “.pdf”. La extensión de un archivo HTML es, como no, “.html” (o, en versiones mas antiguas, “htm”). Css, por su parte, ¡también!, es un formato de archivo. La extensión es “.css”. Sin embargo el formato CSS puede estar escrito dentro de un archivo “.html”.
Estos formatos, HTML y CSS, son los que tendrá el archivo que recibirá el navegador como respuesta a la petición que le haga a un sitio web a través de todo el camino que ya hemos descrito.
arriba -- índiceVamos a escribir un poco de código para ver como Firefox actúa para renderizar un documento.
1- Prepara en tu disco duro una carpeta para este ejercicio. Por ejemplo, llámala practicas-1.
Acostúmbrate a NO usar espacios, acentos ni caracteres raros en los nombres de carpetas y archivos Solo letras, números, guión medio (-) y guion bajo (_). así no tendrás problemas el día que traslades tu trabajo a un servidor.
2- En esa carpeta guarda varias fotos (jpg, png, …). Yo he guardado foto1.jpg, foto2.jpg, foto3.jpg y fot4.jpg
4- ha llegado la hora de usar Notepad++. Arranca el programa y en cuanto tengas la ventana de trabajo activa, empieza por “guardar como” un archivo en blanco. El nombre del archivo será “galería-de-fotos.html”. Guardalo en la carpeta practicas-1
Ahora escribe este código html. Donde yo pongo “foto1.jpg”, etc. tú pon el nombre de tus fotos.
¿Te has fijado en los cambios automáticos de color del texto?… Esto es una ayuda de notepad para saber que estamos escribiendo bien el código. Por eso hemos empezado por guardar el documento antes de escribirlo: para indicarle a Notepad que íbamos a escribir código html.
- Profe, ¿No puedes pasarnos el archivo escrito?.
- ¡¡Nooo….!! Comienza a a habituarte a Notepad u otro editor de texto plano.
(durante unos minutos sólo se oye el traqueteo de las teclas de los ordenadores…)
- Vale, profe, ya está. Y ahora, ¿ir a la carpeta, botón derecho sobre “galeria-de...” y “abrir con”, “navegador Frefox”?
- Pues, ¡NO!, aun falta escribir otro archivo con Notepad. A este le llamarás "estilo-galeria.css".
(Otro rato de aporreo de teclas… El profe se pasea por los puestos señalando algunas faltas…)
- Vale, ¿ahora sí…?
- Sí, ahora sí. Entra a la carpeta, elige “galería-de-fotos.html”, botón derecho y “abrir con”, “navegador Firefox”.
¿Ha salido esto?
- No profe…. Ni se parece…
- Bueno, revisa los dos archivos, tanto el html, como el css, a ver si has escrito algo mal. Además puede cambiar el aspecto si las fotos que has cogido son mas altas que anchas.
arriba -- índice-¿qué ha pasado?
Cuando hemos elegido “Abrir con … Navegador Firefox” lo primero que ha pasado es que se ha arrancado la aplicación “Firefox” y, automáticamente, se ha puesto a realizar su trabajo
1- Ha llamado al dispositivo en el que se encontraba el fichero solicitado. En este caso el fichero está en nuestro ordenador. Así que ha llamado (de alguna manera) al disco duro y le ha solicitado el archivo.
2- Ha guardado el archivo en una carpeta temporal donde la puede consular.
3- Seguidamente se ha puesto a interpretar el contenido y a dibujar siguiendo, una a una, las instrucciones que están escritas en el archivo “ galería-de-fotos.html”
4- En la clase de mañana ya veremos con mas detalle estas instrucciones. De momento sólo nos vamos a fijar en unas pocas:
5- en la linea 7, entre otras cosas pone esto: href="estilo-galeria.css". En ese momento el navegador vuelve a llamar al dispositivo y le pide el archivo “ estilo-galeria.css”, lo recibe y lo guarda para usarlo cuando le vaya conviniendo. Este archivo, ya lo veremos mañana, contiene lo que vamos a llamar “reglas de estilo” o “estilos CSS”… ¿Empiezas a intuir por donde va el tema…?
6- El navegador sigue recorriendo línea a línea el archivo “galería-de-fotos.html” y, teniendo en cuenta las reglas que le acaban de venir en el otro archivo, va dibujando lo que le dice cada instrucción.
7- cuando alcanza las líneas 19, 25, 34 y 39; entre otras cosas, lee esto: src="foto1.jpg". Y, de nuevo tiene que pedir al sitio los archivos de estas fotos, guardarlos en su carpeta temporal y dibujarlas en la ventana donde toque hacerlo y con las reglas de estilo que le afecten.
Así es como trabaja el navegador: Repetimos:
- A “terzas.es” por el largo camino al ISP
- A tu disco duro.
- A otro puesto de tu red local
- ...
- Normalmente el orden para renderizar le vendrá dado en archivo “html” y los parámetros para renderizar le vendrán en forma de “estilos CSS” que podrán venir en un archivo aparte o estar incluidos de alguna forma en el archivo html. (fíjate en el código que hemos escrito que en algunos lugres pone, por ejemplo, style=”float:left;”)
arriba -- índiceEn la clase de mañana entraremos a saco con html y css, pero ahora vamos a observar algunos detalles que conviene que vayamos masticado.
Fíjate de nuevo en el código del archivo html.
1- hay palabras que están encerradas entre “ < ” y “ > ”. A estas palabras las vamos a llamar “etiquetas” y representan “cajas de contenidos”. (Mañana veremos despacio el concepto de “caja”) Ejemplos:
<html>, <title>, <footer>
2- Para cada etiqueta hay una “contraetiqueta o etiqueta de cierre”, esto es:
<html> … </html>, <body> … </body>, <div> … </div>, <p> … </p> (localiza el resto y haz una lista con ellas.)
3- TODAS las etiquetas tienen que tener su etiqueta de cierre.
4- pero¡, a veces puede parecer que ¡NO! tienen etiqueta de cierre. Falso, Sí la tienen. Busca en el codigo html alguna etiqueta que se llame “img”:
<img src”foto1.jpg” / >
fijate que tiene una barra “/”. Ese es su cierre. Esto se puede hacer con ciertas etiquetas que no tienen texto dentro. Esas etiquetas también se podrían cerrar como las demás:
<img src”foto1.jpg” > </img>
5- Fíjate que “hay etiquetas dentro de otras etiquetas”. Para esto hay una regla de oro:
No se cierra ninguna etiqueta ANTES de haber cerrado todas las que tenga dentro.
Por hoy llega lo que hemos dicho. Ahora…
arriba -- índice- haz alguna pruebas: Cambia los textos, por ejemplo.
- Prueba a añadir mas fotos. ¿cómo lo harías?.. y ¿cómo añadirías alguna ficha SIN FOTO?.
- Dentro de las fichas (que están delimitadas por “<div class="ficha">” y “</div>”) prueba a poner etiquetas “<p>” y su cierre “</p>”, entre medias escribe texto.
- busca en el archivo html y en el css valores con porcentajes. Por ejemplo “width:48%;” prueba a poner, por ejemplo, “width:60%;” o “width:30%;”, a ver qué pasa.
- En el archivo CSS busca “rgb(200,200,200)” y prueba a variar los tres números. ¡¡ojo!! pero solo puedes poner números entre “0” y “255”. El primer numero indica cantidad de “rojo”; el segundo, cantidad de “verde”, y el tercero, cantidad de azul. (RGB = Red, Green, Blue). La combinación de los tres valores da mas de ¡¡dieciséis millones de colores!!.
- Por último prueba a cambiar “black”, “white”, “navy” u “olive” por “rgb(255,200,150)” y juega a variar los valores.
Donde veas nombres de colores puedes sustituirlos por “rgb()” y viceversa.
Estos son nombre de colores de uso cotidiano. Prueba a utilizarlos.
| Nombre del color | valor RGB | Valor hexadecimal |
|---|---|---|
| black | 0,0,0, | #000 |
| teal | 0,128,128 | #008080 |
| blue | 0,0,255 | #0000FF |
| navy | 0,0,128 | #000080 |
| lime | 0,255,0 | #00FF00 |
| white | 255,255,255 | #FFFFFF |
| purple | 128,0,128 | #800080 |
| yellow | 255,255,0 | #FFFF00 |
| olive | 128,128,0 | #808000 |
| red | 255,0,0 | #FF0000 |
| maroon | 128,0,0 | #800000 |
| gray | 128,128,128 | #808080 | /
| fuchsia | 255,0,255 | #FF00FF |
| green | 0,128,0 | #008000 |
| silver | 192,192,192 | #C0C0C0 |
| aqua | 0,255,255 | #00FFFF |
- Bueno, hasta aquí por hoy.
Ya sabemos algo de html y CSS. Y, lo mas importante, espero que hayáis percibido con toda claridad que…
Mañana en ...
… Vamos a empezar a hacer nuestro primer programa con html y veremos algunas definiciones necesarias.
(la clase se alborota con las prisas por salir corriendo a la cafetería…)
¡¡Un momento….!!. ¡qué agónicos!…
(se paran, no muy convencidos, pero, por un segundo, se paran…)
Hay algunas cosillas que decir sobre el esquema que vimos al principio de la clase sobre como alcanzar al ISP. Pero eso lo vamos a dejar para una charla en el recreo. Pasaos por
(pensamiento colectivo:) ¡Espérame sentao, profe!, que voy a pasar enseguida por ahí... ¡jajajajaja!
Charlaremos sobre las conexiones al ISP que hay disponibles para el público general y veremos que la peor de todas es la “famosa 4G”…
¡hasta mañana!
(El profe va borrando la pizarra y recogiendo sus papeles mientras piensa que no tiene muy claro si cuando dijo “hasta mañana” los alumnos empezaron a salir de la clase o, por el contrario, ya se habían ido cuando lo dijo...)
El profe sale por la puerta y se da de bruces con un alumno que le aborda:
El profe da un respingo de sorpresa...
¿Oh... Qué...?
¿no me da los archivos con el codigo html y css...?
Esta bieeeeennnn!!!!
O Juan de Terzas
©Juan Carlos Martínez Álvarez
NOTAS:
- Si incluyes tu correo electrónico recibirás notificaciones de los nuevos comentarios de este hilo exclusivamente.
- Si solo quieres seguir el hilo pero no comentar, no escribas en la caja de comentarios pero indica tu correo.
- Si ya has comentado o seguido antes el hilo no hace falta que pongas tu correo de nuevo.
- Reservado el derecho de moderación: Aunque tu comentario se publica automáticamente, después será revisado y puede ser eliminado o editado si no cumple con la politica de uso de este sitio. Si se modera, se publicará un aviso en su lugar indicando las acciones de moderación realizadas.
O Juan de Terzas
©Juan Carlos Martínez Álvarez
