a página web no dista mucho de cualquier programa que podamos tener en nuestro ordenador, es decir, una página web es un conjunto de órdenes o instrucciones que le dicen a nuestro ordenador qué es lo que tiene que hacer o mostrar, pero estas órdenes las traduce el navegador de internet.
Como hoy en día un ordenador es incapaz de entender el lenguaje humano, se tuvo que buscar un lenguaje sencillo y potente para la creación de páginas web, este lenguaje es el HTML (HiperText Mark-up Language) o lenguaje de etiquetas. En el lenguaje HTML existen una serie de convenciones que definen los aspectos generales de una página web, así como sus partes.
La idea es muy sencilla: cualquier cosa que se represente en una página web (texto, imágenes, ...) debe ir entre 2 "etiquetas" o "tags", la primera indica que empieza el elemento y la segunda indica que dicho elemento ha terminado, por ejemplo:
TEXTO Hola, este es el texto FINTEXTO
Pero como puede observarse las "etiquetas" pueden llegar a confundirse (no por el ordenador, sino por nosotros), con lo que las etiquetas se representan de una manera especial: entre 2 símbolos ( < >). Y para denotar la segunda etiqueta . De esta manera el ejemplo quedaría:
Hola
Pero el nombre de las etiquetas nos lo hemos inventado. Cada etiqueta posee un nombre, este nombre suele ser el nombre del elemento en inglés. Por ejemplo, una tabla se representa con .
Por lo tanto, las páginas web son un fichero de texto en el que se incluyen una serie de etiquetas que definen zonas, formatos y características de los elementos que contienen y que, posteriormente, el navegador se encarga de traducir a un formato gráfico, que es lo que finalmente vemos en pantalla.A continuación presentamos un fragmento de código HTML de una página web.
Como se puede observar, aparecen algunas palabras extrañas. Es la representación de las tildes, que se realiza mediante el símbolo "&" seguido de la letra que queremos acentuar (a, e, i, o, u) y seguido de "acute;". Por ejemplo, si queremos acentuar la "a" se realizaría de la siguiente manera:
á
Es importante que no olvidemos poner el punto y coma al final; con Internet Explorer no es necesario, pero con Netscape Navigator sí. Pese a que las últimas versiones de los navegadores admiten poner las tildes directamente, su representación se realiza así debido a que las primeras versiones de los navegadores no las admitían.
Otra representación extraña es que indica que no hay nada, pero que ha de representarse en pantalla. Esto es útil cuando se quiere mostrar una celda vacía dentro de una tabla, una línea en blanco, ...
También se aprecia que las etiquetas se pueden combinar. Por ejemplo, si queremos escribir un texto en negrita y cursiva, tendremos que poner las etiquetas correspondientes a una línea de texto (
, P de párrafo), la etiqueta de negrita (, B de bold, que significa negrita en inglés) y la etiqueta de cursiva (, I de italic, que significa cursiva en inglés), lo que resultaría:
Hola, bienvenidos al curso
Pero esta representación mediante etiquetas del HTML presenta algunos "huecos", a modo de ilustración, ¿cómo indico que el texto sea de un determinado tamaño?. Pues bien, las distintas propiedades que tenga el elemento también van dentro de la primera etiqueta. En el caso del texto sus propiedades son el tamaño, el tipo de letra, la alineación, el color, ...
Hola, aqui va el texto
Al igual que el resto de los elementos, la página web se representa entre 2 etiquetas, éstas son: , por tanto si el código de nuestra página web no incluye estas 2 etiquetas, la pantalla aparecerá en blanco. Pero una página web no son sólo los elementos que vemos, también existen otros elementos que no apreciamos, como pueden ser el título, el autor, su contenido, ... estas partes se verán más adelante.
Pero como hemos mencionado anteriormente, no es necesario saber HTML, ya que las herramientas de creación de páginas web pondrán el HTML por nosotros. Lo único que tendremos que hacer es diseñar nuestra página tal y como se verá en pantalla y la herramienta hará el resto.
Diseño de páginas Web: Partes de una página
Partes de una pagina
Como ya hemos visto, toda página web debe estar encerrada entre las etiquetas , que indican al navegador que el documento que se está recibiendo se tiene que visualizar como un documento de internet.
Básicamente, una página web la forman 2 partes: cabecera y cuerpo.
En la cabecera, compuesta por las etiquetas que se colocan a continuación de la etiqueta , se definen todas las características relacionadas con la página. Estas características son: su título, su autor, el contenido, palabras clave, ... principalmente utilizaremos el título y el autor.Pero la mayoría de estas características no se representan en pantalla, excepto el título, que los navegadores lo incorporan al título de la ventana, como muestran las imágenes.
El resto de las características se suelen representar mediante las etiquetas , aquí teneis unos ejemplos:
En el cuerpo de la página, encerrado por las etiquetas y situado inmediatamente después de la cabecera, se definen todos los elementos que contiene la página web, es decir, aquí insertaremos el código HTML de todos los objetos que aparecen (o no) en pantalla.
Como ejemplo, una página web tipo sería:
Este mensaje está dentro del cuerpo del documento.
Observandose en pantalla lo siguiente:
Diseño de páginas Web: Elementos básicos
Elementos basicos
En las imagenes podemos ver las barras de herramientas del FrontPage Express y del Netscape Composer, que incluyen más o menos los mismos elementos, y que se consideran los elementos más básicos e imprescindibles que incluye una página web.
Estos elementos son básicamente:
Texto y todas sus propiedades: color, tamaño, tipo de letra, cursiva, subrayado, negrita, justificación, indentación, ...
Imágenes. Sus propiedades son: el nombre del archivo donde está contenida la imagen, su altura, su anchura, su justificación, la anchura del borde y la forma en que se alineará el texto con relación a la imagen. También poseen una propiedad llamada alt: al poner el cursor encima de la imagen, saldrá un recuadro de color amarillo con el texto que hayamos escrito.La imagen puede ser estática (una simple foto) o una animación (casi siempre un archivo en formato GIF).
Tablas. Las propiedades son: el número de filas y de columnas, su justificación, la alineación del contenido de una celda, el color o imagen fondo, la anchura del borde.
Hipervínculos o enlaces o links. Es una propiedad especial que se aplica al texto o a las imágenes. Consiste básicamente en que al hacer click con el ratón sobre el objeto que posee esta propiedad, entramos automáticamente en la dirección web que le hayamos indicado previamente.Para distinguirse mejor, el navegador conmuta automáticamente la forma del puntero de una flecha a una mano .
Objetos de formularios. Estos objetos no son tan corrientes como los anteriores, son más bien propios de cualquier aplicación Windows. Estos objetos son botones, casillas de verificación, listas desplegables, cuadros de texto, ...
Diseño de páginas Web: Herramientas para su creación
Herramientas para su creacion
Ante la avalancha de e-mails recibidos, dentro de unos meses se añadirán cursos prácticos sobre las distintas herramientas que aquí se describen.
Las herramientas de creación de páginas web o editores de páginas web, fueron concebidas con el propósito de evitar al desarrollador un conocimiento exhaustivo del lenguaje HTML y una ayuda para el diseño de nuestra web.Su apariencia es prácticamente igual a la de cualquier editor de textos. Lo único que debemos hacer es escribir en pantalla, elegir el tamaño, el color, la apariencia del texto, ... dibujar tablas, insertar imágenes, guardar los cambios y ya tenemos lista nuestra página web.
Las herramientas constituyen la mejor manera de desarrollar una página web ya que nos evitan tener que codificar en HTML, y mediante un intuitivo interface gráfico iremos construyendo nuestra web sin escribir ni una sola línea de código. Además, mientras estamos desarrollando, tendremos una visualización prácticamente igual a la visualización final en un navegador de internet.
Las más destacadas son:
Dreamweaver (de Macromedia)
Sin duda es la mejor de todas, aunque a primera vista puede parecer algo complicada, ya que su apariencia se desmarca del estándar Windows. Pero es, sin lugar a dudas, la más completa: minimiza el código HTML que inserta en la página, maneja a la perfección las capas y controla todos y cada uno de los parámetros y opciones de cada elemento (incluyendo CSS).
Está pensada para profesionales y muchas de las opciones que incorpora nos vendrán grandes al principio (como comprobación automática de links, mapa de nuestra página, ...), pero eso no significa que no podamos usarla. También incorpora de serie unos efectos visuales en JavaScript bastante útiles (entre los que se incluyen las imágenes que cambian al pasar el ratón por encima y los llamados Timelines).
Éste es el aspecto que presenta su editor.
Hot Metal Pro (de SoftQuad)
Hot Metal Pro es el rey destronado. Antes de la llegada al mercado de Dreamweaver, era la herramienta preferida por los desarrolladores. Complicada en un principio por la gran cantidad de opciones que posee, pero muy familiar gracias a la apariencia estándar de cualquier aplicación Windows. Su calidad es muy alta pero incorpora menos opciones que el Dreamweaver, factor que determinó su caída del puesto de honor.
Una de las opciones que más nos llamó la atención y que ninguna otra herramienta que conozcamos posee, es que permite controlar la repetición de la imagen del fondo de la página, pudiendo repetirse por toda la pantalla, bien en horizontal, bien en vertical, o que no se repita (además de poder definir las coordenadas iniciales y finales).
En la imagen puede observarse su editor.
FrontPage 2000 (de Microsoft)
El FrontPage 2000 se incluye junto al paquete Microsoft Office 2000, con lo que seguramente ya lo tengamos instalado en nuestro ordenador. Es bastante sencillo de usar: combina 3 pestañas en su parte inferior que permiten conmutar la visión de nuestra página (desarrollo, HTML y dentro del navegador de internet).
Útil para nuestros comienzos, pero se quedará corto en muchos aspectos cuando queramos desarrollar un sitio más elegante. Hay que destacar que tiene la mala costumbre de insertar mucho "código basura" en nuestra página, además de que muchos componentes que incorpora están implementados con etiquetas (como las transiciones de página) y otros son los llamados componentes WebBot. Ambos no funcionan muy bien en otra cosa que no sea Internet Explorer 5.0.
Ésta es su apariencia.
FrontPage Express y Netscape Composer (de Microsoft y Netscape)
FrontPage Express y Netscape Composer, son dos herramientas que vienen incluidas con los respectivos navegadores de internet. Son muy útiles y recomendables para principiantes por su sencillez y por incluir las opciones justas. Se trata de 2 herramientas sin grandes pretensiones pero que representan el primer paso en el aprendizaje.
Lo ideal es empezar diseñando con alguna de las dos y, una vez aprendida la mecánica, pasar a desarrollar con otras herramientas más potentes.
Diseño de páginas web: Navegadores
navegadores
Nuestra página web, como ya hemos visto, está compuesta únicamente por código HTML que posteriormente un navegador de internet traduce a formato gráfico. Por tanto es importante que conozcamos algo más sobre los navegadores.
Hoy en día el mercado de navegadores de Internet está dominado principalmente por 2 aplicaciones :
Microsoft Internet Explorer (IE)
Netscape Navigator (NS)
Estos 2 aplicativos abarcan el 95% del mercado, pero es inevitable mencionar el 5% restante. Este porcentaje lo representan navegadores como Mosaic u Opera entre otros (sin olvidarnos del navegador exclusivo de Austin Powers).
Generalmente, los usuarios que utilizan este tipo de navegadores tienen también instalado el Explorer o el Navigator con lo que la cuota de mercado de estos últimos es casi del 100%. Y esto es algo importante al desarrollar cualquier tipo de aplicación orientada a Internet, ya que cada navegador es un mundo distinto, ofreciendo/soportando un determinado conjunto de elementos, incluso el mismo elemento puede representarse de forma distinta (por ejemplo el "colspan" de una tabla en IE o NS).
Dicho esto, centrémonos en los dos más conocidos.
Microsof InternetExplorer:
Una de las causas de su gran expansión (sin entrar en la polémica de si es legal o no) es que se incluye de serie con el sistema operativo de la casa, y parece que ha dado resultado porque es el navegador más usado hoy en día.
Está disponible para todas las versiones Windows (3.1, 95, 98, NT y 2000), Macintosh y algunos UNIX (Sun Solaris y HP-UX).
Sus ventajas (respecto a su más directo competidor) son:
Es más flexible y amigable a la hora de modificar o escribir el código (Script o HTML)
Soporta una mayor cantidad de componentes, por ejemplo las hojas de estilo (CSS) que NS ignora o incluso borra de pantalla (esto es hasta la fecha, no obstante, con el lanzamiento del Navigator 6.0 esta situación parece que va a cambiar)
Hace un uso más inteligente de los archivos temporales de internet a la hora de volver a mostrar una imagen o ejecutar un subprograma Java
Los applets funcionan más rápido, ...
Actualmente, está disponible la versión 5.5
TRUCO: Si vuestro explorer es uno de esos "proporcionado por XXXXX" o algo por el estilo, y quereis quitar el molesto titulito, lo único que teneis que hacer es modificar esa línea en el registro de Windows (utilizando el programa "C:\WINDOWS\RegEdit.exe"). Para ello, buscar la cadena "proporcionado" (pulsar la tecla F3 dentro del programa RegEdit) y una vez localizada cambiarla por lo que más o guste.También podeis personalizar la animación que aparece justo debajo de los botones de la ventana (minimizar, maximizar, cerrar) cambiando el archivo de imagen que contiene la animación (que se especifica dentro del registro en la línea anterior a la del título del programa).
Netscape Navigator:
Este navegador tiene versiones para casi todas las plataformas informáticas existentes (Windows, Unix, OS2-Warp, Linux) y en el mundo de UNIX es utilizado por casi la totalidad de los usuarios, razón de peso para no despreciarlo, ya que no todo es Windows.
Entre sus ventajas destacan:
No es sólo un navegador de internet, sino que viene integrado con un programa de correo (Netscape Messenger) y un programa de creación de páginas web (Netscape Composer)
La descarga de archivos es mucho más rápida, lo que permite que las páginas web se visualicen más rápido y que los archivos que nos bajemos tarden menos tiempo en guardarse
Posee más efectos para el texto (como el parpadeo de las letras)
Está pensado para que sea utilizado por varios usuarios en el mismo ordenador, lo que permite que cada usuario disponga de sus propios "marcadores" (en IE se llaman "favoritos"), el programa de correo sólo recoge los mensajes del usuario correspondiente, tiene cachés separadas para cada usuario, ...
Es un programa que no es de Microsoft
Diseño de páginas Web: Diseño web, ajustes y colores
Diseño web, ajustes y colores
Una vez elegido el tema, los contenidos y los detalles de nuestra página web llega la hora de la verdad: el diseño de nuestra web.
Algo muy, muy recomendable es que todas nuestras páginas (si que es nuestra web está compuesta de varias páginas) tengan una apariencia más o menos similar, es decir, nada de tener cada página de un color distinto, los contenidos colocados en un lugar diferente cada vez,...Y también es mejor tener muchas páginas pequeñas con un buen índice, que una grande cuyo tiempo de carga es muy, muy superior y que además perdemos tiempo en cargar cosas que tal vez no le interesen a nuestros visitantes.
Ni todo es texto, ni todo son imágenes. Conviene mezclar un poco, por ejemplo yo suelo poner las imágenes entre varias líneas de texto o combinadas con el texto en el margen izquierdo de pantalla.
Y ya que los navegadores y los sistemas operativos ponen a nuestro servicio gráficos con millones de colores y alta resolución, aprovechemoslo. Es bueno que las imágenes tengan el mayor colorido y resolución posible (pero ojo con el tamaño del archivo), combinar los colores del texto dependiendo si son encabezamientos, títulos, contenidos, ejemplos, ... poner las letras en distintos tamaños, distinto tipo de letra, negrita, ... ya sabeis, imaginación al poder.
A la hora de diseñar os topareis con unos problemillas bastante habituales y de fácil solución:
Ajustar el contenido en pantalla
Mostrar varias imágenes en la misma línea
...
La solución es la utilización de tablas. Dichas tablas las dividiremos a nuestro gusto, y en cada celda colocaremos la imágen, texto o nada si es preciso, de manera que todo cuadre a la perfección en pantalla.
www
.
eitig
.
com
Pero no debemos olvidar que existen varias resoluciones de pantalla, la más común es 800 x 600, pero por si acaso definiremos los tamaños de las tablas, filas y columnas en porcentaje y no en pixeles.
Diseño de páginas web: Imágenes y animaciones
Imágenes y animaciones
Como ya hemos visto, uno de los elementos que podemos incluir en nuestra página web son archivos de imágen. Los navegadores admiten practicamente cualquier formato de archivo de imágenes, pero en la práctica los diseñadores utilizan sólo dos: JPEG y GIF.
Aquí vemos unos ejemplos:
Archivo JPEGAnimación GIF
¿Por qué?, por el tamaño de los archivos. Ambos formatos comprimen la imágen para así reducir su tamaño, y de este modo, conseguir que el tiempo de carga de la página web sea inferior.
Las imágenes en formato JPEG tienen una profundidad de color de 16 millones de colores (RGB de 24 bits) pero reduce el tamaño de la imágen sacrificando calidad (en luces, reflejos y transiciones de colores principalmente). Resumiendo, las imágenes JPEG se verán peor a medida que aumentemos el porcentaje de compresión.
Por el contrario, el formato GIF no pierde calidad. También es capaz de almacenar máscaras (muy útil para definir determinadas zonas de la imágen de color transparente) y es capaz de reproducir animaciones. Pero sólo tiene una profundidad de 256 colores (paleta de 8 bits) y los archivos tamaño mediano o grande ocuparán más que en formato JPEG.
Existen herramientas que permiten reducir el tamaño de las imágenes sin sacrificar o sacrificando una mínima parte de la calidad, entre ellas están xat.com Image Optimizer, Advanced GIF Optimizer, JPEG Optimizer, ... Estos programas permiten visualizar al mismo tiempo la imagen originaria y la optimizada, mostrando el tamaño de cada una y el porcentaje de compresión obtenido.
Para insertar imágenes en nuestra página debemos utilizar las etiqueta , el único parámetro que es obligatorio es src, que indica el archivo de imágen a insertar.
Dentro de una imágen también podemos definir mapas o hot spot. Esto no es más que una determinada zona poligonal que posee un hipervínculo. Aquí teneis un ejemplo (la imágen posee 2 mapas):
No creo que existan muchas páginas web modernas sin imágenes. Las imágenes (bien elegidas y bien colocadas) proporcionan un colorido visual impresionante, además, "una imágen vale más que mil palabras". Pero no olvidemos que en internet "una imagen tarda más en cargar que mil palabras", por lo que habrá que llegar al punto medio en lo referente a imágenes y tiempo de carga.
El fondo de la página
En el fondo de nuestra página podemos colocar una imágen o animación. Si la imágen es más pequeña que el fondo, la imágen se repetirá a modo de mosaico hasta llenar todo fondo (aunque este efecto se puede desactivar).
Dicho efecto puede observarse en cualquiera de las páginas de esta sección. Como imagen de fondo se utilizó la imagen siguiente:
Para insertar una imágen de fondo debemos modificar la etiqueta y poner en su lugar:
Favoritos
Al añadir una página web a "favoritos", el navegador automáticamente asigna un icono por defecto dicha página, esto se puede apreciar en la figura siguiente.
Para que el navegador asigne a nuestra página un icono diferente, debemos tener un archivo llamado "favicon.ico", que contiene el icono a mostrar. O también se puede añadir la siguiente línea dentro de las etiquetas :
Una vez añadida la página a "favoritos", también se cambiará el icono por defecto que aparece en la barra de direcciones por nuestro icono.
Diseño de páginas web: Añadir música de fondo
Otro elemento multimedia que podemos incluir en nuestra página es el sonido. Pero no es muy aconsejable añadir música de fondo, ya que además de la tarjeta de sonido, se necesita el uso de software externo al navegador para poder escucharla. Además, la inclusión de música ralentiza en exceso la carga de nuestra página, y no todos los navegadores soportan su uso.
La música que se reproduce, son archivos en formato MIDI (en realidad puede reproducirse cualquier archivo de sonido, pero se opta por este tipo debido a su reducido tamaño). Pero este tipo de archivos sólo contienen música instrumental, y la cantidad y calidad de los instrumentos que escuchemos depende en exclusiva de nuestra tarjeta de sonido.
Internet Explorer reproduce la música sin mayores dificultades, pero su competidor, el Netscape, utiliza Java para ello. Esta técnica es bastante lenta y no funciona muy bien (otra razón más para no incluir sonido en nuestra página).
Para insertar música en nuestra página, se debe utilizar la siguiente sintaxis HTML (justo después de la etiqueta ):
En la propiedad SRC pondremos el nombre del archivo MIDI (*.mid) a reproducir, y en LOOP el número de veces a reproducirlo (1, 2, 3, ...) para reproducción contínua deberemos poner "infinite".
Diseño de páginas web: Links
Principalmente existen 3 tipos de links distintos:
A una página web de nuestro dominio
A una parte concreta de nuestra página
A otra página web de otro dominio
Links a una página web de nuestro mismo dominio
Se deben utilizar las etiquetas:
Texto o imágen que posee el hipervículo
En donde el atributo href apunta al destino del hipervínculo; pero a la hora de poner el destino debemos tener en cuenta las rutas y los directorios.
Todos los links a cualquier archivo que se encuentre en nuestro mismo dominio NUNCA incluirán la ruta del directorio inicial en donde está dicho archivo. Por ejemplo, si todos nuestros archivos se encuentran en el mismo directorio inicial llamado "C:\PAG_WEB\", los links serán simplemente el nombre del archivo, por ejemplo "index.htm", "bienvenida.html", "foto1.jpg", ...
Si por el contrario tenemos en el directorio inicial "C:\PAG_WEB\" algunos archivos y dentro de un subdirectorio del inicial llamado "C:\PAG_WEB\FOTOS\" otros archivos, cuando queramos referenciar a un archivo dentro del directorio "C:\PAG_WEB\FOTOS\", simplemente tenemos que poner "\FOTOS\".Si dentro del subdirectorio "C:\PAG_WEB\FOTOS\" tenemos otro subdirectorio llamado "C:\PAG_WEB\FOTOS\ANIMACIONES\" para referenciarlo sería "\FOTOS\ANIMACIONES\", la idea es muy sencilla.
Esto se debe a que si nuestra página se llama "index.htm", en local se llama "C:\PAG_WEB\index.htm", pero cuando se coloque en nuestro dominio de internet se llamará "http://www.eitig.com/index.htm", con lo que omitiendo las rutas de los directorios iniciales, se pondrá por defecto la ruta inicial del lugar donde se encuentre.
Con esto conseguiremos que nuestra página se pueda visitar de igual manera en internet, como en local para realizar las pruebas.
Lo mejor es crearse un directorio donde estén todas nuestras páginas web, y dentro de este directorio crear subdirectorios (\fotos, \archivos, \estilos, \scripts, \sonidos, ...) con lo que conseguiremos una buena organización.
-Ir a la parte superior de la página>
Links a una parte concreta de nuestra página
Para poder implementar los links a una parte concreta de una página web se utiliza un elemento llamado anchor o link interno. No es más que una marca que realizamos en nuestra página web y que desde un link normal y corriente invocamos.
La sintaxis HTML es muy parecida a la de un link normal:
Aquí puede ir (o no) texto o una imágen
Y para invocarla desde un link ha de utilizarse:
#nombre de la marca
Aquí teneis un ejemplo: en la parte superior de la página (antes de "Curso de Diseño y ...") hay una marca llamada "Superior", y desde el link que se encuentra justo debajo se la invoca utilizando .
-Ir a la parte superior de la página>
Links a páginas de otros dominios
Para implementar los links a otras página web que no pertenezcan a nuestro dominio se utiliza la misma sintaxis HTML de un link a una página de nuestro dominio. Pero se diferencian en que ahora el destino incluye la ruta completa, que no olvidemos, siempre empieza por "http://".
Texto o imágen que posee el hipervículo
Diseño de páginas web: E-mail como links
Supongo que en muchas ocasiones habreis visto páginas web en las que se puede mandar e-mail´s a sus autores o al webmaster para colaborar, dejar las críticas, o cualquier cosa. Si no lo habeis visto nunca, fijaos en la parte inferior de esta página.
Que nuestros visitantes puedan comunicarse con nosotros puede ser bastante útil (cada cuál decida para qué).
La forma más sencilla de ponernos en contacto con ellos es mediante e-mail. Una posible opción sería poner nuestra dirección de correo al final de la página y que la gente que quisiera comunicarse con nosotros la escribiera en su programa de correo, pero esto no es demasiado cómodo y puede que alguien escriba mal nuestra dirección y que nunca nos llegue su comentario.
Para ello, y como segunda opción, está el comando HTML (donde pone destinatario por supuesto tendremos que poner una dirección de correo válida). Esta orden abre el programa de correo predeterminado (Outlook, Messenger o que el sea) por la pantalla que sirve para escribir un nuevo mensaje. Dicho mensaje ya tiene escrita la dirección del destinatario (que es la que nosotros pusimos despues de "mailto:").
Como se puede observar, el comando HTML no es más que un link normal y corriente en el que la dirección de destino no es más que una dirección de correo electrónico. Por tanto, este comando se usa de igual manera que un link normal y corriente (lo podemos poner en una foto, texto, ...)
Diseño de páginas web: Distribución de archivos
Básicamente hay 2 formas de distribuir archivos a nuestros visitantes: mediante HTTP o mediante FTP.
El protocolo FTP es algo más complicado para nuestros propósitos, por lo que lo descartaremos.
Mediante HTTP es bastante sencillo. La mecánica es la misma que con cualquier link a una página web normal y corriente. En una parte del texto o en una imágen añadiremos un link a nuestro archivo, y con esto conseguiremos que cuando se pulse sobre el enlace, se guarde el archivo en la máquina local de nuestro visitante.
En las imágenes observamos lo que ocurre al distribuir un archivo llamado "dblist.zip".
Esta es la ventana que muestra el Internet Explorer:
Y esta la ventana que muestra el Netscape Navigator:
Una vez abierta la ventana, debemos elegir la opción "Guardar en disco", hecho esto nos preguntará el directorio en donde guardarlo y listo.
NOTA: comprobar antes que todos los archivos que van a distribuirse NO TIENEN VIRUS, porque podemos provocar un repentino llamamiento a nuestras familias por parte de nuestros visitantes e incluso tener problemas legales.
Diseño de páginas web: Comprobaciones finales
Que nuestra página esté terminada no significa que esté lista para colocarse en internet. Antes de dar ese paso debemos hacer las últimas comprobaciones para tener la certeza de que todo funcionará correctamente.
Archivos:
Debemos asegurarnos que todos los archivos a los que referenciamos desde nuestra página existen (otras páginas, imágenes, archivos con los Script, hojas de estilo, ...). Con esto evitaremos situaciones tan corrientes como estas:
No se encuentra la imagen:
Explorer
Navigator
No existe el archivo con los Scripts:
Enlaces o links locales:
Como ya se ha dicho, lo mejor es tener las páginas y todos los archivos que se utilicen dentro del mismo directorio, o en subdirectorios del mismo.
Tenemos que comprobar que hemos eliminado todas las rutas de los directorios iniciales, y que las referencias a los subdirectorios empiezan por "\" (e.j. "\fotos\logo.jpg").
Links a páginas web:
Este tipo de links SIEMPRE deben empezar por "http://", lo único que debemos hacer es comprobar si hemos escrito bien la dirección de la página. Con esto crearemos una página web practicamente sin fallos, con lo que nuestros visitantes (lo más seguro) volverán a visitarnos.
Diseño de páginas web: FTP
Nuestra página ya está terminada y hemos realizado las últimas comprobaciones, lo único que nos falta es colocar nuestra página en internet. Para ello utilizaremos el protocolo FTP (File Transfer Protocol). El FTP es un protocolo que nos permite transferir archivos entre ordenadores, en este caso, entre nuestro PC y el servidor de internet.
Lo primero es buscar un servidor de internet que nos permita colocar nuestras páginas (recomendable de manera gratuita aunque no es obligatorio). Esto hoy en día eso ya no es un problema, porque cualquier portal de internet nos ofrece más o menos 5 MB de espacio gratis para nuestras páginas web (entre ellos terra, yahoo, xoom, telepolis, network solutions, inlanders, todo-gratis,...). Las diferencias entre unos y otros son el espacio que nos ofrecen, la velocidad de descarga, la propaganda que incorporan a nuestras páginas, ...
Otra opción es comprar nuestro propio dominio. Esto no siempre es posible, ya que la mayoría de los dominios ".com" suelen estar en posesión de algún particular o empresa, aunque si realmente estamos interesados, podemos realizar una oferta a su propietario.También debemos tener en cuenta la legislación del país al que pertenece dicho dominio. Por ejemplo, en españa (".es") sólo se puede adquirir un nombre de dominio si dicho nombre se corresponde con el nombre de una empresa, ni siquiera se pueden adquirir dominios que coincidan con el nombre del producto que queremos publicitar.Para más información o para consultar disponibilidad de dominios puede consultar http://www.register.com/
Una vez elegido servidor y concedido el espacio, se nos dará el nombre de usuario (User ID), el password, el nombre del servidor (Host Name), y lo más importante, nuestra dirección de internet.
Lo siguiente que necesitamos es un programa FTP (FTP client) para realizar la transferencia de archivos (aunque la transferencia de archivos también la puedemos hacer con nuestros navegadores de internet, es algo más complicado pero es posible, por lo que, recomiendo la utilización de un programa de FTP).Los programas más conocidos son CuteFTP y WS_FTP LE, que se pueden descargar de manera gratuita en http://www.downloads.com/. Sus aspectos som muy similares al explorador de archivos de Windows 9x, como puede observarse en las imágenes.
CuteFTP
WS_FTP LE
Cute FTP de la compañía GlobalScape, es mucho más gráfico y amigable, además de poseer asistentes y la típica ventana inicial con los trucos del día. Pero WS_FTP LE de IPSwitch, consume menos recursos máquina. Cada cuál que elija el que más le guste, porque al final, los dos hacen lo mismo.
Dentro de nuestro programa de FTP pondremos los datos y este se conectará con el servidor (si los datos son correctos). Una vez conectados, haremos lo que queramos con nuestros archivos y con nuestro espacio en el servidor (crear directorios, copiar archivos, borrar archivos, ...), la mecánica es la misma que con nuestro disco duro.
Llegado a este punto se nos plantea una pregunta: ¿cuál es la primera página que se va a ver un usuario al teclear nuestra dirección?.
Cada servidor suele variar algo su política, pero lo normal es que la primera página que se va a abrir es la página llamada "index.htm", por lo que si nuestra página inicial se llama "principal.htm" o algo por el estilo, deberemos cambiarla el nombre (y corregir todos los links que la apunten).Para comprobar si hemos hecho todo correctamente, teclearemos la dirección que nos dijeron y daremos una vuelta a ver que pasa.
NOTA: la dirección que nos suelen proporcionar hace publicidad al portal, además de ser bastante larga y complicada (usuarios.terra.es/mi_pagina, members.xoom.com/mi_pagina, ...). Y se plantea otro problema: el nombre que queremos dar a nuestra página no siempre está libre (hay que tener en cuenta que no somos los únicos con página en internet).
Para evitar esto, existe el servicio de redireccionamiento automático como por ejemplo: http://www.pagina.de/ que nos permite dar el nombre que queramos, siempre que no esté elegido por otro usuario (www.pagina.de/mi_pagina) y desde ahí llevará a nuestros visitantes a la dirección que nosostros digamos (usuarios.terra.es/mi_pagina), algo que os recomiendo encarecidamente y que vuestros visitantes agradecerán.
Este servicio no sólo lo realiza www.pagina.de, existen más como: www.easy.to/remember, http://www.gratix.com/, ...
Diseño de páginas web: Frames
Los Frames nos permiten presentar en una página múltiples documentos en diferentes vistas. Estas vistas nos permitirán, por ejemplo, fijar en una de ellas el índice, el logotipo, ... mientras que en la otra mostramos el contenido seleccionado.
En realidad, una página web con frames, no es más que un pequeño fragmento en HTML que carga una página web en cada una de las vistas que hayamos definido. Esto se puede ver en el ejemplo:
La página principal de EITIG posee dos marcos:
Uno superior donde van colocados los contenidos y el buscador.
Y uno inferior donde se muestran los temas pertenecientes al contenido seleccionado (este marco posee barra de scroll).
Para conseguir esta visualización necesitamos 3 páginas HTML:
Una para definir los marcos que vamos a tener en pantalla. Este sería más o menos el código HTML que incluiría dicha página:
Y las 2 páginas que se van a mostrar en el marco superior e inferior (Contenidos.htm e Indice.htm).
Lo que hacemos es dividir la pantalla como si se tratase de una tabla, y a esa tabla la dividimos en filas y columnas. A cada celda le decimos (mediante la propiedad src) que página tiene que mostrar. Estas suelen ser las combinaciones más usuales.
Pero no hay límite, podemos crear las combinaciones que queramos, pero no debemos olvidar que en cada vista se carga una página y excesivas vistas pueden ralentizar sobremanera el sistema.
Diseño de páginas web: Capas (Draw Layer)
Una capa no es más que un contenedor HTML, es decir, un elemento que agrupa a otros elementos. Esta agrupación nos permite tratar a todos los elementos como si fueran un todo, y gracias a eso, podemos crear unos efectos visuales muy interesantes utilizando poco código: como ocultar/mostrar una capa (que ocultaría a todos los elementos contenidos en esa capa), cambiar su posición en pantalla, su color o imagen de fondo, ...
Si quereis contemplar las posibilidades que ofrecen las capas con vuestros propios ojos, os recomiendo visitar:
Otra sección de EITIG, lo más web
La página principal de esta sección
http://www.ciudadfutura.com/, este portal tarda un poco en cargar, pero posee unos menus con transiciones a la hora de abrirse y cerrarse francamente buenos
Las capas se posicionan en la pantalla de manera absoluta, es decir mediante coordenadas X, Y, Z, largo y ancho. La tercera dimensión (la coordena Z o z-index), define la superposición de las capas. Una capa de orden superior ocultará a otra de orden inferior.
El posicionamiento absoluto tiene un inconveniente: la resolución de la pantalla. Una capa colocada en unas determinadas coordenadas, si la resolución con la que se visualiza la página es más pequeña que la resolución con la que la diseñamos (por ejemplo 640 x 480) puede quedarse fuera del ángulo de visión. Para evitarlo, los navegadores automáticamente activan el scroll de pantalla.
Como se ha dicho, una capa es un contenedor, pero no hay limitaciones respecto al contenido. Una capa puede contener cualquier cosa, por ejemplo texto, imágenes, plug-in´s, applets e incluso otra capa.
Las capas se definen normalmente mediante las etiquetas DIV o SPAN (pero existen otras formas como las capas CSS y las capas de Netscape utilizando LAYER e ILAYER).Internet Explorer 4.0 y Netscape 4.0 soportan a la perfección las capas creadas con DIV y SPAN, pero las capas que utilizan las etiquetas LAYER e ILAYER sólo las soportan las versiones superiores.
Aquí teneis un ejemplo de utilización de capas: tenemos 2 capas (Layer1 y Layer2) ambas situadas en las mismas coordenadas pero con distinto z-index, la segunda capa no es visible, pero al pasar el ratón sobre el texto "Mostrar" se muestra, ocultando por su situación en el eje Z a la primera capa. Al alejarse el ratón del texto "Mostrar" se vuelve a ocultar la segunda capa.
Diseño de páginas Web: Java, JavaScript y VBScript
Java,javascript y vbscript
Una vez que hayamos creado nuestra página web, nos daremos cuenta, que a pesar del colorido, las animaciones y los gráficos (que dan más o menos vistosidad), nuestra página es totalmente estática.
Pues bien, alguien antes que nosotros se dio cuenta de este problema, que se solucionó de una forma muy simple: programando.
Existen mayoritariamente 3 formas o 3 lenguajes para crear algo de interactividad en nuestra página: applets (en Java), script en JavaScript o en VBScript. A modo de nota mencionaré también un programa llamado Flash de la compañía Macromedia que empieza a convertirse en una seria alternativa a los lenguajes Script.
Java:
Java es un lenguaje de programación orientado a objetos de propósito general creado por la compañía Sun Microsystems.
Dentro de este lenguaje disponemos de una clase especial llamada "applet" que implementando sus métodos conseguimos realizar un subprograma Java que nuestro navegador entiende, y lo más importante, ejecuta.
Para poder insertar el applet dentro de nuestra página ha de estar comprendido entre 2 etiquetas: , y como es típico del HTML acompañado de parámetros tales como el nombre de la clase, el espacio de pantalla para representarlo, ...
Personalmente no recomiendo la insercción de applets dentro de una página web porque mientras se está cargando/interpretando el applet, el navegador no responde, y por tanto, las demás páginas web que estén abiertas en ese momento se quedarán temporalmente colgadas. Además, el gran inconveniente de Java es su lentitud, que se compensa por su portabilidad.Es aconsejable utilizar JavaScript (que es más rápido) y para tareas que no se puedan implementar en JavaScript utilizar Java.
Si alguien quiere ver los applets en acción, que se pase por http://www.spygots.com/. Y para aprender más sobre Java, POO, ... os remito a la sección de Programación Orientada a Objetos que posee eitig.
JavaScript:
No hay que confundir JavaScript con Java. JavaScript fue desarrollado por Netscape para añadir interactividad a las páginas web con su navegador de internet. Pese a que JavaScript posee una sintaxis muy similar a Java, NO ES JAVA.
Como fue desarrollado por Netscape, su navegador (Netscape Navigator) era el único que lo reconocía. Pero hoy en día está integrado en casi la totalidad de navegadores de internet del mercado (la implementación de Microsoft en el IE se llama JScript y difiere ligeramente de JavaScript).
Hay que decir que es el lenguaje más utilizado en internet para añadir interactividad a las páginas web. Puede que al navegar por alguna página web lo hayamos visto, pero no nos hayamos dado cuenta. Se utiliza sobre todo para cambiar las imágenes al pasar el ratón encima, moverlas, validar los datos, escribir mensajes en la barra de estado, implementar un reloj, ...
JavaScript al ser un lenguaje de Script, el código se embebe dentro del código HTML de las páginas web. No hay que compilarlo ni linkarlo, sino que el mismo navegador de internet se encarga de interpretarlo. No necesitamos ninguna herramienta especial para programar en JavaScript, simplemente con el mismo block de notas de Windows podemos escribir código Script, aunque es recomendable utilizar alguna herramienta que nos ayude sobre todo a la hora de depurar errores (como puede ser la que se ofrece con Microsoft FrontPage).
Aquí teneis una de función muy útil, lista para usar:
Adjunto un MANUAL para quien quiera aprender este lenguaje.
VBScript:
El lenguaje VBScript es el intento por parte de Microsoft de adentrarse en el negocio de los lenguajes de Script. Su propósito es el mismo que el de JavaScript, pero su sintaxis por fuerza, es distinta. Se tomó la sintaxis del programa de la casa: el Visual Basic.
Al ser de Microsoft, pasó un poco como al principio con JavaScript, sólo lo reconocía el Internet Explorer, pero ahora creo que Netscape 6.0 también lo soporta, aunque existe un plug in que se puede conseguir en http://www.netscape.com/ para que el Navigator soporte su uso.
Como nota hay que decir que fue el lenguaje utilizado para programar el famoso virus "I love you".
Diseño de páginas Web: Insertar código Script
Como JavaScript se embebe dentro de código HTML, debemos indicar al navegador que el texto que está recibiendo es una rutina en Script que debe interpretarse y no texto a mostrar en pantalla.Esto se realiza mediante las etiquetas
, pero además debemos indicar en qué lenguaje está escrito para facilitar la labor de interpretación (aunque por defecto se toma JavaScript), esto se hace:
Para evitar que los navegadores que no soporten JavaScript o tengan desactivada esa opción muestren el código en pantalla como si se tratase de texto normal y corriente, se utilizan las etiquetas HTML que indican que es un comentario (). Con esto conseguiremos que si el código se trata como HTML no salga en pantalla.
Con lo que a la hora de codificar un Script, tendríamos la siguiente plantilla:
La verdad es que no existe un convenio claro sobre en qué parte de la página web hay que colocar el Script. Lo que se suele hacer en colocarlo entre el final de la cabecera y el cuerpo, o dentro de la cabecera.Otra práctica bastante extendida es colocar nuestras funciones en un archivo de texto (pero con extensión .js) y desde la página HTML llamarlo. Por ejemplo, si nuestro archivo se llama rutinas.js, el ejemplo quedaría de la siguiente manera:
Y dentro del archivo rutinas.js:
Con esta práctica conseguiremos reutilizar de una manera más sencilla rutinas tan comunes como la de escribir mensajes en la barra de estado del navegador, o las funciones de mostrar/ocultar capas.
Diseño de páginas web: Cookies
Uno de los problemas que presenta el protocolo HTTP (HyperText Transfer Protocol) es que no posee estado o memoria, y por tanto, no se pueden guardar ningún tipo de dato en la máquina cliente, ni tampoco recolectar información sobre las operaciones que realizó el mismo (la problemática es similar a la de los autómatas de Moore y Mealy).
Las Cookies o "galletitas" se crearon con el propósito de solucionar este problema. Simplemente son archivos de texto normales y corrientes que se guardan en la máquina cliente y que almacenan fragmentos de información. Nuestro navegador (en el caso de que soporte el uso de Cookies), manda al servidor esta información con cada petición que le solicitemos, y el servidor con esta información realiza las acciones correspondientes.
Uno de los usos más extendidos es el de personalizar portales, como por ejemplo Telepolis. Pero no sólo sirven para personalizar, también sirven para recoger el número de veces que hemos visitado la página, la hora de nuestro ordenador, ... y también se utilizan en páginas de comercio electrónico, almacenando la lista de la compra, la lista de deseos, ...
Veamos el ejemplo de Telepolis. Este portal, en el caso que no exista una Cookie en el cliente, manda una página inicial para que nos registremos. Cuando nos registramos, se guarda una Cookie con información sobre nuestra ciudad, nuestro signo del zodiaco, empresas favoritas, ...La siguiente vez que visitemos el portal nos sorprenderemos al darnos cuenta que pone: "Bienvenido XXXXX", además de la información meteorológica de nuestra ciudad, nuestro horóscopo y la cotización de nuestras empresas en bolsa.
Las Cookies poseen varias propiedades: valor, fecha de expiración, dominio, path y secure. Aunque las más utilizadas son valor y fecha de expiración.
Según la fecha de caducidad, las Cookies se clasifican en 2 tipos: Temporales y Semi-permanentes.
Temporales son aquellas Cookies que no poseen fecha de expiración, esta Cookie no se almacenará en disco.
Semi-permanentes son aquellas que sí tienen especificada la fecha de expiración, una vez superada la fecha, la Cookie desaparecerá.
Dependiendo del modo en que se defina esta fecha, la Cookie expirará al terminar la sesión, pasados X días o en una fecha concreta. Lo normal es que las Cookies utilizadas para personalizar páginas web sean semi-permanentes y que nunca caduquen.
Las Cookies se guardan junto con un número único de sesión (esto lo hace automáticamente el sistema) para que no se sobreescriban al entrar en una página distinta y también, para que pueda ser reenviada a su página de procedencia la siguiente vez que entremos en ella.
El problema que presenta el uso de Cookies es que no todos los navegadores las soportan (depende del navegador y de la versión), además, los navegadores permiten configurar el equipo para que no utilice Cookies.
NOTA: Si se copia al portapapeles el código directamente del explorador, puede que de problemas la tabulación, ya que se sustituye por espacios en blanco. En ese caso, borrar todos los blancos y volved a poner la tabulación.
// Esta función guarda un valor en una Cookie y pone la fecha de expiración// Para crear Cookies temporales dejar caducidad sin valor// El parámetro caducidad se expresa en milisegundos. Para expresarlo en días: 1000 * 60 * 60 * 24 * nº de días. function guardarCookie ( nombre, valor, caducidad) { if ( caducidad ) { caducidadAux = new Date(); caducidadAux.setTime (caducidadAux.getTime() + caducidad); document.cookie = nombre + "=" + valor + "; expires=" + caducidadAux.toGMTString() + ";"; } else { document.cookie = nombre + "=" + valor + ";"; } }
// Elimina la Cookie asignándola una fecha atrasadafunction eliminarCookie ( nombre ) { document.cookie = nombre + "=NULL; expires=Friday, 2-May-80 00:00:00 GMT";}
// Devuelve el valor de "nombre" almacenado en la Cookie// Si "nombre" no existe, devuelve la cadena vacíafunction recuperarCookie ( nombre ) { valor = ""; // compruebo que exista la Cookie if ( document.cookie ) { // compruebo que "nombre" tiene asignado algún valor pos = document.cookie.indexOf( nombre ); if ( pos != -1 ) { // recupero el valor de "nombre" y lo guardo en "valor" posIni = document.cookie.indexOf( "=", pos ) + 1; posFin = document.cookie.indexOf( ";", pos ) - 1; // si "nombre" es la ultima variable, posFin es el final de la Cookie if (posFin == -2) posFin = document.cookie.length; valor = document.cookie.substring( posIni, posFin ); } } return valor;}
Diseño de páginas Web: Problemas con los navegadores
Problemas con los navegadores
El principal problema que nos encontraremos a la hora de desarrollar rutinas en JavaScript, es que no existe una única implementación de este lenguaje, sino que existen diferentes implementaciones y diferentes versiones de cada implementación.
Las implementaciones son:
JScript, que es el lenguaje de Script que desarrolló Microsoft para su Internet Explorer, en la actualidad se encuentra por la versión 5.5.
El JavaScript originario, desarrollado por Netscape, que se encuentra por la versión 1.5.
Navegador Versión
Navigator 2.0 JavaScript 1.0
Navigator 3.0 JavaScript 1.1
Navigator 4.0 JavaScript 1.2
Navigator 4.6 JavaScript 1.3
Navigator 6.0 JavaScript 1.5
Explorer 3.0 JScript 1
Explorer 4.0 JScript 3
Explorer 5.0 JScript 5
Explorer 5.5 JScript 5.5
Cada versión mantiene perfectamente la compatibilidad con las versiones anteriores (al menos eso aseguran las respectivas compañías), es decir, el código que funcionaba con una versión anterior del lenguaje, funcionará sin problemas en una versión más reciente.
Algunas de las características de JScript son:
Es totalmente compatible con el estándar ECMAScript (estándar de unificación en torno al los lenguajes de Script)
No es Case Sensitive
Permite el uso de la tecnología ActiveX
Ofrece más información sobre el navegador que está visualizando la página web
Resumiendo, es practicamente imposible generar código 100% compatible con ambas implementaciones. Lo que se suele hacer es introducir dentro del código Script un "IF" que chequea el navegador que se está utilizando, y utilizar en función del mismo, una sintaxis u otra.
Como ejemplo esta función para ocultar capas de un documento:
// Esta función oculta la capa introducida como parámetrofunction ocultar(capa){ if (ns && document.layers != null) { capa.visibility='hide' } else if (document.all != null) { capa.style.visibility='hidden' }}
Conclusión
El diseño Web es una actividad que consiste en la planificación, diseño e implementación de sitios Web y páginas Web. No es simplemente una aplicación del diseño convencional sobre Internet ya que requiere tener en cuenta cuestiones tales como navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen y vídeo.
El diseño es la comunicación textual (contenidos) existente en Internet una faceta visual, sino que obliga a pensar una mejor estructuración de los mismos en este soporte. La unión de un buen diseño con una jerarquía bien elaborada de contenidos aumenta la eficiencia de la Web como canal de comunicación e intercambio de datos, que brinda posibilidades como el contacto directo entre el productor y el consumidor de contenidos, característica destacable del medio Internet.
El diseño Web ha visto amplia aplicación en los sectores comerciales de Internet especialmente en la World Wide Web. Asimismo, a menudo la Web se utiliza como medio de expresión plástica en sí. Artistas y creadores hacen de las páginas en Internet un medio más para ofrecer sus producciones y utilizarlas como un canal más de difusión de su obra.
Bibliografía
http://www.wikipedia.com/
Microsoft encarta2006
Como hoy en día un ordenador es incapaz de entender el lenguaje humano, se tuvo que buscar un lenguaje sencillo y potente para la creación de páginas web, este lenguaje es el HTML (HiperText Mark-up Language) o lenguaje de etiquetas. En el lenguaje HTML existen una serie de convenciones que definen los aspectos generales de una página web, así como sus partes.
La idea es muy sencilla: cualquier cosa que se represente en una página web (texto, imágenes, ...) debe ir entre 2 "etiquetas" o "tags", la primera indica que empieza el elemento y la segunda indica que dicho elemento ha terminado, por ejemplo:
TEXTO Hola, este es el texto FINTEXTO
Pero como puede observarse las "etiquetas" pueden llegar a confundirse (no por el ordenador, sino por nosotros), con lo que las etiquetas se representan de una manera especial: entre 2 símbolos ( < >). Y para denotar la segunda etiqueta . De esta manera el ejemplo quedaría:
Hola
Pero el nombre de las etiquetas nos lo hemos inventado. Cada etiqueta posee un nombre, este nombre suele ser el nombre del elemento en inglés. Por ejemplo, una tabla se representa con .
Por lo tanto, las páginas web son un fichero de texto en el que se incluyen una serie de etiquetas que definen zonas, formatos y características de los elementos que contienen y que, posteriormente, el navegador se encarga de traducir a un formato gráfico, que es lo que finalmente vemos en pantalla.A continuación presentamos un fragmento de código HTML de una página web.
Como se puede observar, aparecen algunas palabras extrañas. Es la representación de las tildes, que se realiza mediante el símbolo "&" seguido de la letra que queremos acentuar (a, e, i, o, u) y seguido de "acute;". Por ejemplo, si queremos acentuar la "a" se realizaría de la siguiente manera:
á
Es importante que no olvidemos poner el punto y coma al final; con Internet Explorer no es necesario, pero con Netscape Navigator sí. Pese a que las últimas versiones de los navegadores admiten poner las tildes directamente, su representación se realiza así debido a que las primeras versiones de los navegadores no las admitían.
Otra representación extraña es que indica que no hay nada, pero que ha de representarse en pantalla. Esto es útil cuando se quiere mostrar una celda vacía dentro de una tabla, una línea en blanco, ...
También se aprecia que las etiquetas se pueden combinar. Por ejemplo, si queremos escribir un texto en negrita y cursiva, tendremos que poner las etiquetas correspondientes a una línea de texto (
, P de párrafo), la etiqueta de negrita (, B de bold, que significa negrita en inglés) y la etiqueta de cursiva (, I de italic, que significa cursiva en inglés), lo que resultaría:
Hola, bienvenidos al curso
Pero esta representación mediante etiquetas del HTML presenta algunos "huecos", a modo de ilustración, ¿cómo indico que el texto sea de un determinado tamaño?. Pues bien, las distintas propiedades que tenga el elemento también van dentro de la primera etiqueta. En el caso del texto sus propiedades son el tamaño, el tipo de letra, la alineación, el color, ...
Hola, aqui va el texto
Al igual que el resto de los elementos, la página web se representa entre 2 etiquetas, éstas son: , por tanto si el código de nuestra página web no incluye estas 2 etiquetas, la pantalla aparecerá en blanco. Pero una página web no son sólo los elementos que vemos, también existen otros elementos que no apreciamos, como pueden ser el título, el autor, su contenido, ... estas partes se verán más adelante.
Pero como hemos mencionado anteriormente, no es necesario saber HTML, ya que las herramientas de creación de páginas web pondrán el HTML por nosotros. Lo único que tendremos que hacer es diseñar nuestra página tal y como se verá en pantalla y la herramienta hará el resto.
Diseño de páginas Web: Partes de una página
Partes de una pagina
Como ya hemos visto, toda página web debe estar encerrada entre las etiquetas , que indican al navegador que el documento que se está recibiendo se tiene que visualizar como un documento de internet.
Básicamente, una página web la forman 2 partes: cabecera y cuerpo.
En la cabecera, compuesta por las etiquetas que se colocan a continuación de la etiqueta , se definen todas las características relacionadas con la página. Estas características son: su título, su autor, el contenido, palabras clave, ... principalmente utilizaremos el título y el autor.Pero la mayoría de estas características no se representan en pantalla, excepto el título, que los navegadores lo incorporan al título de la ventana, como muestran las imágenes.
El resto de las características se suelen representar mediante las etiquetas , aquí teneis unos ejemplos:
En el cuerpo de la página, encerrado por las etiquetas y situado inmediatamente después de la cabecera, se definen todos los elementos que contiene la página web, es decir, aquí insertaremos el código HTML de todos los objetos que aparecen (o no) en pantalla.
Como ejemplo, una página web tipo sería:
Este mensaje está dentro del cuerpo del documento.
Observandose en pantalla lo siguiente:
Diseño de páginas Web: Elementos básicos
Elementos basicos
En las imagenes podemos ver las barras de herramientas del FrontPage Express y del Netscape Composer, que incluyen más o menos los mismos elementos, y que se consideran los elementos más básicos e imprescindibles que incluye una página web.
Estos elementos son básicamente:
Texto y todas sus propiedades: color, tamaño, tipo de letra, cursiva, subrayado, negrita, justificación, indentación, ...
Imágenes. Sus propiedades son: el nombre del archivo donde está contenida la imagen, su altura, su anchura, su justificación, la anchura del borde y la forma en que se alineará el texto con relación a la imagen. También poseen una propiedad llamada alt: al poner el cursor encima de la imagen, saldrá un recuadro de color amarillo con el texto que hayamos escrito.La imagen puede ser estática (una simple foto) o una animación (casi siempre un archivo en formato GIF).
Tablas. Las propiedades son: el número de filas y de columnas, su justificación, la alineación del contenido de una celda, el color o imagen fondo, la anchura del borde.
Hipervínculos o enlaces o links. Es una propiedad especial que se aplica al texto o a las imágenes. Consiste básicamente en que al hacer click con el ratón sobre el objeto que posee esta propiedad, entramos automáticamente en la dirección web que le hayamos indicado previamente.Para distinguirse mejor, el navegador conmuta automáticamente la forma del puntero de una flecha a una mano .
Objetos de formularios. Estos objetos no son tan corrientes como los anteriores, son más bien propios de cualquier aplicación Windows. Estos objetos son botones, casillas de verificación, listas desplegables, cuadros de texto, ...
Diseño de páginas Web: Herramientas para su creación
Herramientas para su creacion
Ante la avalancha de e-mails recibidos, dentro de unos meses se añadirán cursos prácticos sobre las distintas herramientas que aquí se describen.
Las herramientas de creación de páginas web o editores de páginas web, fueron concebidas con el propósito de evitar al desarrollador un conocimiento exhaustivo del lenguaje HTML y una ayuda para el diseño de nuestra web.Su apariencia es prácticamente igual a la de cualquier editor de textos. Lo único que debemos hacer es escribir en pantalla, elegir el tamaño, el color, la apariencia del texto, ... dibujar tablas, insertar imágenes, guardar los cambios y ya tenemos lista nuestra página web.
Las herramientas constituyen la mejor manera de desarrollar una página web ya que nos evitan tener que codificar en HTML, y mediante un intuitivo interface gráfico iremos construyendo nuestra web sin escribir ni una sola línea de código. Además, mientras estamos desarrollando, tendremos una visualización prácticamente igual a la visualización final en un navegador de internet.
Las más destacadas son:
Dreamweaver (de Macromedia)
Sin duda es la mejor de todas, aunque a primera vista puede parecer algo complicada, ya que su apariencia se desmarca del estándar Windows. Pero es, sin lugar a dudas, la más completa: minimiza el código HTML que inserta en la página, maneja a la perfección las capas y controla todos y cada uno de los parámetros y opciones de cada elemento (incluyendo CSS).
Está pensada para profesionales y muchas de las opciones que incorpora nos vendrán grandes al principio (como comprobación automática de links, mapa de nuestra página, ...), pero eso no significa que no podamos usarla. También incorpora de serie unos efectos visuales en JavaScript bastante útiles (entre los que se incluyen las imágenes que cambian al pasar el ratón por encima y los llamados Timelines).
Éste es el aspecto que presenta su editor.
Hot Metal Pro (de SoftQuad)
Hot Metal Pro es el rey destronado. Antes de la llegada al mercado de Dreamweaver, era la herramienta preferida por los desarrolladores. Complicada en un principio por la gran cantidad de opciones que posee, pero muy familiar gracias a la apariencia estándar de cualquier aplicación Windows. Su calidad es muy alta pero incorpora menos opciones que el Dreamweaver, factor que determinó su caída del puesto de honor.
Una de las opciones que más nos llamó la atención y que ninguna otra herramienta que conozcamos posee, es que permite controlar la repetición de la imagen del fondo de la página, pudiendo repetirse por toda la pantalla, bien en horizontal, bien en vertical, o que no se repita (además de poder definir las coordenadas iniciales y finales).
En la imagen puede observarse su editor.
FrontPage 2000 (de Microsoft)
El FrontPage 2000 se incluye junto al paquete Microsoft Office 2000, con lo que seguramente ya lo tengamos instalado en nuestro ordenador. Es bastante sencillo de usar: combina 3 pestañas en su parte inferior que permiten conmutar la visión de nuestra página (desarrollo, HTML y dentro del navegador de internet).
Útil para nuestros comienzos, pero se quedará corto en muchos aspectos cuando queramos desarrollar un sitio más elegante. Hay que destacar que tiene la mala costumbre de insertar mucho "código basura" en nuestra página, además de que muchos componentes que incorpora están implementados con etiquetas (como las transiciones de página) y otros son los llamados componentes WebBot. Ambos no funcionan muy bien en otra cosa que no sea Internet Explorer 5.0.
Ésta es su apariencia.
FrontPage Express y Netscape Composer (de Microsoft y Netscape)
FrontPage Express y Netscape Composer, son dos herramientas que vienen incluidas con los respectivos navegadores de internet. Son muy útiles y recomendables para principiantes por su sencillez y por incluir las opciones justas. Se trata de 2 herramientas sin grandes pretensiones pero que representan el primer paso en el aprendizaje.
Lo ideal es empezar diseñando con alguna de las dos y, una vez aprendida la mecánica, pasar a desarrollar con otras herramientas más potentes.
Diseño de páginas web: Navegadores
navegadores
Nuestra página web, como ya hemos visto, está compuesta únicamente por código HTML que posteriormente un navegador de internet traduce a formato gráfico. Por tanto es importante que conozcamos algo más sobre los navegadores.
Hoy en día el mercado de navegadores de Internet está dominado principalmente por 2 aplicaciones :
Microsoft Internet Explorer (IE)
Netscape Navigator (NS)
Estos 2 aplicativos abarcan el 95% del mercado, pero es inevitable mencionar el 5% restante. Este porcentaje lo representan navegadores como Mosaic u Opera entre otros (sin olvidarnos del navegador exclusivo de Austin Powers).
Generalmente, los usuarios que utilizan este tipo de navegadores tienen también instalado el Explorer o el Navigator con lo que la cuota de mercado de estos últimos es casi del 100%. Y esto es algo importante al desarrollar cualquier tipo de aplicación orientada a Internet, ya que cada navegador es un mundo distinto, ofreciendo/soportando un determinado conjunto de elementos, incluso el mismo elemento puede representarse de forma distinta (por ejemplo el "colspan" de una tabla en IE o NS).
Dicho esto, centrémonos en los dos más conocidos.
Microsof InternetExplorer:
Una de las causas de su gran expansión (sin entrar en la polémica de si es legal o no) es que se incluye de serie con el sistema operativo de la casa, y parece que ha dado resultado porque es el navegador más usado hoy en día.
Está disponible para todas las versiones Windows (3.1, 95, 98, NT y 2000), Macintosh y algunos UNIX (Sun Solaris y HP-UX).
Sus ventajas (respecto a su más directo competidor) son:
Es más flexible y amigable a la hora de modificar o escribir el código (Script o HTML)
Soporta una mayor cantidad de componentes, por ejemplo las hojas de estilo (CSS) que NS ignora o incluso borra de pantalla (esto es hasta la fecha, no obstante, con el lanzamiento del Navigator 6.0 esta situación parece que va a cambiar)
Hace un uso más inteligente de los archivos temporales de internet a la hora de volver a mostrar una imagen o ejecutar un subprograma Java
Los applets funcionan más rápido, ...
Actualmente, está disponible la versión 5.5
TRUCO: Si vuestro explorer es uno de esos "proporcionado por XXXXX" o algo por el estilo, y quereis quitar el molesto titulito, lo único que teneis que hacer es modificar esa línea en el registro de Windows (utilizando el programa "C:\WINDOWS\RegEdit.exe"). Para ello, buscar la cadena "proporcionado" (pulsar la tecla F3 dentro del programa RegEdit) y una vez localizada cambiarla por lo que más o guste.También podeis personalizar la animación que aparece justo debajo de los botones de la ventana (minimizar, maximizar, cerrar) cambiando el archivo de imagen que contiene la animación (que se especifica dentro del registro en la línea anterior a la del título del programa).
Netscape Navigator:
Este navegador tiene versiones para casi todas las plataformas informáticas existentes (Windows, Unix, OS2-Warp, Linux) y en el mundo de UNIX es utilizado por casi la totalidad de los usuarios, razón de peso para no despreciarlo, ya que no todo es Windows.
Entre sus ventajas destacan:
No es sólo un navegador de internet, sino que viene integrado con un programa de correo (Netscape Messenger) y un programa de creación de páginas web (Netscape Composer)
La descarga de archivos es mucho más rápida, lo que permite que las páginas web se visualicen más rápido y que los archivos que nos bajemos tarden menos tiempo en guardarse
Posee más efectos para el texto (como el parpadeo de las letras)
Está pensado para que sea utilizado por varios usuarios en el mismo ordenador, lo que permite que cada usuario disponga de sus propios "marcadores" (en IE se llaman "favoritos"), el programa de correo sólo recoge los mensajes del usuario correspondiente, tiene cachés separadas para cada usuario, ...
Es un programa que no es de Microsoft
Diseño de páginas Web: Diseño web, ajustes y colores
Diseño web, ajustes y colores
Una vez elegido el tema, los contenidos y los detalles de nuestra página web llega la hora de la verdad: el diseño de nuestra web.
Algo muy, muy recomendable es que todas nuestras páginas (si que es nuestra web está compuesta de varias páginas) tengan una apariencia más o menos similar, es decir, nada de tener cada página de un color distinto, los contenidos colocados en un lugar diferente cada vez,...Y también es mejor tener muchas páginas pequeñas con un buen índice, que una grande cuyo tiempo de carga es muy, muy superior y que además perdemos tiempo en cargar cosas que tal vez no le interesen a nuestros visitantes.
Ni todo es texto, ni todo son imágenes. Conviene mezclar un poco, por ejemplo yo suelo poner las imágenes entre varias líneas de texto o combinadas con el texto en el margen izquierdo de pantalla.
Y ya que los navegadores y los sistemas operativos ponen a nuestro servicio gráficos con millones de colores y alta resolución, aprovechemoslo. Es bueno que las imágenes tengan el mayor colorido y resolución posible (pero ojo con el tamaño del archivo), combinar los colores del texto dependiendo si son encabezamientos, títulos, contenidos, ejemplos, ... poner las letras en distintos tamaños, distinto tipo de letra, negrita, ... ya sabeis, imaginación al poder.
A la hora de diseñar os topareis con unos problemillas bastante habituales y de fácil solución:
Ajustar el contenido en pantalla
Mostrar varias imágenes en la misma línea
...
La solución es la utilización de tablas. Dichas tablas las dividiremos a nuestro gusto, y en cada celda colocaremos la imágen, texto o nada si es preciso, de manera que todo cuadre a la perfección en pantalla.
www
.
eitig
.
com
Pero no debemos olvidar que existen varias resoluciones de pantalla, la más común es 800 x 600, pero por si acaso definiremos los tamaños de las tablas, filas y columnas en porcentaje y no en pixeles.
Diseño de páginas web: Imágenes y animaciones
Imágenes y animaciones
Como ya hemos visto, uno de los elementos que podemos incluir en nuestra página web son archivos de imágen. Los navegadores admiten practicamente cualquier formato de archivo de imágenes, pero en la práctica los diseñadores utilizan sólo dos: JPEG y GIF.
Aquí vemos unos ejemplos:
Archivo JPEGAnimación GIF
¿Por qué?, por el tamaño de los archivos. Ambos formatos comprimen la imágen para así reducir su tamaño, y de este modo, conseguir que el tiempo de carga de la página web sea inferior.
Las imágenes en formato JPEG tienen una profundidad de color de 16 millones de colores (RGB de 24 bits) pero reduce el tamaño de la imágen sacrificando calidad (en luces, reflejos y transiciones de colores principalmente). Resumiendo, las imágenes JPEG se verán peor a medida que aumentemos el porcentaje de compresión.
Por el contrario, el formato GIF no pierde calidad. También es capaz de almacenar máscaras (muy útil para definir determinadas zonas de la imágen de color transparente) y es capaz de reproducir animaciones. Pero sólo tiene una profundidad de 256 colores (paleta de 8 bits) y los archivos tamaño mediano o grande ocuparán más que en formato JPEG.
Existen herramientas que permiten reducir el tamaño de las imágenes sin sacrificar o sacrificando una mínima parte de la calidad, entre ellas están xat.com Image Optimizer, Advanced GIF Optimizer, JPEG Optimizer, ... Estos programas permiten visualizar al mismo tiempo la imagen originaria y la optimizada, mostrando el tamaño de cada una y el porcentaje de compresión obtenido.
Para insertar imágenes en nuestra página debemos utilizar las etiqueta , el único parámetro que es obligatorio es src, que indica el archivo de imágen a insertar.
Dentro de una imágen también podemos definir mapas o hot spot. Esto no es más que una determinada zona poligonal que posee un hipervínculo. Aquí teneis un ejemplo (la imágen posee 2 mapas):
No creo que existan muchas páginas web modernas sin imágenes. Las imágenes (bien elegidas y bien colocadas) proporcionan un colorido visual impresionante, además, "una imágen vale más que mil palabras". Pero no olvidemos que en internet "una imagen tarda más en cargar que mil palabras", por lo que habrá que llegar al punto medio en lo referente a imágenes y tiempo de carga.
El fondo de la página
En el fondo de nuestra página podemos colocar una imágen o animación. Si la imágen es más pequeña que el fondo, la imágen se repetirá a modo de mosaico hasta llenar todo fondo (aunque este efecto se puede desactivar).
Dicho efecto puede observarse en cualquiera de las páginas de esta sección. Como imagen de fondo se utilizó la imagen siguiente:
Para insertar una imágen de fondo debemos modificar la etiqueta y poner en su lugar:
Favoritos
Al añadir una página web a "favoritos", el navegador automáticamente asigna un icono por defecto dicha página, esto se puede apreciar en la figura siguiente.
Para que el navegador asigne a nuestra página un icono diferente, debemos tener un archivo llamado "favicon.ico", que contiene el icono a mostrar. O también se puede añadir la siguiente línea dentro de las etiquetas :
Una vez añadida la página a "favoritos", también se cambiará el icono por defecto que aparece en la barra de direcciones por nuestro icono.
Diseño de páginas web: Añadir música de fondo
Otro elemento multimedia que podemos incluir en nuestra página es el sonido. Pero no es muy aconsejable añadir música de fondo, ya que además de la tarjeta de sonido, se necesita el uso de software externo al navegador para poder escucharla. Además, la inclusión de música ralentiza en exceso la carga de nuestra página, y no todos los navegadores soportan su uso.
La música que se reproduce, son archivos en formato MIDI (en realidad puede reproducirse cualquier archivo de sonido, pero se opta por este tipo debido a su reducido tamaño). Pero este tipo de archivos sólo contienen música instrumental, y la cantidad y calidad de los instrumentos que escuchemos depende en exclusiva de nuestra tarjeta de sonido.
Internet Explorer reproduce la música sin mayores dificultades, pero su competidor, el Netscape, utiliza Java para ello. Esta técnica es bastante lenta y no funciona muy bien (otra razón más para no incluir sonido en nuestra página).
Para insertar música en nuestra página, se debe utilizar la siguiente sintaxis HTML (justo después de la etiqueta ):
En la propiedad SRC pondremos el nombre del archivo MIDI (*.mid) a reproducir, y en LOOP el número de veces a reproducirlo (1, 2, 3, ...) para reproducción contínua deberemos poner "infinite".
Diseño de páginas web: Links
Principalmente existen 3 tipos de links distintos:
A una página web de nuestro dominio
A una parte concreta de nuestra página
A otra página web de otro dominio
Links a una página web de nuestro mismo dominio
Se deben utilizar las etiquetas:
Texto o imágen que posee el hipervículo
En donde el atributo href apunta al destino del hipervínculo; pero a la hora de poner el destino debemos tener en cuenta las rutas y los directorios.
Todos los links a cualquier archivo que se encuentre en nuestro mismo dominio NUNCA incluirán la ruta del directorio inicial en donde está dicho archivo. Por ejemplo, si todos nuestros archivos se encuentran en el mismo directorio inicial llamado "C:\PAG_WEB\", los links serán simplemente el nombre del archivo, por ejemplo "index.htm", "bienvenida.html", "foto1.jpg", ...
Si por el contrario tenemos en el directorio inicial "C:\PAG_WEB\" algunos archivos y dentro de un subdirectorio del inicial llamado "C:\PAG_WEB\FOTOS\" otros archivos, cuando queramos referenciar a un archivo dentro del directorio "C:\PAG_WEB\FOTOS\", simplemente tenemos que poner "\FOTOS\".Si dentro del subdirectorio "C:\PAG_WEB\FOTOS\" tenemos otro subdirectorio llamado "C:\PAG_WEB\FOTOS\ANIMACIONES\" para referenciarlo sería "\FOTOS\ANIMACIONES\", la idea es muy sencilla.
Esto se debe a que si nuestra página se llama "index.htm", en local se llama "C:\PAG_WEB\index.htm", pero cuando se coloque en nuestro dominio de internet se llamará "http://www.eitig.com/index.htm", con lo que omitiendo las rutas de los directorios iniciales, se pondrá por defecto la ruta inicial del lugar donde se encuentre.
Con esto conseguiremos que nuestra página se pueda visitar de igual manera en internet, como en local para realizar las pruebas.
Lo mejor es crearse un directorio donde estén todas nuestras páginas web, y dentro de este directorio crear subdirectorios (\fotos, \archivos, \estilos, \scripts, \sonidos, ...) con lo que conseguiremos una buena organización.
-Ir a la parte superior de la página>
Links a una parte concreta de nuestra página
Para poder implementar los links a una parte concreta de una página web se utiliza un elemento llamado anchor o link interno. No es más que una marca que realizamos en nuestra página web y que desde un link normal y corriente invocamos.
La sintaxis HTML es muy parecida a la de un link normal:
Aquí puede ir (o no) texto o una imágen
Y para invocarla desde un link ha de utilizarse:
#nombre de la marca
Aquí teneis un ejemplo: en la parte superior de la página (antes de "Curso de Diseño y ...") hay una marca llamada "Superior", y desde el link que se encuentra justo debajo se la invoca utilizando .
-Ir a la parte superior de la página>
Links a páginas de otros dominios
Para implementar los links a otras página web que no pertenezcan a nuestro dominio se utiliza la misma sintaxis HTML de un link a una página de nuestro dominio. Pero se diferencian en que ahora el destino incluye la ruta completa, que no olvidemos, siempre empieza por "http://".
Texto o imágen que posee el hipervículo
Diseño de páginas web: E-mail como links
Supongo que en muchas ocasiones habreis visto páginas web en las que se puede mandar e-mail´s a sus autores o al webmaster para colaborar, dejar las críticas, o cualquier cosa. Si no lo habeis visto nunca, fijaos en la parte inferior de esta página.
Que nuestros visitantes puedan comunicarse con nosotros puede ser bastante útil (cada cuál decida para qué).
La forma más sencilla de ponernos en contacto con ellos es mediante e-mail. Una posible opción sería poner nuestra dirección de correo al final de la página y que la gente que quisiera comunicarse con nosotros la escribiera en su programa de correo, pero esto no es demasiado cómodo y puede que alguien escriba mal nuestra dirección y que nunca nos llegue su comentario.
Para ello, y como segunda opción, está el comando HTML (donde pone destinatario por supuesto tendremos que poner una dirección de correo válida). Esta orden abre el programa de correo predeterminado (Outlook, Messenger o que el sea) por la pantalla que sirve para escribir un nuevo mensaje. Dicho mensaje ya tiene escrita la dirección del destinatario (que es la que nosotros pusimos despues de "mailto:").
Como se puede observar, el comando HTML no es más que un link normal y corriente en el que la dirección de destino no es más que una dirección de correo electrónico. Por tanto, este comando se usa de igual manera que un link normal y corriente (lo podemos poner en una foto, texto, ...)
Diseño de páginas web: Distribución de archivos
Básicamente hay 2 formas de distribuir archivos a nuestros visitantes: mediante HTTP o mediante FTP.
El protocolo FTP es algo más complicado para nuestros propósitos, por lo que lo descartaremos.
Mediante HTTP es bastante sencillo. La mecánica es la misma que con cualquier link a una página web normal y corriente. En una parte del texto o en una imágen añadiremos un link a nuestro archivo, y con esto conseguiremos que cuando se pulse sobre el enlace, se guarde el archivo en la máquina local de nuestro visitante.
En las imágenes observamos lo que ocurre al distribuir un archivo llamado "dblist.zip".
Esta es la ventana que muestra el Internet Explorer:
Y esta la ventana que muestra el Netscape Navigator:
Una vez abierta la ventana, debemos elegir la opción "Guardar en disco", hecho esto nos preguntará el directorio en donde guardarlo y listo.
NOTA: comprobar antes que todos los archivos que van a distribuirse NO TIENEN VIRUS, porque podemos provocar un repentino llamamiento a nuestras familias por parte de nuestros visitantes e incluso tener problemas legales.
Diseño de páginas web: Comprobaciones finales
Que nuestra página esté terminada no significa que esté lista para colocarse en internet. Antes de dar ese paso debemos hacer las últimas comprobaciones para tener la certeza de que todo funcionará correctamente.
Archivos:
Debemos asegurarnos que todos los archivos a los que referenciamos desde nuestra página existen (otras páginas, imágenes, archivos con los Script, hojas de estilo, ...). Con esto evitaremos situaciones tan corrientes como estas:
No se encuentra la imagen:
Explorer
Navigator
No existe el archivo con los Scripts:
Enlaces o links locales:
Como ya se ha dicho, lo mejor es tener las páginas y todos los archivos que se utilicen dentro del mismo directorio, o en subdirectorios del mismo.
Tenemos que comprobar que hemos eliminado todas las rutas de los directorios iniciales, y que las referencias a los subdirectorios empiezan por "\" (e.j. "\fotos\logo.jpg").
Links a páginas web:
Este tipo de links SIEMPRE deben empezar por "http://", lo único que debemos hacer es comprobar si hemos escrito bien la dirección de la página. Con esto crearemos una página web practicamente sin fallos, con lo que nuestros visitantes (lo más seguro) volverán a visitarnos.
Diseño de páginas web: FTP
Nuestra página ya está terminada y hemos realizado las últimas comprobaciones, lo único que nos falta es colocar nuestra página en internet. Para ello utilizaremos el protocolo FTP (File Transfer Protocol). El FTP es un protocolo que nos permite transferir archivos entre ordenadores, en este caso, entre nuestro PC y el servidor de internet.
Lo primero es buscar un servidor de internet que nos permita colocar nuestras páginas (recomendable de manera gratuita aunque no es obligatorio). Esto hoy en día eso ya no es un problema, porque cualquier portal de internet nos ofrece más o menos 5 MB de espacio gratis para nuestras páginas web (entre ellos terra, yahoo, xoom, telepolis, network solutions, inlanders, todo-gratis,...). Las diferencias entre unos y otros son el espacio que nos ofrecen, la velocidad de descarga, la propaganda que incorporan a nuestras páginas, ...
Otra opción es comprar nuestro propio dominio. Esto no siempre es posible, ya que la mayoría de los dominios ".com" suelen estar en posesión de algún particular o empresa, aunque si realmente estamos interesados, podemos realizar una oferta a su propietario.También debemos tener en cuenta la legislación del país al que pertenece dicho dominio. Por ejemplo, en españa (".es") sólo se puede adquirir un nombre de dominio si dicho nombre se corresponde con el nombre de una empresa, ni siquiera se pueden adquirir dominios que coincidan con el nombre del producto que queremos publicitar.Para más información o para consultar disponibilidad de dominios puede consultar http://www.register.com/
Una vez elegido servidor y concedido el espacio, se nos dará el nombre de usuario (User ID), el password, el nombre del servidor (Host Name), y lo más importante, nuestra dirección de internet.
Lo siguiente que necesitamos es un programa FTP (FTP client) para realizar la transferencia de archivos (aunque la transferencia de archivos también la puedemos hacer con nuestros navegadores de internet, es algo más complicado pero es posible, por lo que, recomiendo la utilización de un programa de FTP).Los programas más conocidos son CuteFTP y WS_FTP LE, que se pueden descargar de manera gratuita en http://www.downloads.com/. Sus aspectos som muy similares al explorador de archivos de Windows 9x, como puede observarse en las imágenes.
CuteFTP
WS_FTP LE
Cute FTP de la compañía GlobalScape, es mucho más gráfico y amigable, además de poseer asistentes y la típica ventana inicial con los trucos del día. Pero WS_FTP LE de IPSwitch, consume menos recursos máquina. Cada cuál que elija el que más le guste, porque al final, los dos hacen lo mismo.
Dentro de nuestro programa de FTP pondremos los datos y este se conectará con el servidor (si los datos son correctos). Una vez conectados, haremos lo que queramos con nuestros archivos y con nuestro espacio en el servidor (crear directorios, copiar archivos, borrar archivos, ...), la mecánica es la misma que con nuestro disco duro.
Llegado a este punto se nos plantea una pregunta: ¿cuál es la primera página que se va a ver un usuario al teclear nuestra dirección?.
Cada servidor suele variar algo su política, pero lo normal es que la primera página que se va a abrir es la página llamada "index.htm", por lo que si nuestra página inicial se llama "principal.htm" o algo por el estilo, deberemos cambiarla el nombre (y corregir todos los links que la apunten).Para comprobar si hemos hecho todo correctamente, teclearemos la dirección que nos dijeron y daremos una vuelta a ver que pasa.
NOTA: la dirección que nos suelen proporcionar hace publicidad al portal, además de ser bastante larga y complicada (usuarios.terra.es/mi_pagina, members.xoom.com/mi_pagina, ...). Y se plantea otro problema: el nombre que queremos dar a nuestra página no siempre está libre (hay que tener en cuenta que no somos los únicos con página en internet).
Para evitar esto, existe el servicio de redireccionamiento automático como por ejemplo: http://www.pagina.de/ que nos permite dar el nombre que queramos, siempre que no esté elegido por otro usuario (www.pagina.de/mi_pagina) y desde ahí llevará a nuestros visitantes a la dirección que nosostros digamos (usuarios.terra.es/mi_pagina), algo que os recomiendo encarecidamente y que vuestros visitantes agradecerán.
Este servicio no sólo lo realiza www.pagina.de, existen más como: www.easy.to/remember, http://www.gratix.com/, ...
Diseño de páginas web: Frames
Los Frames nos permiten presentar en una página múltiples documentos en diferentes vistas. Estas vistas nos permitirán, por ejemplo, fijar en una de ellas el índice, el logotipo, ... mientras que en la otra mostramos el contenido seleccionado.
En realidad, una página web con frames, no es más que un pequeño fragmento en HTML que carga una página web en cada una de las vistas que hayamos definido. Esto se puede ver en el ejemplo:
La página principal de EITIG posee dos marcos:
Uno superior donde van colocados los contenidos y el buscador.
Y uno inferior donde se muestran los temas pertenecientes al contenido seleccionado (este marco posee barra de scroll).
Para conseguir esta visualización necesitamos 3 páginas HTML:
Una para definir los marcos que vamos a tener en pantalla. Este sería más o menos el código HTML que incluiría dicha página:
Y las 2 páginas que se van a mostrar en el marco superior e inferior (Contenidos.htm e Indice.htm).
Lo que hacemos es dividir la pantalla como si se tratase de una tabla, y a esa tabla la dividimos en filas y columnas. A cada celda le decimos (mediante la propiedad src) que página tiene que mostrar. Estas suelen ser las combinaciones más usuales.
Pero no hay límite, podemos crear las combinaciones que queramos, pero no debemos olvidar que en cada vista se carga una página y excesivas vistas pueden ralentizar sobremanera el sistema.
Diseño de páginas web: Capas (Draw Layer)
Una capa no es más que un contenedor HTML, es decir, un elemento que agrupa a otros elementos. Esta agrupación nos permite tratar a todos los elementos como si fueran un todo, y gracias a eso, podemos crear unos efectos visuales muy interesantes utilizando poco código: como ocultar/mostrar una capa (que ocultaría a todos los elementos contenidos en esa capa), cambiar su posición en pantalla, su color o imagen de fondo, ...
Si quereis contemplar las posibilidades que ofrecen las capas con vuestros propios ojos, os recomiendo visitar:
Otra sección de EITIG, lo más web
La página principal de esta sección
http://www.ciudadfutura.com/, este portal tarda un poco en cargar, pero posee unos menus con transiciones a la hora de abrirse y cerrarse francamente buenos
Las capas se posicionan en la pantalla de manera absoluta, es decir mediante coordenadas X, Y, Z, largo y ancho. La tercera dimensión (la coordena Z o z-index), define la superposición de las capas. Una capa de orden superior ocultará a otra de orden inferior.
El posicionamiento absoluto tiene un inconveniente: la resolución de la pantalla. Una capa colocada en unas determinadas coordenadas, si la resolución con la que se visualiza la página es más pequeña que la resolución con la que la diseñamos (por ejemplo 640 x 480) puede quedarse fuera del ángulo de visión. Para evitarlo, los navegadores automáticamente activan el scroll de pantalla.
Como se ha dicho, una capa es un contenedor, pero no hay limitaciones respecto al contenido. Una capa puede contener cualquier cosa, por ejemplo texto, imágenes, plug-in´s, applets e incluso otra capa.
Las capas se definen normalmente mediante las etiquetas DIV o SPAN (pero existen otras formas como las capas CSS y las capas de Netscape utilizando LAYER e ILAYER).Internet Explorer 4.0 y Netscape 4.0 soportan a la perfección las capas creadas con DIV y SPAN, pero las capas que utilizan las etiquetas LAYER e ILAYER sólo las soportan las versiones superiores.
Aquí teneis un ejemplo de utilización de capas: tenemos 2 capas (Layer1 y Layer2) ambas situadas en las mismas coordenadas pero con distinto z-index, la segunda capa no es visible, pero al pasar el ratón sobre el texto "Mostrar" se muestra, ocultando por su situación en el eje Z a la primera capa. Al alejarse el ratón del texto "Mostrar" se vuelve a ocultar la segunda capa.
Diseño de páginas Web: Java, JavaScript y VBScript
Java,javascript y vbscript
Una vez que hayamos creado nuestra página web, nos daremos cuenta, que a pesar del colorido, las animaciones y los gráficos (que dan más o menos vistosidad), nuestra página es totalmente estática.
Pues bien, alguien antes que nosotros se dio cuenta de este problema, que se solucionó de una forma muy simple: programando.
Existen mayoritariamente 3 formas o 3 lenguajes para crear algo de interactividad en nuestra página: applets (en Java), script en JavaScript o en VBScript. A modo de nota mencionaré también un programa llamado Flash de la compañía Macromedia que empieza a convertirse en una seria alternativa a los lenguajes Script.
Java:
Java es un lenguaje de programación orientado a objetos de propósito general creado por la compañía Sun Microsystems.
Dentro de este lenguaje disponemos de una clase especial llamada "applet" que implementando sus métodos conseguimos realizar un subprograma Java que nuestro navegador entiende, y lo más importante, ejecuta.
Para poder insertar el applet dentro de nuestra página ha de estar comprendido entre 2 etiquetas: , y como es típico del HTML acompañado de parámetros tales como el nombre de la clase, el espacio de pantalla para representarlo, ...
Personalmente no recomiendo la insercción de applets dentro de una página web porque mientras se está cargando/interpretando el applet, el navegador no responde, y por tanto, las demás páginas web que estén abiertas en ese momento se quedarán temporalmente colgadas. Además, el gran inconveniente de Java es su lentitud, que se compensa por su portabilidad.Es aconsejable utilizar JavaScript (que es más rápido) y para tareas que no se puedan implementar en JavaScript utilizar Java.
Si alguien quiere ver los applets en acción, que se pase por http://www.spygots.com/. Y para aprender más sobre Java, POO, ... os remito a la sección de Programación Orientada a Objetos que posee eitig.
JavaScript:
No hay que confundir JavaScript con Java. JavaScript fue desarrollado por Netscape para añadir interactividad a las páginas web con su navegador de internet. Pese a que JavaScript posee una sintaxis muy similar a Java, NO ES JAVA.
Como fue desarrollado por Netscape, su navegador (Netscape Navigator) era el único que lo reconocía. Pero hoy en día está integrado en casi la totalidad de navegadores de internet del mercado (la implementación de Microsoft en el IE se llama JScript y difiere ligeramente de JavaScript).
Hay que decir que es el lenguaje más utilizado en internet para añadir interactividad a las páginas web. Puede que al navegar por alguna página web lo hayamos visto, pero no nos hayamos dado cuenta. Se utiliza sobre todo para cambiar las imágenes al pasar el ratón encima, moverlas, validar los datos, escribir mensajes en la barra de estado, implementar un reloj, ...
JavaScript al ser un lenguaje de Script, el código se embebe dentro del código HTML de las páginas web. No hay que compilarlo ni linkarlo, sino que el mismo navegador de internet se encarga de interpretarlo. No necesitamos ninguna herramienta especial para programar en JavaScript, simplemente con el mismo block de notas de Windows podemos escribir código Script, aunque es recomendable utilizar alguna herramienta que nos ayude sobre todo a la hora de depurar errores (como puede ser la que se ofrece con Microsoft FrontPage).
Aquí teneis una de función muy útil, lista para usar:
Adjunto un MANUAL para quien quiera aprender este lenguaje.
VBScript:
El lenguaje VBScript es el intento por parte de Microsoft de adentrarse en el negocio de los lenguajes de Script. Su propósito es el mismo que el de JavaScript, pero su sintaxis por fuerza, es distinta. Se tomó la sintaxis del programa de la casa: el Visual Basic.
Al ser de Microsoft, pasó un poco como al principio con JavaScript, sólo lo reconocía el Internet Explorer, pero ahora creo que Netscape 6.0 también lo soporta, aunque existe un plug in que se puede conseguir en http://www.netscape.com/ para que el Navigator soporte su uso.
Como nota hay que decir que fue el lenguaje utilizado para programar el famoso virus "I love you".
Diseño de páginas Web: Insertar código Script
Como JavaScript se embebe dentro de código HTML, debemos indicar al navegador que el texto que está recibiendo es una rutina en Script que debe interpretarse y no texto a mostrar en pantalla.Esto se realiza mediante las etiquetas
, pero además debemos indicar en qué lenguaje está escrito para facilitar la labor de interpretación (aunque por defecto se toma JavaScript), esto se hace:
Para evitar que los navegadores que no soporten JavaScript o tengan desactivada esa opción muestren el código en pantalla como si se tratase de texto normal y corriente, se utilizan las etiquetas HTML que indican que es un comentario (). Con esto conseguiremos que si el código se trata como HTML no salga en pantalla.
Con lo que a la hora de codificar un Script, tendríamos la siguiente plantilla:
La verdad es que no existe un convenio claro sobre en qué parte de la página web hay que colocar el Script. Lo que se suele hacer en colocarlo entre el final de la cabecera y el cuerpo, o dentro de la cabecera.Otra práctica bastante extendida es colocar nuestras funciones en un archivo de texto (pero con extensión .js) y desde la página HTML llamarlo. Por ejemplo, si nuestro archivo se llama rutinas.js, el ejemplo quedaría de la siguiente manera:
Y dentro del archivo rutinas.js:
Con esta práctica conseguiremos reutilizar de una manera más sencilla rutinas tan comunes como la de escribir mensajes en la barra de estado del navegador, o las funciones de mostrar/ocultar capas.
Diseño de páginas web: Cookies
Uno de los problemas que presenta el protocolo HTTP (HyperText Transfer Protocol) es que no posee estado o memoria, y por tanto, no se pueden guardar ningún tipo de dato en la máquina cliente, ni tampoco recolectar información sobre las operaciones que realizó el mismo (la problemática es similar a la de los autómatas de Moore y Mealy).
Las Cookies o "galletitas" se crearon con el propósito de solucionar este problema. Simplemente son archivos de texto normales y corrientes que se guardan en la máquina cliente y que almacenan fragmentos de información. Nuestro navegador (en el caso de que soporte el uso de Cookies), manda al servidor esta información con cada petición que le solicitemos, y el servidor con esta información realiza las acciones correspondientes.
Uno de los usos más extendidos es el de personalizar portales, como por ejemplo Telepolis. Pero no sólo sirven para personalizar, también sirven para recoger el número de veces que hemos visitado la página, la hora de nuestro ordenador, ... y también se utilizan en páginas de comercio electrónico, almacenando la lista de la compra, la lista de deseos, ...
Veamos el ejemplo de Telepolis. Este portal, en el caso que no exista una Cookie en el cliente, manda una página inicial para que nos registremos. Cuando nos registramos, se guarda una Cookie con información sobre nuestra ciudad, nuestro signo del zodiaco, empresas favoritas, ...La siguiente vez que visitemos el portal nos sorprenderemos al darnos cuenta que pone: "Bienvenido XXXXX", además de la información meteorológica de nuestra ciudad, nuestro horóscopo y la cotización de nuestras empresas en bolsa.
Las Cookies poseen varias propiedades: valor, fecha de expiración, dominio, path y secure. Aunque las más utilizadas son valor y fecha de expiración.
Según la fecha de caducidad, las Cookies se clasifican en 2 tipos: Temporales y Semi-permanentes.
Temporales son aquellas Cookies que no poseen fecha de expiración, esta Cookie no se almacenará en disco.
Semi-permanentes son aquellas que sí tienen especificada la fecha de expiración, una vez superada la fecha, la Cookie desaparecerá.
Dependiendo del modo en que se defina esta fecha, la Cookie expirará al terminar la sesión, pasados X días o en una fecha concreta. Lo normal es que las Cookies utilizadas para personalizar páginas web sean semi-permanentes y que nunca caduquen.
Las Cookies se guardan junto con un número único de sesión (esto lo hace automáticamente el sistema) para que no se sobreescriban al entrar en una página distinta y también, para que pueda ser reenviada a su página de procedencia la siguiente vez que entremos en ella.
El problema que presenta el uso de Cookies es que no todos los navegadores las soportan (depende del navegador y de la versión), además, los navegadores permiten configurar el equipo para que no utilice Cookies.
NOTA: Si se copia al portapapeles el código directamente del explorador, puede que de problemas la tabulación, ya que se sustituye por espacios en blanco. En ese caso, borrar todos los blancos y volved a poner la tabulación.
// Esta función guarda un valor en una Cookie y pone la fecha de expiración// Para crear Cookies temporales dejar caducidad sin valor// El parámetro caducidad se expresa en milisegundos. Para expresarlo en días: 1000 * 60 * 60 * 24 * nº de días. function guardarCookie ( nombre, valor, caducidad) { if ( caducidad ) { caducidadAux = new Date(); caducidadAux.setTime (caducidadAux.getTime() + caducidad); document.cookie = nombre + "=" + valor + "; expires=" + caducidadAux.toGMTString() + ";"; } else { document.cookie = nombre + "=" + valor + ";"; } }
// Elimina la Cookie asignándola una fecha atrasadafunction eliminarCookie ( nombre ) { document.cookie = nombre + "=NULL; expires=Friday, 2-May-80 00:00:00 GMT";}
// Devuelve el valor de "nombre" almacenado en la Cookie// Si "nombre" no existe, devuelve la cadena vacíafunction recuperarCookie ( nombre ) { valor = ""; // compruebo que exista la Cookie if ( document.cookie ) { // compruebo que "nombre" tiene asignado algún valor pos = document.cookie.indexOf( nombre ); if ( pos != -1 ) { // recupero el valor de "nombre" y lo guardo en "valor" posIni = document.cookie.indexOf( "=", pos ) + 1; posFin = document.cookie.indexOf( ";", pos ) - 1; // si "nombre" es la ultima variable, posFin es el final de la Cookie if (posFin == -2) posFin = document.cookie.length; valor = document.cookie.substring( posIni, posFin ); } } return valor;}
Diseño de páginas Web: Problemas con los navegadores
Problemas con los navegadores
El principal problema que nos encontraremos a la hora de desarrollar rutinas en JavaScript, es que no existe una única implementación de este lenguaje, sino que existen diferentes implementaciones y diferentes versiones de cada implementación.
Las implementaciones son:
JScript, que es el lenguaje de Script que desarrolló Microsoft para su Internet Explorer, en la actualidad se encuentra por la versión 5.5.
El JavaScript originario, desarrollado por Netscape, que se encuentra por la versión 1.5.
Navegador Versión
Navigator 2.0 JavaScript 1.0
Navigator 3.0 JavaScript 1.1
Navigator 4.0 JavaScript 1.2
Navigator 4.6 JavaScript 1.3
Navigator 6.0 JavaScript 1.5
Explorer 3.0 JScript 1
Explorer 4.0 JScript 3
Explorer 5.0 JScript 5
Explorer 5.5 JScript 5.5
Cada versión mantiene perfectamente la compatibilidad con las versiones anteriores (al menos eso aseguran las respectivas compañías), es decir, el código que funcionaba con una versión anterior del lenguaje, funcionará sin problemas en una versión más reciente.
Algunas de las características de JScript son:
Es totalmente compatible con el estándar ECMAScript (estándar de unificación en torno al los lenguajes de Script)
No es Case Sensitive
Permite el uso de la tecnología ActiveX
Ofrece más información sobre el navegador que está visualizando la página web
Resumiendo, es practicamente imposible generar código 100% compatible con ambas implementaciones. Lo que se suele hacer es introducir dentro del código Script un "IF" que chequea el navegador que se está utilizando, y utilizar en función del mismo, una sintaxis u otra.
Como ejemplo esta función para ocultar capas de un documento:
// Esta función oculta la capa introducida como parámetrofunction ocultar(capa){ if (ns && document.layers != null) { capa.visibility='hide' } else if (document.all != null) { capa.style.visibility='hidden' }}
Conclusión
El diseño Web es una actividad que consiste en la planificación, diseño e implementación de sitios Web y páginas Web. No es simplemente una aplicación del diseño convencional sobre Internet ya que requiere tener en cuenta cuestiones tales como navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen y vídeo.
El diseño es la comunicación textual (contenidos) existente en Internet una faceta visual, sino que obliga a pensar una mejor estructuración de los mismos en este soporte. La unión de un buen diseño con una jerarquía bien elaborada de contenidos aumenta la eficiencia de la Web como canal de comunicación e intercambio de datos, que brinda posibilidades como el contacto directo entre el productor y el consumidor de contenidos, característica destacable del medio Internet.
El diseño Web ha visto amplia aplicación en los sectores comerciales de Internet especialmente en la World Wide Web. Asimismo, a menudo la Web se utiliza como medio de expresión plástica en sí. Artistas y creadores hacen de las páginas en Internet un medio más para ofrecer sus producciones y utilizarlas como un canal más de difusión de su obra.
Bibliografía
http://www.wikipedia.com/
Microsoft encarta2006
