¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
  1. Libros
  2. Aprenda los lenguajes HTML5, CSS3 y JavaScript para crear su primer sitio web (2ª edición)
  3. La Web
Extrait - Aprenda los lenguajes HTML5, CSS3 y JavaScript para crear su primer sitio web (2ª edición)
Extractos del libro
Aprenda los lenguajes HTML5, CSS3 y JavaScript para crear su primer sitio web (2ª edición) Volver a la página de compra del libro

La Web

¿Qué es la Web?

Todos los usuarios de Internet tienen la costumbre de visitar sus sitios favoritos o bien utilizar un motor de búsqueda para acceder al contenido que les interesa.

Como usuario, cuando utiliza su navegador web (Firefox, Chrome, Internet Explorer, Safari, Opera...), está situado del lado cliente. La información, los textos, las imágenes que se muestran en el navegador provienen de un equipo situado en algún lugar del planeta: el servidor.

1. Lado servidor: HTTP, FTP, lenguajes, SQL

Lo que llamamos servidor es, simplemente, un ordenador sobre el que se han instalado ciertas herramientas o programas que permiten disponer de nuevas funcionalidades. Este ordenador está conectado, obligatoriamente, a Internet y permite a los demás ordenadores realizarle consultas.

El protocolo de comunicaciones utilizado para la Web es el HTTP (Hypertext Transfer Protocol, protocolo de transferencia de hipertexto).

Realizamos un pequeño paréntesis relativo al término hipertexto, pues esta palabra forma parte, también, del acrónimo HTML (Hypertext Markup Language). Cuando hablamos de hipertexto, nos referimos a cierta cantidad de información (actualmente no hablamos únicamente de texto), que se almacena en lo que llamamos un nodo. Todos los nodos están relacionados con los demás nodos de modo que sea posible pasar de uno a otro para recorrer la información....

Los lenguajes y su utilidad

1. HTML

No vamos a entrar en los detalles de la historia y evolución del lenguaje HTML. Lo que hace falta saber sobre este lenguaje es que se escribe con etiquetas que funcionan, generalmente, por parejas, indicando respectivamente el inicio de la acción de la etiqueta y su final.

Una etiqueta está formada por una palabra, "p", "b", "table", "input"... precedida de un signo menor que (<) y seguida de un signo mayor que (>).

Existen muchas etiquetas que tienen, cada una, un rol bien definido.

Estas palabras, "p" o "b" u otras, indican el funcionamiento de la etiqueta.

Por ejemplo, la etiqueta <b> permite poner el texto en negrita (del inglés: bold), mientras que la etiqueta <p> permite crear un párrafo. Funcionan todas de la misma manera, con una etiqueta de apertura que indica el inicio de la acción y una etiqueta de cierre que indica el final de la negrita o el final del párrafo. A continuación, se muestra un párrafo que contiene el texto: Vamos a la playa.

<p>Vamos a la playa</p> 

La etiqueta de cierre se declara después de la etiqueta de apertura. Para un texto que se pone en negrita mediante la etiqueta <b> habrá que agregar, a continuación, la etiqueta </b> para indicar el final de la negrita. De la misma manera, cerraremos el párrafo mediante la etiqueta de cierre </p>. La etiqueta de cierre incluye el signo de división "/" (en inglés, slash) que se agrega antes del nombre de la etiqueta para diferenciarla de la etiqueta de apertura.

Tenemos, por ejemplo:

<p>Vamos a <b>la playa</b></p> 

Aquí, el párrafo contiene la frase completa, pero solo las dos palabras "la playa" se escriben en negrita.

Resultado: Vamos a la playa

Para profundizar en este ejemplo, cabe destacar la anidación de etiquetas, de manera similar a las muñecas rusas llamadas matrioskas que se alojan las unas en el interior de las otras.

images/ch1fig1.png

Las etiquetas <p></p> engloban todo el texto, las etiquetas <b></b> están en el interior del párrafo.

No se autoriza, EN NINGÚN CASO, tener una etiqueta cuya etiqueta de apertura se encuentre en el interior de una pareja de etiquetas y su etiqueta de cierre se encuentre en el exterior del mismo...

Los formatos de imagen

Aunque es posible crear magníficos elementos visuales con HTML5 y CSS3, será conveniente poder utilizar archivos de imagen que permitan mejorar el aspecto de la página, ilustrar un texto con un esquema, por ejemplo, o simplemente incluir una fotografía.

Existen muchos formatos de imagen. Algunos se utilizan, principalmente, en el mundo de la impresión, pues tienen una buena definición, aunque son muy pesados. Cuando se trata de trabajar en la Web conviene utilizar imágenes de buena calidad, pero lo más ligeras posible.

Existen dos maneras de crear una imagen en un ordenador.

1. Formato Bitmap

Quienes sepan inglés, habrán comprendido por el nombre que se trata de un mapa o plano (map) formado por 1 y 0 (bits).

Para ello, imaginemos una cuadrícula que representa una tabla de 100 celdas por 100 celdas, es decir, el equivalente a una imagen de 100 píxeles por 100 píxeles.

Cada celda podrá tener un valor que será igual a 0 o bien a 1. Si se remplaza el 1 por el color blanco y el 0 por el color negro, obtendremos una imagen Bitmap en blanco y negro, que equivaldría a lo que se veía en los ordenadores del siglo pasado.

Afortunadamente, no seguimos en un mundo en blanco y negro.

En lugar de utilizar un único bit por píxel, la norma ha evolucionado para aceptar un byte por píxel (un byte equivale a ocho bits). Dicho de otro modo, ya no hay un único bit por píxel, sino 8 bits.

Un byte es una unidad de memoria de un ordenador, que puede contener un valor comprendido entre 0 y 255. Se dice, en ocasiones, que ciertos cursores no nos permiten seleccionar más que un valor comprendido entre 0 y 255. En este caso, se dice que el ordenador utiliza un byte de memoria para este parámetro.

Con esta configuración, el archivo Bitmap contiene, como máximo, 256 colores (de 0 a 255).

Más tarde, el formato ha evolucionado para utilizar no solo un byte, sino tres bytes, y luego cuatro.

Los tres bytes se reparten entre los tres colores básicos utilizados en pantalla: rojo, verde y azul. Con esta configuración, tenemos un color que se define mediante 256 niveles de rojo diferentes, combinados con 256 niveles de verde diferentes y otros tantos de azul.

Se alcanza, de este modo, hasta 16.000.000 de colores, lo que permite reproducir bellas fotografías...

Los navegadores y sus herramientas

En esta sección se aborda una herramienta que es muy importante y práctica en el desarrollo, se trata de la ventana de ayuda al desarrollo. Algunas indicaciones de esta herramienta requieren conocer un mínimo de CSS y JavaScript, en la medida en que nos van a ayudar a corregir nuestros errores y facilitar el trabajo. Incluso aunque en este punto del libro no todo será comprensible, la idea es presentar aquí la herramienta y saber que se utilizará en cualquier etapa a lo largo del libro.

En función del sistema operativo sobre el que trabajemos, podremos utilizar ciertos navegadores. Lo ideal, para un webmaster, es utilizar varios, los más comunes, y realizar pruebas en ellos para comprobar que no hay ninguna diferencia en la visualización de un navegador a otro.

Los navegadores más extendidos son Chrome, Firefox, Internet Explorer, Opera y Safari.

Actualmente, las últimas versiones de los navegadores son todas relativamente respetuosas con las reglas enunciadas por el W3C para definir la Web, si bien no se producen muchas sorpresas al pasar de un navegador a otro. Por el contrario, puede que un navegador pueda leer los archivos MP3 y otro prefiera un formato diferente de audio, como por ejemplo el formato OGG. Va a ser necesario, por tanto, si deseamos poner algo de sonido en el sitio, utilizar el navegador que lee el formato MP3, aunque habrá que prever también el navegador que lee los archivos OGG y convertir nuestro archivo de sonido al formato OGG para poder comprobar si todo funciona correctamente en cada navegador.

Una de las funcionalidades que encontramos en todos los navegadores más recientes es un acceso simplificado a la zona de código.

Una página HTML, cuando se ha terminado, se compone, por lo general, de más de cien líneas. Cuando se busca un fragmento concreto dentro de esta página, incluso aunque el código esté bien escrito, puede llevar cierto tiempo hasta encontrar la línea de código que nos interesa. Actualmente, cuando se abre una página de un sitio web, se accede a una función que permite examinar cada elemento.

Si se hace clic con el botón derecho del ratón...