Introducción Al Diseño Web

INTRODUCCIÓN AL A L

AUTOR

FRANCISCO JAVIER DÁVILA DELGADO EN COLABORACIÓN CON

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ MÁS INFORMACIÓN EN www.adwys.es

INDICE DE CONTENIDOS ¿QUÉ ES EL DISEÑO WEB?_

1

LA RED DE REDES_

5

LA WEB: FUNCIONAMIENTO_

6

TIPOS DE PÁGINAS WEB: ESTÁTICAS Y DINÁMICAS_

7

LENGUAJES DE MARCADO_

9

HTML_

10

CSS: UNA BREVE INTRODUCCIÓN_

39

OTRAS TECNOLOGÍAS_

48

ACCESIBILIDAD, USABILIDAD Y ESTÁNDARES WEB_

50

DISEÑO LIMPIO Y POSICIONAMIENTO ÓPTIMO (SEO)_

52

ALGUNOS ERRORES COMUNES EN EL DISEÑO WEB_

54

LICENCIA_

59

1

INTRODUCCIÓN AL DISEÑO WEB

¿QUÉ ES EL DISEÑO WEB?_ Se puede entender el diseño web como la actividad enfocada a la planificación, el diseño y la implementación de sitios y páginas web. Para que un diseño web cumpla a la perfección con los objetivos de mostrar la información de manera adecuada y cuidar la forma en la que ésta se presenta hay que tener en cuenta diferentes factores: • El acceso a la información debe ser fácilmente accesible, proporcionando al usuario recursos para acceder a todas y cada una de las páginas web de un sitio (navegabilidad) • La navegación por nuestra página ha de ser cómoda, por lo que nuestra interfaz tiene que ser clara y fácil de usar ( usabilidad) • Analizar y organizar la información, seleccionando la estructura más conveniente para mostrarla (arquitectura) • Cuidar la interacción del usuario con medios como el audio, imágenes, vídeo, etc. (interactividad) El auge de Internet ha facilitado el contacto directo entre proveedores de contenidos y el consumidor, sobre todo a través de la World Wide Web (WWW). El diseño web en sí no se centra sólo en mostrar una faceta visual atractiva, si no que tiene en cuenta además que los contenidos, piedra angular de la web, se muestren de forma adecuada y jerárquica. Un diseño puede considerarse adecuado cuando es capaz de complementar información bien tratada y enlazada con una expresión visual agradable que, además, tenga a bien intentar proporcionar al usuario la mejor experiencia de navegación posible. Una página web se define como un conjunto de información que es accesible a través de un navegador web (o agente de usuario (AU)) tras haber sido tratada y adaptada al protocolo WWW, WWW, mientras que un sitio es un conjunto de páginas web. En un principio, las páginas web mostraban solamente texto, pero con el paso del tiempo la tecnología ha mejorado, y a día de hoy la experiencia del usuario en la red es bastante mejor, con la inclusión de contenidos multimedia en la web. Además Además del hipertexto, verdadero rey de la la web, se ha incluido la posibilidad de visualizar imágenes, vídeos, etc. aportando dosis de estilo e interactividad con el navegante nunca antes vistos. Se estima que hay más páginas web en Internet que habitantes en el planeta, lo cual muestra la importancia que este canal de comunicación ha adquirido con el paso del tiempo. Toda empresa, particular o grupo de personas puede, fácilmente, poseer un espacio propio en la red de redes en la actualidad. Por eso, es importante marcar la diferencia, siendo el apostar por un diseño web de calidad un factor decisivo para el éxito, ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

2


y otro, ofrecer contenidos contenidos de calidad para conseguir conseguir así un público fiel y satisfecho con lo que se pone a su disposición. Para diseñar una página web se ha de crear, básicamente, un documento con información que va a ser enlazado con otros documentos, y a continuación aplicarles a todos un estilo visual determinado. Los diferentes pasos a seguir podrían ser éstos: Realiz ar un boceto en papel de cómo van a ser distribuidos distribuid os en la página web los • Realizar elementos que van a componerla, como los vínculos a otras páginas, los contenidos multimedia y el texto. • Comenzar la creación de los documentos con la información que va a ser mostrada, dejando la parte visual para después. Para facilitar el trabajo con los enlaces entre páginas, se desarrolló el lenguaje HTML o Lenguaje de Marcación de Hipertexto (Hypertext Mark-up Language en inglés). Para la labor de crear los documentos HTML, se pueden usar tanto programas de edición WYSIWYG (What You See Is What You Get ) (MS Frontpage, Macromedia Dreamweaver, etc.), programas WYSIWYM (What You See Is What You Mean ) o editores de texto (Notepad, GNU Emacs, etc.). Aunque los editores WYSIWYG facilitan enormemente la tarea de realizar documentos HTML al centrarse el usuario en el aspecto visual antes que en el código, hay quien no ve demasiado bien su uso, ya que generan un código bastante “sucio” y hacen al desarrollador dependiente de su plataforma. Hay que destacar que existen varios lenguajes de marcado aparte de HTML, como XML, o la adaptación de HTML a éste último, XHTML, aunque hoy en día HTML como tal sigue estando presente en la mayoría de los l os proyectos web. • Si es necesario, crear la parte visual usando programas para diseño gráfico (Adobe Ilustrator, Adobe Photoshop, The Gimp, etc.) (si se necesita) para, a continuación, implementar las hojas de estilo que indicarán al navegador del cliente cómo mostrar la información expuesta en el contenido. En este manual haremos una introducción a las hojas de estilo en cascada (CSS). • Revisar que nuestro sitio web cumple los estándares, validándolo en el sitio del World Wide Consortium ( W3C), que es el consorcio encargado de velar por el respeto hacia los estándares web. No es un paso obligatorio, pero siempre es adecuado desarrollar páginas que cumplan con las normas básicas de publicación web para hacer de la www un espacio más ordenado, con las mismas normas para todos y con elementos de una mayor calidad. ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

3


• Por último, si estamos realizando nuestro sitio web en local, subir los archivos del proyecto a un servidor huésped (hosting ), ), perteneciente a una empresa. Esa empresa nos alquilará un espacio en ese servidor por una cuota (o nos lo ofrece de manera gratuita con la condición de insertar publicidad), ofreciéndonos diferentes servicios (cuentas de correo electrónico, bases de datos, soporte PHP, etc.). Además, nos asignará un ancho de banda mensual límite a consumir, por lo que si lo sobrepasamos nuestro sitio quedará inaccesible temporalmente. Se puede explicar lo que es ancho de banda de manera rápido definiéndolo como la cantidad de información en bytes que podemos cargar en ese sitio (cada vez que se visita una página web, se produce la descarga de los contenidos que se van a mostrar al caché) Es importante recalcar que siguiendo siguiendo los pasos descritos descritos anteriormente crearíamos una página web estática; no obstante, a la hora de desarrollar una página web dinámica se siguen las mismas pautas exceptuando la creación de scripts que pueden ser embebidos dentro del mismo código HTML. Estos scripts son interpretados por un servidor web, que proporciona como respuesta un documento distinto dependiendo de la petición. El documento devuelto muestra u oculta determinadas zonas de código HTML dependiendo dependiendo de las condiciones impuestas en el código PHP, mostrándose así en el navegador una información u otra. Una vez realizada la página web, podemos encontrar el problema de que ésta no es visualizada en todos los navegadores de la misma forma. Si la has desarrollado cumpliendo a la perfección con los estándares y ha sido validada por el W3C, el problema no es tuyo, sino de cómo interpreta el navegador de turno el código que le has proporcionado. De los navegadores más populares en la actualidad (2008), la mayoría cumple más o menos con los estándares y los que no lo hacen trabajan en ello. El que más problemas a la hora de respetar los estándares web ha sido el navegador Internet Explorer de Microsoft. Tras la “ Guerra de Navegadores ” Microsoft impuso muchas de sus extensiones propietarias sobre las existentes del W3C, causando que la mayoría de los desarrolladores tuvieran que crear sitios web para Internet Explorer de manera exclusiva, lo que fue devastador para las alternativas existentes (Netscape). Tras los diferentes problemas de seguridad que ha ido sufriendo IE estos últimos años, han surgido diferentes alternativas basadas en Netscape ( Mozilla, Firefox, etc.) y el navegador Opera. Estos últimos son más respetuosos con los estándares, y, debido a que estaban ganándole terreno al navegador del gigante de Redmond, la última versión de Internet Explorer promete cumplir los estándares en mayor medida. Un documento web debe ser creado de una forma que sea independiente del medio donde vaya ser mostrado, y no dependiente del programa que lo ha generado, si se ha ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

4


usado un editor web. También debe mostrar el contenido separado del estilo, usándose el código HTML para organizar la información y las hojas de estilo para determinar la forma en que ésta va a ser mostrada. Al mantener una parte independiente de la otra, conseguimos acercarnos al concepto de web semántica y, entre otras cosas, aplicar diferentes modos de visualización según el medio (ordenador, teléfono móvil, impresora, etc.) o cambiar todos los colores y formas de una página web cambiando solamente la hoja de estilo. Para que nuestra página web sea universalmente accesible, además de cumplir los estándares, debe ser accesible, lo que está estrechamente ligado con el concepto de usabilidad. Cuando conseguimos que un sitio sea accesible, favorecemos que nuestros contenidos sean disfrutados por todo clase de personas, sin importar su nivel de discapacidad mental o física. Sin duda, aparte de la importancia que tiene que un sitio web cumpla con una serie de requisitos que lo hagan universal, lo fundamental es que la información esté organizada correctamente y que el estilo visual implementado sea, además de atractivo, cómodo para el usuario final del sitio. Más adelante se mostrarán los errores más comunes a la hora de diseñar e implementar un sitio web, y las posibles maneras de corregirlos. Todo para llegar a ser un u n webmaster. webmaster. Comenzamos.

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

5


LA RED DE REDES_ Internet se erige como un poderoso competidor de los medios de comunicación tradicionales, como la televisión, el cine o el teléfono, al abrir un abanico enorme de posibilidades a los usuarios. Un navegante puede decidir en cada momento qué leer, qué ver o escuchar haciendo unos pocos clics, centrando su atención en lo que realmente le interesa y obviando aquello que no le llama la atención. Esto ofrece una increíble libertad al usuario que los medios de comunicación tradicionales no permiten. Por ejemplo, una persona puede tener unas convicciones políticas distintas a las defendidas por los medios de comunicación de masas, y por ello no verse identificado con ninguna de las opiniones vertidas. Al poder tener acceso a una red global como es Internet, esta persona puede visitar un sitio web que le provea con información acorde a su ideología, sintiéndose de esa manera informado de manera veraz. O por ejemplo, cualquier grupo de música que no cuente con el beneplácito de una multinacional discográfica, puede colgar su disco en Internet usando cualquiera de las licencias disponibles y así sea escuchado por la comunidad. El mayor poder de Internet no es sólo la posibilidad de disponer de casi cualquier contenido en cualquier momento, sino el brindar la oportunidad de que cualquier persona anónima pueda mostrarse a todo el mundo con facilidad, quedándole la sensación de que entre tantas opiniones su voz también puede ser escuchada. Pero no todo el mundo sabe con exactitud qué es Internet. Internet, de manera sencilla, se define como un conjunto de redes de ordenadores descentralizadas que se comunican entre ellas de manera rápida y sencilla. Estas redes están compuestas por una multiplicidad de computadores que comparten información entre sí a través de diferentes protocolos TCP/IP (TCP, IP, HTTP (HyperText Transfer Protocol ), ), etc.) comportándose en la práctica como una sola red de alcance mundial. Hay que evitar asociar únicamente a Internet con la World Wide Web, cuando ésta última sólo es un servicio más de la red de redes. Además de la ya mencionada WWW, encontramos otros servicios como: • • • • •

Transferencia Transferencia de archivos (protocolo FTP) Correo electrónico (protocolos POP y SMTP) Chat online (IRC) Mensajería instantánea etc.

Todo comenzó en 1969, cuando se realizó la primera conexión entre universidades de California (EE.UU.) en lo que venía a ser una implementación práctica de estudios anteriores llevados a cabo en los años 50 del siglo XX. Esta red sería conocida como ARPANET hasta su desaparición en 1989. Surgieron diferentes redes y se desarrollaron nuevos protocolos de comunicación hasta que apareció la red NSFNET. Surgieron diferentes redes a gran escala a lo largo y ancho del mundo que interconectadas entre sí ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

6


han dado lugar a la que hoy conocemos como la red de redes, Internet. Al principio tener conexión a esta red era algo que estaba al alcance de muy pocos, pero con el paso del tiempo, la mejora de los protocolos, el abaratamiento de los costes de mantenimiento y la aparición de proveedores de acceso privados ( ISP) han hecho accesible Internet a la mayoría del público, llegando a ser el fenómeno que es hoy en día. Sin embargo, no es hasta 1989 cuando aparece la WWW, o web, a pesar de ser uno de Berners-Lee y su equipo, los servicios más conocidos. La web nace de la mente de Tim Berners-Lee equipo, en el CERN (Centro Europeo de Investigación Nuclear), cuando pensaban en una manera de hacer fácilmente accesible la información del CERN usando hipertexto. Así surgió el lenguaje HTML, el protocolo HTTP y el URL (surgiendo después el URI), que es una forma de localizar recursos en Internet. A continuación el grupo alumbró el primer navegador web de la historia, llamado precisamente WorldWideweb (posteriormente renombrado como Nexus), y construyó el primer servidor web de la historia usando una computadora NEXTcube. Con el tiempo el número de servidores web aumentó, así también el número de navegadores web (Netscape, Internet Explorer, etc.) y el número de personas que usaban la web. Es en 1994 cuando nace el World Wide Web Consortium (W3C) para encargarse de aprobar estándares y defender el uso de los mismos hasta hoy día. La guerra de navegadores, el surgimiento de nuevos estándares y tecnologías, la hegemonía de Google en el campo de los motores de búsqueda y alguno que otro más (visionado de vídeo online , publicidad,etc.) y el auge de los sistemas de blogging no hacen sino demostrar que Internet, la web y el resto de sus servicios ocupan un lugar importante en nuestra sociedad.

LA WEB: FUNCIONAMIENTO_ Como bien se ha dicho, la WWW o Web se define como un sistema de documentos de hipertexto (enlazados entre sí) los cuales son accedidos desde un navegador web de un equipo conectado a la red Internet. Los pilares fundamentales de la web son el protocolo HTTP, los identificadores uniformes de recursos o URLs y el hipertexto, normalmente puerto 80, una manera sencilla de HTML. El HTTP proporciona, normalmente a través del puerto enviar datos en Internet permitiendo que los servidores funcionen de una manera más simple y que éstos, aunque tengan poca capacidad de procesamiento, puedan atender miles de peticiones. Existe una variante del HTTP, el HTTPS, que utiliza un protocolo para hacer las conexiones servidor-cliente más seguras. Los URLs, por su parte, asocian una dirección única a un recurso existente en Internet, facilitando así que éste sea encontrado; así, el hipertexto, muestra una información enlazándola con otra relacionada mediante el uso de hipervínculos o referencias. El HTML es un lenguaje de marcas que permite


7


componer y estructurar información enlazada con una simplicidad bastante grande y una eficiencia muy alta. La navegación por la web normalmente comienza tecleando el URL de la página web que se quiere visitar en la barra de direcciones del navegador, o por medio de un enlace pulsado que apunte a ese recurso. Luego, tras t ras varias comunicaciones, se traduce la URL en una dirección IP buscando su correspondencia en un servidor DNS, ya que se hace necesaria la dirección IP del servidor para poder empezar a hacerle peticiones HTTP, sean éstas de tipo GET (parámetros incluidos en la URL) o de tipo POST (parámetros incluidos en la petición). Tras las peticiones oportunas, se obtienen los recursos requeridos (texto HTML, gráficos, etc.) y el navegador se encarga de formar la página web siguiendo las especificaciones del código HTML, el CSS u otro, produciéndose al final del todo la página que va a ver el usuario. El contenido visualizado normalmente se almacena en el disco duro del usuario para acelerar la carga la siguiente vez que se visite esa página, reduciendo el tráfico en la red. A esto se le llama guardar una página en caché. A la hora de recibir respuesta, el servidor puede indicarnos el estado de nuestra petición, y para ello usa uno de los siguientes valores:

• 1XX indica que la petición está siendo procesada. • 2XX la petición ha sido procesada. • 3XX la petición enviada debe ser repetida o redirigida. i ncorrecta, no se encuentra, etc. • 4XX ha ocurrido un error porque la petición es incorrecta, servidor, por lo que la petición puede ser correcta. • 5XX ha tenido lugar un error en el servidor, Los distintos hiperenlaces que podemos encontrar en una página web pueden llevarnos, además de a otro documento relacionado, a diferentes recursos web, como pueden ser descargas, contenido multimedia, etc.

TIPOS DE PÁGINAS P ÁGINAS WEB: ESTÁTICAS Y DINÁMICAS_ Al principio de los tiempos de Internet, todas las páginas web que existían eran estáticas; es decir, toda la información que contenían podía ser consulta y/o descargada, pero no se podía interactuar con ella. Las páginas web se realizaban enteramente en código HTML y el formato se aplicaba en el mismo código o ya separado cuando aparecieron las hojas de estilo. En respuesta a esta falta de interactividad, surgieron diferentes formas de aportar dinamismo a una página web: el HTML dinámico o DHTML, el uso de CGI (Common Gateway Interface ) y diferentes lenguajes de programación interpretados del lado del ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

8


servidor (PHP, ASP, etc.). Así, el contenido de una página web podría verse modificado atendiendo a las peticiones realizadas por el cliente. Hay que tener claro que las tecnologías mostradas anteriormente, aunque aporten dinamismo, no funciona de la misma forma ni poseen las mismas posibilidades. El DHTML no es más que HTML, hojas de estilo CSS y un lenguaje de programación interpretado del lado del cliente (normalmente, Javascript), embebido en el propio documento HTML, que ayuda a cambiar el aspecto y/o la información contenida en una página dependiendo de las acciones llevadas a cabo por el usuario. Se ejecuta en el navegador, por lo que no requiere del servidor para aportarle interactividad. Es ampliamente usado para la elaboración de menús desplegables, imágenes que cambian al poner el ratón sobre ellas, etc. La tecnología CGI, sin embargo, depende de la información pasada entre el cliente y el servidor para mostrar diferentes contenidos, generados a partir de la petición realizada. El servidor web, atendiendo a la petición recibida, ejecuta un programa determinado y ofrece la respuesta a través de una página web. Los CGI se siguen usando ampliamente hoy en día, debido a su sencillez y versatilidad a la hora de elegir lenguaje para desarrollarlos (Python, Perl, etc.); no obstante, poseen un problema importante: su ejecución, en ocasiones, produce una carga importante para el servidor, y ni que decir tiene los problemas que esto conlleva si existen no un CGI, sino varios. Por ello, se buscaron diferentes alternativas, siendo una de ellas el uso de lenguajes de programación interpretados del lado del servidor. Se instala un intérprete de un lenguaje de programación de este tipo en el servidor web, lo que posibilita que se incluya el código en la misma página web, para que posteriormente el servidor la interprete y la muestre, reduciendo el tiempo de respuesta y liberando al servidor de carga. Entre los lenguajes de programación interpretados del lado del servidor, el más exitoso ha sido PHP, PHP, debido principalmente al parecido de su sintaxis a la de C y a que sea software libre. El código PHP puede ser incrustado dentro del propio código HTML, es fácil de aprender y a la vez muy potente. Es de propósito general y está orientado principalmente al desarrollo de páginas web.


9


LENGUAJES DE MARCADO_ Antes de todo, es preciso definir que es un lenguaje de marcado o de marcas. Un lenguaje de marcado es una forma de codificar un documento de manera que el texto lleva además asociado una serie de marcas que informan de la forma en la que éste debe ser estructurado o presentado. No pueden considerarse como lenguajes de programación, ya que no poseen ningún tipo de función aritmética ni variable. Se llevan usando desde hace mucho tiempo, pero hoy día han tomado de nuevo especial relevancia debido al auge experimentado por el lenguaje de marcas más extendido de todos: el HTML. Los lenguajes de marcado presentan una serie de características que los hacen bastante interesantes: 1. Gene Genera rann docu docume ment ntos os en en texto plano, es decir, son independientes del sistema operativo y pueden ser entendidos y editados con sólo un editor de texto. 2. Las etiquet etiquetas as de marcado marcado van van junto junto al contenido. contenido. 3. Se proce procesan san con con mayo mayorr facilid facilidad. ad. 4. Son muy flexibles flexibles,, ya que son utilizados utilizados tanto tanto con texto texto como con con gráficos, gráficos, por ejemplo, y pueden ser combinados entre sí ( XML + HTML = XHTML ). En estos lenguajes encontramos diferentes tipos de marcado, según el propósito, aunque estos pueden combinarse en un mismo documento. En este manual nos centraremos en el marcado descriptivo o semántico. En el marcado descriptivo se usan las etiquetas para definir fragmentos de texto, sin especificar de la forma en que debe ser representados ni cuando. Gracias a la flexibilidad de estos lenguajes, los fragmentos de texto etiquetados pueden usarse para cosas distintas de las previstas cuando se crearon: por ejemplo, una etiqueta que sirva para poner énfasis en una porción de texto puede ser redefinida para que muestre ese mismo texto en cursiva, sin cambiar la etiqueta, cambiando lo que hace la misma mediante hojas de estilo. Los lenguajes de marcado se generalizaron tras la creación por parte de IBM del GML (Generalized Mark-up Language ). ). Más tarde, tras la inclusión de diferentes ideas de diversas fuentes, se publicó el Standard Generalized Mark-up Language o SGML por parte de la Organización Internacional de Estándares. El SGML es un metalenguaje , es decir, permite que se definan nuevos lenguajes a partir de él. Además, define cómo deben escribirse las etiquetas a utilizar y controla las etiquetas que pueden escribirse y dónde


10


mediante el DTD (Document Type Definition ). ). El SGML fue clave para el desarrollo de lenguajes posteriores, debido a su potencia y flexibilidad. El SGML, aunque se sigue usando hoy en día, ha perdido popularidad en favor de otros lenguajes derivados de él. Bajo el auspicio del W3C, se desarrollaron dos lenguajes basados en SGML orientados a la publicación en web uno (HTML) y al tratamiento de documentos a gran escala (XML), aunque este último desempeña un papel muy importante a la hora de intercambiar datos en la web. En este manual nos centraremos en el HTML, abordando su uso, características y definiendo su sintaxis.

HTML_ El lenguaje HTML es un lenguaje de marcas que genera un tipo especial de documentos de texto (hipertexto) que son usados por los navegadores web para presentar texto, imágenes y otro tipo de contenido. No es el único lenguaje para crear documentos hipertexto, pero si es el más ampliamente usado todavía. Los documentos generados poseen la extensión .htm o .html. Los documentos HTML son generados generados en texto plano, mientras que toda la estructura estructur a y el formato propio del documento se establece mediante el uso de diferentes etiquetas en determinadas zonas del texto. Estas etiquetas pueden ser de diferentes tipos: de marcado estructural y de marcado presentacional presentacional. El primero define la forma en la que va a ser posicionado el texto y su función dentro del documento; en cambio, el marcado presentacional describe el formato que va a poseer el texto, sin tener en cuenta su papel dentro del documento. Como etiquetas de marcado estructural, encontramos las etiquetas de encabezado y la de párrafo, y como ejemplo de etiquetas presentacionales tenemos las que muestran el texto en negrita, en itálica o cursiva o las que muestran el texto preformateado. Muchas de las etiquetas de marcado presentacional han caído en desuso en favor de las hojas de estilo. Las etiquetas en HTML, al contrario de lo que pasa en otros lenguajes de marcado, están definidas de antemano por el DTD que lleven asociado. Toda etiqueta de inicio de marcado se compone de un carácter <, a continuación el nombre de la etiqueta, los atributos que lleve asociados (si los lleva), y finaliza con el carácter >, tal que así:


11


La etiqueta de final de marcado se forma con un carácter <, la barra /, el nombre de la etiqueta y el carácter > para finalizar:

Las etiquetas pueden ir en mayúscula o en minúscula, pero es recomendable acostumbrarse a escribir el nombre de las etiquetas en minúscula para que tengamos menos dificultades a la hora de aprender XHTML. Además, algunas etiquetas pueden anidarse dentro de otras. Como ejemplo, se muestra el uso de la etiqueta que, aunque se desaconseja su utilización en favor de estilos CSS, sirve a la perfección para ilustrar este ejemplo. Tenemos un texto determinado: Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

Si queremos, por ejemplo, que la frase se mostrara con un tipo de letra ʻArialʼ y un tamaño de 14px, tendríamos que escribir los siguiente en código HTML: Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

Una vez aplicado el marcado sobre la porción de texto, en el navegador veríamos la frase así: Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

En HTML se permite cierta flexibilidad a la hora de definir los atributos y escribir las etiquetas de cierre. Los valores de los atributos en HTML pueden ir entrecomillados o no, y en cuanto a las etiquetas de cierre, HTML permite que no se cierren etiquetas que no necesitan envolver ningún texto entre ellas, como la etiqueta de , que se usa para insertar imágenes. No obstante, se recomienda que se entrecomillen los atributos y se cierren todas las etiquetas para encontrar menos problemas al hacer el cambio a XHTML. A pesar de lo expuesto antes, también existen etiquetas que no poseen cierre, como la etiqueta de salto de línea (
), la que muestra una barra separadora horizontal (
) o la utilizada para poner una imagen ( ).


12


Comenzamos a definir la estructura típica de un documento HTML y la sintaxis del lenguaje.

DTD Lo primero de todo, es elegir el DTD (Definición de Tipo de Documento) adecuado. El DTD es una definición de la estructura y los elementos que debe llevar un documento, que permite que éstos puedan ser validados y que todos los documentos que lleven asociados ese DTD DTD usen un formato común. Presenta algunas desventa desventa jas que han impulsado la creación creación de XML Schema, pero a pesar de todo es ampliamente ampliam ente usado y aceptado. Existen diferentes tipos de DTD. Están orientados a diferentes lenguajes (XML, HTML, etc.), a diferentes tipos de arquitectura de la información (DTD para frames), y se distribuyen según el el nivel de “relajación” que desee el desarrollador a la hora de hacer una página. Para HTML 4 (la versión actual) se definen los siguientes DTDs: • DTD estricto (strict )

• DTD transicional (transitional )

• DTD con uso de frames (frameset )

La diferencia entre el DTD estricto y el transicional es que el primero es más escrupuloso a la hora de aceptar determinados atributos que no se encuentren completamente definidos en HTML 4, mientras el segundo da una mayor flexibilidad. El DTD con uso de frames está definido para eso mismo, para usar un conjunto de frames en una página web. Se explicarán en detalle los frames más adelante.


13


Estructura de un documento Una vez definido el DTD, es importante destacar que todo el documento HTML tiene que ir contenido entre las etiquetas y . Dentro de estas etiquetas, el documento se encuentra dividido en dos partes: una cabecera y un cuerpo. • Cabecera: comprendida entre las etiquetas y . Contiene etiquetas meta (determinan el tipo de contenido y son útiles para buscadores,

puesto que contienen las características del documento, como las palabras clave (keywords )), )), el título de la página web (contenido entre las etiquetas y ), una dirección base y, en ocasiones, scripts y definición de estilos

(mediante las etiquetas <script>,

Examinando los estilos aplicados, vemos que se ha configurado el azul como color de fondo de todo el documento, el tipo de letra se ha establecido como ʻArialʼ y el color de la misma como rojo (todo aplicado al elemento de cuerpo ), además de eliminarse el subrayado de los enlaces (aplicado al elemento ). El texto contenido entre /* y */ es un comentario, que será ignorado por el navegador. Esta forma de aplicar el CSS es, no obstante, mejor que la anterior, pero aún así presenta la dificultad de tener que copiar y pegar el estilo a todas las páginas a las que se le quiera aplicar el mismo. Resulta útil para aplicar un estilo determinado a una página en particular. Si lo que se pretende es conseguir que una serie de páginas compartan unos estilos, la mejor solución es la siguiente.


42


• Mediante una hoja de estilo externa: es la forma más potente de trabajar con hojas de estilo. Permite separar completamente la presentación del contenido en un documento HTML facilitando, además, su mantenimiento y asegurando una cierta uniformidad presentacional en un sitio web. El fichero CSS, que se encuentra en un documento aparte, puede ser referenciado desde HTML usando el elemento , el cual posee una serie de atributos: rel indica la naturaleza del documento que se enlaza (para hojas de estilo, stylesheet ) href establece la URL del documento enlazado type define el tipo del archivo (text/css para CSS) media asocia la hoja de estilo a un medio de visualización

Veamos un ejemplo de uso del elemento :

El documento enlazado es una hoja de estilo, de nombre ʻprintableʼ y situada en el mismo directorio que el documento, de tipo CSS y establecida como hoja de estilo a usar en caso de que el usuario pretenda imprimir la página. Si hay varias hojas de estilo externas se pueden definir hojas, unas como alternativas, una como persistente y una como favorita. Definidas las formas de aplicar los estilos, pasemos a dar una introducción a lo que es el formato de los estilos en sí. Siguiendo la sintaxis de CSS, la forma de la instrucción en el lenguaje de hojas de estilo en cascada es la siguiente, teniendo presente que este lenguaje es case sensitive , es decir, sensible a mayúsculas y minúsculas: { : ; }

Dentro de las llaves pueden ponerse tantos atributos con su respectivo valor como se necesite. Poniendo, como ejemplo, el caso siguiente, donde queremos que el color del texto de los párrafos de una página sea rojo: p { color : red; }

párrafos del Recordemos que esta instrucción pondría de color rojo el texto de todos los párrafos documento sin excepción, ya que aplicamos el estilo a todo el contenido del elemento ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

43


. Para poder determinar un estilo que sea aplicado sólo a las partes del documento

que nosotros queramos, se crearon las clases. Su definición en CSS es como sigue: .nombredelaclase { : ; }

En ʻnombredelaclaseʼ ponemos un nombre que identifique la función que tiene dicha clase. Como ejemplo práctico, crearemos la clase .importante, que pondrá las letras del texto sobre el que se aplique en mayúsculas: .importante { text-transform: uppercase; }

Ahora, para aplicar la clase a una porción de nuestro documento, tenemos que usar el atributo class que poseen los elementos de HTML. Así, si queremos que un párrafo aparezca con el formato definido en la clase .importante (dejando a otros párrafos sin formatear), tenemos que escribir la etiqueta del párrafo así:
A continuación, alguien dijo:

¡Tienen un Troll de las Cavernas!

Las clases pueden aplicarse a todos los elementos que se quiera y tantas veces como se necesite. Sin embargo, sería interesante que existiera un método para asignar un estilo único a elementos individuales, para asegurarnos que serán diferentes de los demás. Para ello se usa el atributo de identificación id, que asigna un nombre único a un elemento. El formato de instrucción para aplicar formato a los identificadores en CSS es este: #nombredeindentificador { : ; }

Si queremos definir un párrafo diferenciado de los demás (en mayúsculas) pero queremos que el estilo sea aplicado solamente a ese párrafo, crearíamos la identidad #importante : #importante { text-transform: uppercase; }

Aplicado en el texto anterior, quedaría algo así:
A continuación, alguien dijo:

¡Tienen un Troll de las Cavernas!

El resultado en el navegador sería el mismo que antes, con la diferencia de que sabemos con seguridad que ese estilo no puede ser aplicado a ningún otro párrafo del documento. ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

44


Cabe destacar, además, que se pueden aplicar de manera simultánea clases e identidades a un mismo elemento HTML. Los diferentes tipos de selectores y la herencia no serán tratadas en esta ocasión por superar los objetivos que tiene este manual.

Aplicando estilos a bloques de texto y contenido Sabemos que con los elementos
y podemos agrupar bloques de contenido y texto respectivamente (a diferencia de
, no produce saltos de párrafo). Así, podemos encerrar contenido que tenga las mismas características dentro del elemento
y, al aplicarle a éste una identidad o clase, se verá afectado por igual lo que se encuentre en su interior, ocurriendo exactamente lo mismo con el texto situado entre las etiquetas y . Creamos la identidad #centrado y la clase .destacado para ilustrar lo comentado: #centrado {

/* identidad centrado */

text-align: center;

/* centro el texto */

} .destacado {

/* clase destacado */

color: red; /* texto en color rojo */ }

A continuación, aplicamos los estilos sobre los elementos
y :
Cruzaron el río Isen en la pascua de Verano, vestidos de Jinetes Negros.


45


Modelo de caja

Los contenidos cuya presentación ha sido establecida usando CSS se distribuyen en “cajas” a lo largo y ancho de la pantalla. Para entenderlo correctamente, nada mejor que mostrar un gráfico definiendo todas y cada de las particularidades de este modelo:

Todas las partes que ahí se muestran pueden ser tratadas mediante las propiedades CSS. Pasamos a definir algunas de ellas: • Borde (propiedad border) es el marco que rodea al contenido (borde interior) y al relleno (exterior) • Margen (propiedad margin ) determina la distancia desde el borde al resto de las cajas de alrededor • Relleno (propiedad padding) se refiere a la distancia que existe entre el contenido y el borde (exterior)


46


Explicado brevemente el modelo de cajas, pasamos a comentar algunas de las propiedades CSS más utilizadas.

Algunas propiedades CSS Es importante explicar como se trabaja con las propiedades CSS. Una propiedad general, como background , puede modificar todos los aspectos de un fondo, simplemente poniendo uno detrás de otro todos los valores. Sin embargo, si se quiere cambiar sólo uno de esos valores, se puede acceder directamente a él. Así, puedo establecer simplemente un color de fondo modificando la propiedad background-color directamente, o definir el color en la propiedad background omitiendo los demás valores (ya que background-color está contenida en background ) Algunas propiedades:

• background (background-color , background-image , etc.) Permite modificar el área del contenido y del relleno poniendo un color de fondo, una imagen, etc. La URL de la imagen i magen a mostrar debe ser de la forma url(fondo.gif) , pudiendo variar la ruta o el formato del gráfico

• color Establece un color para el texto. Los colores pueden estar definidos por un nombre (blue, red, cyan, etc.) o por un valor hexadecimal ( #000000 por ejemplo)

• list-style Para cambiar el marcador de un elemento de lista. Los valores posibles son none (deshabilita el marcador), disc, decimal, circle, square, etc. o una URL de una imagen margin margin-top margin-right margin-left ( , margin-right margin-bottom , margin-bottom , margin-left ) • margin

Determina la distancia entre el borde de una caja y las cajas adyacentes. Los valores posibles son: porcentaje, tamaño o auto. Si se escribe margin: 0; se asignará margen cero a todos los lados. Sin embargo, se pueden definir los márgenes dos a dos o de uno en uno . Si se escribe margin: 0 auto; el cero se asignará a los márgenes de arriba y abajo mientras los márgenes laterales serán automáticos. En cambio, si se escribe margin: 0 10px 2px 0; se asignarán los valores a los márgenes según orden horario ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

47


• padding (padding-top , padding-right , padding-bottom , paddingleft)

Determina la distancia entre el borde del contenido de una caja y el borde exterior. Los valores posibles son: porcentaje, tamaño o auto. Asignar valores a los rellenos se hace de la misma forma que con los márgenes

• border (border-top , border-top-width , border-left-style , etc.) Permite modificar el formato del borde, modificando su anchura ( border-width ), su estilo (border-style ) o su color ( border-color ) width • width

Establece un ancho del bloque en valor absoluto, porcentaje o un valor automático (auto)

• height Establece un alto del bloque en valor absoluto, porcentaje o un valor automático (auto)

• float y clear La primera posiciona un bloque (caja) a izquierda ( left), derecha ( right) o ninguno (none) dentro del flujo mientras la propiedad clear indica si pueden situarse elementos respecto al actual (valores left, right, both (a ambos lados) o none)

• font (font-family , font-size , font-weight , font-style ) Esta propiedad define un tipo de letra genérica o un conjunto de fuentes separadas por comas, un tamaño del tipo de letra (con valores predefinidos o numéricos elegidos por el desarrollador), un grosor (negrita, más negrita, etc.) y un estilo (cursiva, mayúsculas pequeñas, etc.)

• line-height Define el interlineado en porcentaje o valor numérico ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

48


• vertical-align Alinea verticalmente el texto (valores top middle , middle, bottom , etc.)

• text (text-align , text-indent , text-decoration , text-transform ) La propiedad text formatea el texto. La primera de las propiedades, textalign, alinea el texto horizontalmente, la segunda produce un sangrado en la primera línea del texto, la tercera trata la decoración del texto ( underline (subrayado), blink (parpadeante), etc.) y la última modifica el texto, poniéndolo en mayúsculas (uppercase ), en minúscula (lowercase ), etc.

Posicionamiento En CSS existen tres modos de posicionamiento: flotante (tratado con las propiedades float y clear), relativo y absoluto. El posicionamiento determina la manera en la que van a estar las cajas situadas en nuestra página, si es dentro del flujo normal o fuera de él. Cuando una caja se encuentra fuera del flujo normal, pudiendo ser posicionada como se desee, se dice que está situada de manera absoluta. No se tratará el posicionamiento ni las peculiaridades de las capas en este manual.

OTRAS TECNOLOGÍAS_ Durante un tiempo, la forma que existía de hacer páginas web era usando únicamente HTML, por lo que sólo se generaban páginas web estáticas, por lo que no existía interactividad entre el usuario y el sitio. Con el paso del tiempo, el mundo fue testigo de numerosos avances en el campo de las tecnologías web; a veces por iniciativa del W3C, otras veces por iniciativa privada, se iban desarrollando nuevas formas de implementar tecnologías que propiciaron el cambio en la naturaleza de la web misma: se pasó de un contenido “muerto” a contenido dinámico e interactivo. Primero hizo su aparición el DHTML ( Dinamic HTML), que pretendía mejorar la experiencia de navegación del usuario utilizando una combinación de HTML, Javascript, CSS y jerarquía de objetos ( DOM). En una página hecha en DHTML el HTML aporta el contenido, el CSS el formato de presentación de éste, el lenguaje Javascript ejecuta scripts del lado del cliente (navegador) mediante un intérprete para cambiar el HTML del ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

49


documento y el DOM ofrece una estructura del documento para poder manipular las partes de un fichero HTML como si de objetos se trataran. Javascript (ECMAScript) es un lenguaje interpretado orientado a objetos estrechamente ligado a la web desde su nacimiento. Fue inventado por la empresa Netscape con una sintaxis muy parecida a la de Java. Era y es usado todavía para dotar de dinamismo a una página web, sirviendo usualmente para generar menús desplegables, generar movimiento en un texto, mostrar mensajes de alerta y otras cosas más. A pesar de todas sus funcionalidades, tiene bastantes detractores. Por una parte, se le acusa de aumentar el tráfico de la red y a producir sitios “pesados”. Por otra, hay quien lo acusa de ser susceptible a ser ser usado de manera manera intrusiva y con con fines fines poco poco éticos, éticos, ya ya que es ampliamente utilizado por crackers para inyectar en los equipos de la red código malicioso y así explotar vulnerabilidades. A pesar de todo, ha vuelto a tomar relevancia al formar parte de la técnica de desarrollo web del momento (si no la mejor, la más de actualidad por el boom de la web 2.0), AJAX (Asynchronous Javascript And XML ). Para poder usar Javascript en un documento HTML, es preciso crear una etiqueta meta que avise del tipo de lenguaje de script que se va usar: <meta http-equiv=”Content-Script-Type” content=”JavaScript”>

Posteriormente se puede o embeber el código Javascript en la página mediante el uso de la etiqueta <script> (en la cabecera del documento o en el cuerpo) o enlazar el código escrito en otro archivo mediante la misma etiqueta de esta forma: <script type=”JavaScript” src=”scripts.js”>Script

Ejemplo de un programa en Javascript que muestra una ventana de alerta:
Pulsa

Por su parte, DOM es una API (Application Programming Interface ) (conjunto de funciones y procedimientos de una biblioteca que permiten ser usados por un software) para manipular de manera dinámica el contenido en un lenguaje orientado a objetos como ECMAScript. En un capítulo anterior, al hablar de páginas dinámicas, se mencionaron los CGIs y los lenguajes interpretados del lado del servidor, como PHP y ASP. Un paso más allá van las RIAs o Aplicaciones de Internet Ricas, que buscan llevar la experiencia del usuario del escritorio a la web. Muchas de ellas usan tecnología Adobe Flash, conocida por la generación de películas vistosas que son luego embebidas en páginas web, aportándoles ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

50


un grado más de dinamismo e interactividad. El problema de las películas de Flash es que, al requerir de un plugin para su funcionamiento, no pueden ser visualizadas en todos los navegadores, por lo que hacer una página web enteramente en Flash es hoy día un error si no se proporciona al usuario una alternativa. A pesar de que se generan sitios webs muy llamativos, no cumplen las normas de usabilidad y accesibilidad básicas que todo desarrollador web debería tener en cuenta.

ACCESIBILIDAD, USABILIDAD Y ESTÁNDARES WEB_ Anteriormente se definió brevemente el concepto de accesibilidad y usabilidad. Nos centraremos ahora en profundizar un poco más en el tema, hablando de una rama muy importante de la usabilidad: la accesibilidad web.

Accesibilidad web La accesibilidad web se refiere a la capacidad de acceso que tiene una página web por todos sus usuarios. Una web es accesible si permite que sus contenidos sean disfrutados por una colectividad de personas al margen de que éstas posean algún tipo de discapacidad o algún otro tipo de dificultad derivada del entorno o la tecnología. Por ello, es considerado un elemento fundamental que favorece que cualquier persona pueda tener acceso a la cultura en igualdad de oportunidades. Toda página accesible debe presentar un diseño adecuado para todos. Éste tiene que ser desarrollado de una manera adecuada para que pueda ser usado por el mayor número de personas posible sin necesidad de ser adaptado. Presenta una serie de principios: • • • • • • •

Debe favorecer la igualdad en el uso Debe ser flexible Debe ser simple e intuitivo Debe presentar la información de una manera fácil de percibir Debe ser tolerante a errores Debe minimizar el esfuerzo a realizar Debe presentar una dimensiones apropiadas

Cumplir con los principios expuestos anteriormente nos va a asegurar que nuestro diseño va a ser accesible. Una vez desarrollado y puesto en funcionamiento, el acceso a nuestros contenidos por parte de las personas con algún tipo de discapacidad se va a ver mejorado. Además, disfrutaremos de otras ventajas adicionales, vistas también desde el lado del desarrollador: ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

51


• • • • • • •

El desarrollo se hace más simple Los costes bajan Nuestro sitio es indexado por buscadores de una mejor manera Facilita la interoperabilidad Aumenta la usabilidad (la accesibilidad no es si no una parte de la usabilidad) El acceso a nuestro sitio es mejor El número de usuarios potenciales aumenta

Para crear sitios web accesibles hay que seguir una especificación del W3C, la WCAG 1.0 o “Pautas de Accesibilidad al Contenido en la Web 1.0 ”. Entre las limitaciones que puede presentar un usuario con discapacidad encontramos deficiencias de tipo visual (ceguera total o parcial, daltonismo, etc.), motriz (dificultad para mover las extremidades, etc.), auditivas (sordera total o parcial) o cognitivas, como problemas con la memoria o dislexia. Para poder navegar por la web, usuarios con discapacidades usan diferentes aplicaciones: • Un lector de pantalla con sintetizador de voz para usuarios con problemas visuales • Hardware que convierte el texto en pantalla al lenguaje Braille • Otros programas adaptados según discapacidades: aumentador de pantalla, reconocimiento de voz, etc. Para validar si un sitio web es accesible, existen una serie de herramientas para su comprobación. La más importante de todas en el mundo de habla hispana es el TAW, o Test de Accesibilidad Web. La barra de tarea Web Developer, además de proporcionar herramientas muy útiles para los desarrolladores web, presenta una serie de opciones para evaluar la accesibilidad de un sitio web.

Estándares web Al estar basada la web en una multitud de tecnologías, ninguna de ellas puede pretender cubrir todas y cada una de las necesidades del usuario. Por ello, se hace imprescindible que se controle con qué herramientas se construyen los sitios de manera clara y transparente para asegurar que la web es accesible por todo el mundo. El W3C controla las tecnologías usadas, confirmando algunas como estándares y desestimando otras para que ningún fabricante se haga con el control del monopolio de la web. Así, la existencia de los estándares favorece la existencia de una web universal, y por otra parte asegura que los navegadores que cumplan dichos estándares muestren una página web de ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

52


idéntica idénti ca forma. Las tecnologías recomendadas recomendada s por el W3C como estándares para la web son, entre otras, las siguientes: • • • • •

HTML (XHTML) para la creación de páginas estáticas Hojas de estilo en cascada (CSS) para la presentación DOM como especificación DOM XML para la distribución de información estructurada SVG como especificación para gráficos vectoriales

En muchas ocasiones, el cumplimiento de los estándares es pasado por alto por parte de organizaciones o empresas para imponer a los demás sus propias tecnologías de desarrollo. Esto es algo tristemente conocido por los desarrolladores web, que se ven forzados en ocasiones a hacer sitios web que no cumplen los estándares para que puedan ser visualizados por navegadores poco respetuosos con ellos, como el caso de las versiones de Internet Explorer. En lo que muchos denominan como la enésima aplicación de la técnica Adoptar, Extender, Extinguir (Embrace, Extend, Extinguish en inglés), tras la Guerra de los Navegadores Microsoft consiguió situar a Internet Explorer como el navegador más usado del mundo, al incluirlo en su sistema operativo Microsoft Windows y obligando a los desarrolladores a crear sitios específicos para él, por lo que se fomentó y extendió el uso de sus tecnologías propietarias. Tras el resurgir de Netscape (con su navegador derivado Mozilla) y su posterior aumento de cuota de mercado, todos los navegadores están convergiendo hacia la opinión de que una web estandarizada es la mejor opción con más o menos éxito y en mayor o menor tiempo.

DISEÑO LIMPIO Y POSICIONAMIENT P OSICIONAMIENTO O ÓPTIMO (SEO)_ Cuando nos planteamos comenzar a diseñar un sitio web, debemos tener en cuenta múltiples factores: además de tener una estética apropiada, debe ser funcional y además fácil de actualizar. actualizar. Si un particular o una empresa nos pide realizar su sitio web, se va a centrar en enseñarnos cómo desea que se muestre el sitio y la información que debemos incluir en él. Es decir, el cliente se centra en el diseño (cómo se va a mostrar) y no se preocupa en las tecnologías que vayamos a usar para implementarlo, y mucho menos en el código de nuestros documentos. Por ello, debemos procurar la realización de un sitio web que satisfaga al solicitante, mostrándole un diseño usable y atractivo, mientras ponemos especial atención en las tecnologías usadas (respetando, en la medida de lo posible, los estándares web) y en generar código limpio y adecuado para que sea fácilmente indexado por los motores de búsqueda.


53


Los motores de búsqueda, como Google o Yahoo!, almacenan almacenan información sobre nuestro sitio en sus bases de datos mediante el uso u so de algoritmos de búsqueda. Para conseguir posicionar un sitio en los primeros lugares de resultado se siguen una serie de procesos de optimización (SEO o Search Engine Optimization ), ), estando estrechamente relacionado el lugar donde se posiciona un sitio en la lista de resultados con la presencia y reputación que adquiere éste en la Red. Bien realizado el proceso SEO, se mejora la visibilidad del sitio web por parte de los buscadores facilitando el reconocimiento de los contenidos y aumenta el tráfico dirigido hacia nuestra web. Algunas reglas para mejorar nuestro posicionamiento: • Crear contenido único y de calidad • Dar de alta nuestro sitio en los buscadores más importantes, como Google • Conseguir que te enlacen otras páginas con información relacionada ( sin caer nunca en hacer spam ) • Limitar el contenido flash usado y evitar los frames • Enlazar de manera interna siguiendo una estructura clara y ordenada • Procurar que nuestro código sea lo más indexable posible La importancia de los buscadores es mayor de la que pensamos en principio. Además de poner orden en la web (antes de existir los motores de búsqueda, la web era un poco caótica), se erigen como los grandes canalizadores de tráfico, t ráfico, facilitando enormemente la labor de encontrar un contenido determinado con un par de clics. Cuando construyes tu espacio web es importante que éste sea realizado, además de accesible a los usuarios, accesible a los buscadores. Por ejemplo, si realizas tu sitio web usando únicamente imágenes (incluso para incluir texto) puede llegar a ser visualmente atractivo para los usuarios, aunque no tenga en cuenta la accesibilidad, usabilidad, ni la separación del contenido de la presentación. Sin embargo, cuando un buscador trate de indexar tu página, no va a poder hacerlo de una manera correcta, ya que al estar los contenidos formando parte de imágenes, éstos serán invisibles para el motor de búsqueda. Así, el buscador sólo podrá indexar determinadas parte del código, como los enlaces y el atributo alternativo de cada una de los gráficos. De esa forma, tu sitio no conseguirá un posicionamiento importante. El proceso de indexación por parte de los motores de búsqueda y el funcionamiento general de los mismo excede ampliamente los objetivos de este manual.


54


ALGUNOS ERRORES COMUNES EN EL DISEÑO WEB_ El papel del webmaster es claro: realizar páginas web navegables, navegables , usables, respetar los estándares y presentar un diseño y contenido que satisfagan necesidades. Pero esto no es siempre así. Con la explosión del fenómeno Internet, muchas personas con ganas de mostrar sus actividades al mundo, han aprendido la manera de realizar sitios webs y así formar parte de la Red. La generalización del uso de los programas WYSIWYG ha hecho la tarea de realizar páginas web complejas un poco más asequible y rápida, y la proliferación de manuales de HTML, CSS, etc. han favorecido la existencia de cada vez más usuarios autodidactas. No obstante, estos programas presentan una serie de carencias que, unido a malas prácticas de diseño arrastradas desde hace tiempo por parte de diseñadores y desarrolladores, han hecho de la creación de espacios web algo caótico. A continuación, se presentan una serie de errores que se cometen a la hora de elaborar sitios web bien por desconocimiento desconocimiento bien por malos hábitos:

Uso abusivo de pop-ups Los pop-ups o ventanas emergentes son usados para, en una nueva ventana, mostrar una información determinada. Los pop-ups son usados bastante a menudo para mostrar publicidad, por lo que muchos usuarios tienen instalados en sus navegadores bloqueadores de ventanas emergentes para evitar así el visionado de la misma. Muchos sitios corporativos acostumbran a abrir un pop-up con contenido en flash nada más entrar en su espacio web, lo que es un error importante. No significa esto que el uso de pop-ups sea algo prohibido o desaconsejado; desaconsejado; bien usados, pueden ser harto útiles. Hoy día, con el auge de la web 2.0, hemos asistido al nacimiento de las ventanas emergentes en AJAX, con una nueva estética y un comportamiento nada intrusivo.

Hotlinking El hotlinking es una práctica bastante perjudicial (aunque prácticamente desconocida para el usuario medio), que consiste en usar una imagen en una página web, foro, red social, etc. que se encuentra alojada en el espacio web de un tercero (totalmente ajeno), consumiendo cada vez que se carga la imagen el ancho de banda asignado al mismo. Por ejemplo, si deseamos mostrar una imagen o firma en nuestro perfil de un foro, podemos buscar la imagen, copiar la URL de la misma y pegarla en nuestro perfil, mostrándose cada vez que escribamos un nuevo comentario. Aunque el método es sencillo, esa actividad es bastante dañina para la persona que tiene alojada la imagen en ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

55


su espacio web, ya que cada vez que se muestre nuestra imagen en el foro, se realizará realiza rá una petición al servidor que aloja el sitio del dueño de la imagen, consumiendo su ancho de banda. Si el sitio web de esa persona tiene asignado 20 GB de transferencia mensual por parte de su proveedor de hosting , y la imagen pesa 200KB, cada vez que se realiza una petición a la imagen desde el foro se consumen 200KB de ancho de banda del sitio. Un sitio web importante no notará merma alguna, pero si la imagen enlazada está en una página web modesta, la consecuencia será un alto consumo de ancho de banda por parte del tercero, lo que puede propiciar el cierre de la página. Quizás el afectado por el hotlinking ni siquiera sepa lo que ha ocurrido, pero es cosa nuestra como usuarios y desarrolladores responsables el tema de evitar esta práctica. Las soluciones pasan por alojar las imágenes que vayamos a usar en nuestras páginas en nuestro propio servidor o, en su defecto, si queremos usar una imagen para mostrarla en un foro podemos subir ésta a un servidor dedicado al alojamiento de imágenes, de los que hay muchos en Internet.

Mal uso de los enlaces La creación de enlaces debe seguir ciertas directrices. El contenido al que apunta un enlace debe ser claro para que nuestro visitante sepa con certeza a dónde va a acceder, y abrirse éste en la misma ventana del navegador a ser posible (el usuario es responsable de abrirlo en una ventana nueva si le parece oportuno). Por otra parte, se hace vital revisar los enlaces para ver si hay alguno que apunta a una página que ya no existe existe (enlaces enlaces muertos). Por último, conviene seguir un cierto estilo a la hora de poner enlaces en tu web: el visitante está acostumbrado a que los enlaces sean azules y con un estilo de texto subrayado. A causa de eso, si tus enlaces van a poseer un estilo diferente, deja claro lo que es un enlace y lo que no.

Sobrecarga visual Tus contenidos deberían estar estructurados de la mejor forma posible para evitar que ciertas zonas estén sobrecargadas y otras completamente vacías. Además Además es importante no saturar al visitante con demasiadas imágenes animadas (ni texto parpadeante) para no distraer su atención y causarle cansancio.

Mal uso de las distintas tecnologías Procura no abusar con el uso de nuevas tecnologías en tu sitio web ni mantener algunas obsoletas por comodidad. Además, es conveniente evitar el uso de scripts para el redimensionado de la ventana o para solicitar votos para un ranking.


56


Sobrepeso Otra de las cosas que hay que tener en cuenta a la hora de desarrollar un sitio web es el sobrepeso . Normalmente, los sitios que utilizan estándares web al pie de la letra son menos pesados que otros que no los usan (albergando más o menos el mismo contenido). Cuando hablamos de peso en una página web, nos referimos a la cantidad de bytes que tenemos que descargar desde el servidor para poder visualizarla por completo. El peso es un factor importante a tener en cuenta a la hora de publicar nuestra web en Internet, ya que es un factor que determina el tiempo de carga que va a emplear (a nadie nos gusta tener que esperar medio minuto para poder ver una página). Para evitar que nuestro espacio web sea muy pesado, debemos procurar organizar el contenido, reducir el uso de gráficos en la maquetación en la medida de lo posible y usar estándares web. Aún hecho todo esto, el tiempo de carga puede seguir siendo alto. Si es así, revisar los contenidos externos que se cargan (scripts, banners publicitarios, etc.) y revisar concienzudamente el número de peticiones HTTP que se realizan, por si se estuvieran llevando a cabo más de las estrictamente necesarias.

Deficiente Deficiente arquitectura de la información Todas las zonas de tu sitio web deben ser accesibles desde cualquier parte, por lo que hay que evitar la existencia de ʻcallejones sin salidaʼ y el deshabilitar los botones de navegación delante y atrás. Además, es mejor evitar la utilización de menús desplegables demasiado grandes y estrechos, ya que requieren en ocasiones de una gran destreza para pulsar una de las opciones. Mejor usar menús normales, aunque tengas que poner varios en diferentes zonas de la página.

Esta página está optimizada para... Es un error común. Toda página que realices debe funcionar en cualquier resolución y cualquier navegador. Para ello, se pueden realizar páginas que adapten el contenido a la resolución (líquidas) y si respetando los estándares tu página web no se muestra correctamente en algunos navegadores, usar determinados hacks CSS (qué remedio).

Sitios enteramente en flash Aunque la tecnología flash ofrece una imagen visual increíble, las páginas realizadas usando sólo esa tecnología son poco usables, se posicionan mal y requieren de un plugin para funcionar. Integra películas flash en tu sitio pero sin abusar de ellas, dando la posibilidad de saltarse su reproducción.


57


Música de fondo Poner música de fondo era algo típico en los sitios web de la década de los 90 en el siglo XX. Si eres un nostálgico y aún te apetece compartir tus gustos musicales con el resto de la Red, facilita una manera de que ésta sea parada o pausada. Si no, puedes provocar hastío en el usuario (que no tiene por qué compartir tus mismos gustos musicales) para que acabe, finalmente, abandonando tu página.

Uso de tablas para maquetar Las tablas no deben ser usadas para definir la estructura de un sitio web: eso es labor de las hojas de estilo. Las tablas tienen que ser usadas para lo que están pensadas, tabular una serie de datos relacionados. Con CSS la estructura del sitio puede cambiar sencillamente redefiniendo las propiedades de la hoja de estilo, sin necesidad de modificar el código HTML. Así, damos un paso más en favor de separar el contenido de la forma en la que éste es presentado. Tampoco es adecuado el uso de marcos, ya que no son soportados por algunos navegadores en la actualidad.

Lo principal, el contenido El rey de la web es el contenido. Si tu web carece de información o el texto que hay en ella está insertado en imágenes o películas flash, no será correctamente indexado por los buscadores y tu posicionamiento será nulo o deficiente. Además, ¿qué hacemos con los navegadores de sólo texto?

Colores y fondos adecuados Es importante que los colores y los fondos de pantalla sean los más adecuados para una navegación continuada. Evitar fondos demasiado complejos y colores llamativos.


58



59


LICENCIA_ Este manual posee una licencia libre Creative Commons 2.5, que determina que este trabajo puede ser distribuido, copiado y comunicado públicamente, además de que se pueden generar trabajos derivados de él siempre y cuando se sigan las siguientes condiciones: reconocimiento a la l a autoría de la obra. • Se ha de dar reconocimiento • No se puede utilizar esta obra con fines comerciales • En el caso de realizarse una obra derivada, ésta sólo puede ser distribuida con una licencia igual a ésta

Este manual de Introducción al Diseño Web ha sido realizado por Francisco Javier Dávila Delgado, miembro de la Asociación de Diseño Web Y Seguridad de la Universidad de Cádiz en el año 2008.


Introducción Al Diseño Web

Recommend Documents