Dinero por Click

miércoles, 18 de marzo de 2009

Anatomía de una Página Web

La composición de una página web como ésta puede considerarse desde el punto de vista de su diseño o atendiendo a las partes y tipos de fichero que la componen. Empezaremos por este segundo enfoque. Es preciso entender bien de qué está formada una página para poder aprender con éxito como crearlas y modificarlas.

Una página web es superficialmente parecida a cualquier otro documento: un texto, unas imágenes, todo compuesto de una determinada manera. Una página web es un tipo de fichero que tiene poco de particular: se trata simplemente de un fichero de texto, con una extensión .htm o .html (de hypertext markup language - lenguaje de hipertexto.) Este fichero contiene el texto más una serie de códigos que permiten dar formato a la página en el navegador: por ejemplo, distribuir en columnas, poner letras en negrita, asignar colores, rodear una imagen con texto... El programa navegador (normalmente Internet Explorer o Navigator) interpreta los códigos del html para mostrar en pantalla la información contenida y del modo que se ha especificado aquellos códigos. Para comprobar todo esto, lo más fácil es abrir el Bloc de Notas de Windows o, si habéis hecho caso de nuestras recomendaciones, el NoteTab, y con él abrir un documento web cualquiera del disco. Si aún no domináis el tema, y no sabéis dónde pueda haber alguno, guardad esta misma página, o bien buscad con el explorador de Windows ficheros con la extensión htm (buscar: *.htm), puesto que muchos programas incluyen su ayuda en forma de hipertexto web. ¿Qué sucede con las imágenes y otros añadidos que la página web, aparentemente, "contiene"? Estos son ficheros adicionales que NO están dentro del fichero htm; están enlazados con un código que indica al navegador qué imagen debe mostrarse, dónde está, sus dimensiones, si es o no un enlace...

Elementos Web

Así que la página web, vista con un editor de texto, contiene una mezcla de texto normal y una serie de códigos. Estos códigos del lenguaje html son siempre del estilo y , por ejemplo. Siempre van entre llaves, y cada código tiene una forma inicial y otra de cierre que indican el intervalo de texto o imágenes que reciben el formato correspondiente. Por ejemplo, un párrafo se encierra entre las etiquetas o tags
y. Al principio todo esto puede parecer lioso, ¡y lo es! Pero la idea se puede captar en cinco minutos, y a los cinco minutos siguientes, tener una página lista, sólo con el bloc de notas y una chuleta o cheat sheet de los códigos al lado. Todo el que se haya atrevido a crear una página web antes de 1995 habrá aprendido a escribir en html, casi sin darse cuenta...

Pero, ¿es necesario hoy en día dominar, o al menos tener una idea de cómo está estructurado el lenguaje html? Difícil cuestión: Sí y no. Francamente, es muy conveniente tener una idea básica. Igual que cuando conducimos un coche, sin necesidad de ser unos diplomados en mecánica, al menos sabemos qué son los componentes principales del coche y para qué sirven... Así, aunque utilicemos un editor visual de páginas web, conocemos la terminología del código que generan en la sombra, y podemos hacer si es preciso algún retoque manualmente. Para tener una idea, podemos consultar uno de los muchos libros disponibles, alguna de las muchas webs que tratan el tema.

Un repaso a los principales componentes de la página web típica (ver ilustración en la parte superior de esta página):

  1. Texto. El texto editable se muestra en pantalla con alguna de las fuentes que el usuario tiene instaladas (a veces se utiliza una tecnología de fuentes incrustadas , con lo que vemos en el monitor una fuente que realmente no poseemos, pero es poco frecuente.) El texto editable puede marcarse con el ratón o el teclado y copiarse a otra aplicación, como el bloc de notas (muchos de los elementos textuales de las páginas, en especial los títulos, botones de navegación, etc. son realmente gráficos, y su texto no es editable.)
  2. Gráficos. Son ficheros enlazados desde el fichero de la página propiamente dicho. Se puede hablar de dos formatos casi exclusivamente: GIF y JPG. Hablamos en detalle de este tema en la sección de Gráficos para la Web.
  3. Formularios. Son una mezcla de texto y a veces gráficos, que permiten enviar información por parte del visitante, por ejemplo, consultando un catálogo, solicitando más información, comunicando su opinión, votando en una encuesta. Existen diferentes modelos de formulario; algunos simplemente se envían por correo electrónico; otros funcionan ejecutando un programa guión en el servidor.
  4. Javascript. Es un tipo de lenguaje de programación que se interpreta y ejecuta por parte del navegador; muy utilizado para diferentes efectos visuales, en especial los efectos de cambio de imagen al pasar el ratón por encima. Ampliamos la cuestión también en un artículo específico, con abundantes enlaces.
  5. Java. El código Java está también escrito en un lenguaje de programación independiente de plataforma (válido para cualquier tipo de ordenador) que también permite diferentes efectos, interactividad... Tratamos también el tema en el mismo artículo en que ampliamos detalles sobre Javascript.
  6. Shockwave/Flash . Interesantes imágenes fijas o animaciones interactivas de tipo vectorial, extremadamente compactas. Es preciso un plug-in para poder verlas en el navegador, aunque las versiones más recientes lo incluyen y es gratis: se puede obtener, si hace falta, de Macromedia . Su página es un buen ejemplo del uso de este tipo de componentes para páginas web, cada vez más utilizados.

Existen otros componentes que, más que formar parte de las páginas web, las acompañan y suelen guardarse al disco duro para después verlos o ejecutarlos:

  • Ficheros adjuntos: zip, rar, sit...Es frecuente que encontremos en muchos sitios programas o ficheros comprimidos en algún formato (normalmente el zip), para acelerar el tiempo de descarga por parte de los usuarios. Cada zip, rar o sit tiene en su interior uno o varios ficheros, que se extraen a la carpeta que indiquemos al programa que los abre y maneja. El programa más utilizado es Winzip. Este es shareware, pero existen otras utilidades semejantes gratis; además, windows a partir de la versión Me puede encargarse por sí mismo de este tipo de formato de compresión. Podemos encontrarlos en cualquier servidor de programas. Se trata de un añadido imprescindible para navegar.
  • Documentos PDF(Portable Document Format). Se utilizan también bastante.