Lectura 1 - Que es el Diseo Web

Que es el Diseo Web El diseo web es una actividad que consiste en la planificacin, diseo e implementacin de sitios web y pginas web. No es simplemente una aplicacin del diseo convencional sobre Internet ya que requiere tener en cuenta cuestiones tales como navegabilidad, interactividad, usabilidad, arquitectura de la informacin y la interaccin de medios como el audio, texto, imagen y vdeo. El diseo no es slo la comunicacin textual (contenidos) existentes en Internet de una manera visual, sino que obliga a pensar en una mejor estructuracin de los mismos en este soporte. La unin de un buen diseo con una jerarqua bien elaborada de contenidos aumenta la eficiencia de la web como canal de comunicacin e intercambio de datos, que brinda posibilidades como el contacto directo entre el productor y el consumidor de contenidos, caracterstica destacable del medio Internet. El diseo de pginas Web es una amplia rea de aplicacin del diseo grfico en la cual se integran conocimientos propios del diseo como son la composicin, el uso de color y la tipografa con conocimientos tcnicos del medio como son los lenguajes HTML (HiperText Markup Language) y CSS (Cascading Style Sheets), as como conocimientos sobre usabilidad, accesibilidad y organizacin de un sitio web.
Lectura 2 - Principios generales para el diseo de sitios web (Tognazini, 1999).

Principios generales para el diseo de sitios web 1. Anticipacin: el sitio web debe anticiparse a las necesidades del usuario. 2. Autonoma: los usuarios deben tener el control sobre la aplicacin (entorno abarcable y finito) 3. Los colores: con precaucin. 4. Consistencia: aplicaciones consistentes con las expectativas de los usuarios. 5. Eficiencia del usuario: las aplicaciones deben focalizarse en la productividad del usuario, no de la mquina. 6. Permitir la reversibilidad de la acciones.

7. Ley de Fitts, el tiempo para alcanzar un objetivo est en funcin de la distancia y el tamao del objetivo. Por tanto, usando botones ms grandes y situando los elementos en las esquinas de la pantalla reduciremos el tiempo. 8. Reduccin del tiempo de latencia, es posible optimizar el tiempo disponible permitiendo la realizacin de otras tareas mientras se completa la previa. 9. Aprendizaje: los sitios web deben requerir un mnimo proceso de aprendizaje y deben poder ser usadas desde el primer momento. 10. El uso de metforas, usadas adecuadamente facilitan el aprendizaje de un sitio web, en caso contrario pueden dificultarla. 11. La proteccin del trabajo de los usuarios (que no pierdan su trabajo como consecuencia de un error). 12. Legibilidad: contraste y tamao de las fuentes del texto suficientemente grande. 13. Seguimiento de las acciones del usuario: conocerlo para volverlo al punto que estaba. 14. Interfaz visible: evitar elementos invisibles de navegacin supuestos
Lectura 3 - Qu es HTML

HTML es el lenguaje con el que se definen las pginas web. Bsicamente se trata de un conjunto de etiquetas que sirven para definir la forma en la que presentar el texto y otros elementos de la pgina. El HTML se cre en un principio con objetivos divulgativos. No se pens que la web llegara a ser un rea de ocio con carcter multimedia, de modo que, el HTML se cre sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizaran en un futuro. Sin embargo, pese a esta deficiente planificacin, si que se han ido incorporando modificaciones con el tiempo, estos son los estndares del HTML. Numerosos estndares se han presentado ya. El HTML 4.01 es el ltimo estndar a febrero de 2001. El HTML es un lenguaje de programacin muy fcil de aprender, lo que permite que cualquier persona, aunque no haya programado en la vida pueda enfrentarse a la tarea de crear una web. HTML es fcil y pronto podremos dominar el lenguaje. Ms adelante se conseguirn los resultados profesionales gracias a

nuestras capacidades para el diseo y nuestra vena artista. Una vez conocemos el concepto de HTML nos vamos a adelantar algunas cosas ms. Este lenguaje se escribe en un documento de texto, por eso necesitamos un editor de textos para escribir una pgina web. As pues, el archivo donde est contenido el cdigo HTML es un archivo de texto, con una peculiaridad, que tiene extensin .html o .htm (es indiferente cul utilizar). De modo que cuando programemos en HTML lo haremos con un editor de textos, lo ms sencillo posible y guardaremos nuestros trabajos con extensin .html, por ejemplo mipagina.html Por adelantar un poco cmo se utiliza el HTML nos diremos que el lenguaje consta de etiquetas que tienen esta forma <B> o <P>. Cada etiqueta significa una cosa, por ejemplo <B> significa que se escriba en negrita (bold) o <P> significa un prrafo, <A> es un enlace, etc. Casi todas las etiquetas tienen su correspondiente etiqueta de cierre, que indica que a partir de ese punto no debe de afectar la etiqueta. Por ejemplo </B> se utiliza para indicar que se deje de escribir en negrita. As que el HTML no es ms que una serie de etiquetas que se utilizan para definir la forma o estilo que queremos aplicar a nuestro documento. <B>Esto est en negrita</B>.
Lectura 4 - Editores de HTML

Para las personas que no deseen complicarse la vida con el lenguaje HTML, porque no tengan tiempo de aprenderlo o porque se sientan incapaces de hacerlo, hay una posibilidad distinta a programar directamente el HTML a base de texto. Se trata de utilizar un tipo de programas que nos permiten disear la pgina como si estuviramos escribiendo un documento con un editor del tipo de Word. El editor de HTML es el encargado de vrselas con el lenguaje y programar internamente la pgina con el cdigo HTML segn lo que nosotros estamos diseando. Con el editor HTML podemos colocar imgenes, definir estilos, utilizar negritas o cursivas, etc. sin preocuparnos de las etiquetas correspondientes a cada estilo o elemento. Es el editor el que sabe estas etiquetas y las utiliza convenientemente. Este tipo de editores HTML se denominan habitualmente WYSIWYG (What You See Is What You Get) porque cuando trabajas con ellos lo que ves que ests creando con el editor es lo que obtienes luego cuando grabas la pgina. Existe entre las personas que se dedican a realizar las pginas web dos tendencias. Por un lado tenemos a las personas que prefieren crear las pginas

programando el HTML y por otro las personas que utilizan editores HTML. Algunas diferencias entre hacerlo de un modo u otro son las siguientes. Escribiendo el HTML Dominas con mayor precisin el cdigo de la pgina, queda ms limpio. Si dominas bien el HTML nunca tendrs ningn problema para hacer lo que deseas. Es ms complicado el aprendizaje, ms lento y cuando se llega a un nivel avanzado tambin se hace considerablemente ms difcil Hacer una pgina cuesta ms trabajo y tiempo. Con un editor WYSIWYG El cdigo de la pgina tiene peor calidad, incluso puede llegar a tener errores, ms o menos visibles, que cuestan arreglar. Es la mquina la que domina el trabajo. El aprendizaje es muy sencillo, tal como puede ser trabajar en Word. Solo se trata de manejar un programa ms. Es muy rpido Cada uno debe escoger el camino que ms le convenga o el que le parezca ms atractivo. De todos modos siempre se puede empezar de un modo y luego pasar al otro modo sin ningn tipo de problema. Incluso, por adelantarnos a los acontecimientos, diramos que cuando una persona profundiza en el diseo de pginas web llega un momento en el que le hace falta conocer las dos maneras de construir webs. A los programadores en HTML les har falta aprender un editor porque eso aumentar su productividad y los que utilizan editores necesitarn aprender un poco de HTML para arreglar alguna cosa que el editor ha hecho mal o realizar alguna cosa que el editor no puede hacer. Este manual est escrito por una persona que aprendi a realizar sus primeras webs con el Block de notas y algunas veces puede verse mi mayor inclinacin a escribir el cdigo HTML uno mismo. Aunque mi consejo es aprender HTML, estoy seguro que muchos de vosotros, maestros diseadores, obtendris mejores resultados utilizando un editor HTML WYSIWYG. En el mercado existen multitud de editores de HTML WYSIWYG, es importante elegir un editor bueno porque nuestros trabajos van a depender de sus resultados.

Actualmente el rey de los editores y el que os aconsejaramos sin duda es el dreamweaver, fabricado por Macromedia. Otras posibilidades son editores como GoLive de Adobe o Frontpage de Microsoft, aunque este ltimo lo desaconsejamos.
Lectura 5 - Estructura del sitio

Es importante tambin que pensemos en la estructura de los contenidos de todo el sitio antes de ponernos a disearlo. En este punto tenemos que pensar sobre varias cosas, como las distintas secciones que va a contener el sitio, el rbol de las pginas que vamos a tratar, etc. La manera de que este punto sea realmente til, es preparar todas estas ideas sobre el papel. Con toda la tranquilidad del mundo y con toda la determinacin posible vamos a preparar una serie de diagramas y listados que nos permitan dirigir nuestros esfuerzos de la manera ms ptima. Secciones del sitio: Podremos pensar en qu secciones vamos a poner en el sitio. Una con informacin general, otra con informacin de contacto, otra con una visita grfica a nuestras instalaciones, etc. rbol del sitio: Podemos dibujar en un papel cules son las distintas secciones del sitio, metidas dentro de cuadrados y representar tambin los enlaces que hay entre cada seccin, mediante lneas que unen esos cuadrados. Es algo muy simple y divertido de hacer, adems podemos tener nuevas ideas para el web a medida que lo vamos dibujando. Esquema de una pgina: podemos dibujar en papel tambin una pgina del sitio que vamos a construir, para que veamos donde colocar la barra de navegacin, el logotipo del sitio o la empresa, un posible banner publicitario, etc. Este esquema puede ser tambin de utilidad a la hora de construir las pginas y siempre es ms fcil disear sobre el papel que disear directamente con el ordenador. Estos pasos son opcionales, cualquiera puede ponerse a construir una pgina nada ms decidir que desea tener una web, pero no todo el mundo es capaz de plantearse bien cules son sus objetivos y formar un proyecto con todos los puntos desarrollados de antemano. Los resultados finales son lo ms importante y empezar la casa por el tejado no va a ser lo ms positivo para nuestra pgina y los resultados finales mejorarn si hacemos primero una planificacin.