Principios Básicos de Diseño Web

Presentación del tema: "Principios Básicos de Diseño Web"— Transcripción de la presentación:

1 Principios Básicos de Diseño Web
Noel Buezo Principios Básicos de Diseño Web Conceptos de XHTML

2 Diseño Web Los dos principios básicos del diseño accesible de sitios
Web son crear páginas que se transformen correctamente y ofrecer el contenido de manera comprensible para facilitar la navegación por el sitio Web. Un sitio Web accesible es aquél cuyo contenido puede ser correctamente usado por el mayor número posible de usuarios. Lo más importante para hacer un sitio Web accesible es comprender que la gente accede a la Web de modos muy diferentes. Por tanto, un sitio Web accesible deberá presentar la información de tal manera que los usuarios puedan acceder a ella independientemente del equipo físico y los programas que estén usando, e independientemente de qué capacidades físicas y sensoriales utilicen para interactuar con el ordenador.

3 Declaración de Principios
1.- La velocidad es bella. 2.- Lo simple y sencillo es casi siempre lo mejor. 3.- El contenido manda, el diseño obedece. 4.- Todos somos aprendices. 5.- No existen absolutos, todo es relativo, incluso ésto. 6.- Haz lo que digo, no lo que yo hago (por si acaso).

4 Principios generales del diseño Web
El tamaño del archivo. La dependencia de un lenguaje de marcas, como es el HTML, que se ha quedado a todas luces muy corto. El monitor del ordenador, con sus limitaciones y las diferencias entre marcas. Las múltiples plataformas. La pobre estandarización que hay entre navegadores. Las diferentes versiones de navegadores que aun están vivos en el mercado. Las modas. La necesidad que sienten las empresas de incorporar toda naciente tecnología a su sitio Web. La necesidad de incluir en toda página un sistema de navegación coherente, claro y eficiente. Las diferentes tecnologías que almacenan los servidores, siempre limitadas, que el profesional tiene que tener en cuenta al crear su diseño, para un conocimiento de lo que puede hacer y lo que no. Las diversas conexiones a la red de los particulares, con sus diferentes velocidades y tráfico.

5 Sumario de diseño: Determine a quién est? destinada su página
motive a su audiencia: trátelos con respeto y ofrézcales la posibilidad de comunicación con usted Establezca unos claros objetivos de diseño y cuantificables. Incluya contestaciones, agradecimientos, reacciones y comentarios sobre esfuerzo y el éxito de su página, e incluya textos de ayuda para aquellos que no obtienen la información que esperaban.

6 Sumario de diseño: Contenido
Defina y centre el contenido de su página Web Emplee un lenguaje simple y comprensible para los destinatarios internacionales Fomente el scanning de conceptos importantes Incorpore espacios en blanco priorice su información, como en un resumen.

7 Sumario de diseño: Navegación Simple clara layered (mapa del sitio)
organizada (piense en los "resúmenes" )

8 Sumario de diseño: El desarrollo de una página Web empieza por su texto y la estructura. Después de desarrollar la estructura básica, se debe analizar el contenido de tal forma que podamos decidir que tipo de ilustración queda mejor, si un gráfico o una foto. Principios: elija un fondo y un color de texto de gran contraste sea coherente con el formato del texto: evite los cambios de color evite cursivas (dificultad de lectura ) cambios de color, subrayado (se confunde con los links) evite textos demasiado largos evite los fondos con texturas que no permitan una fácil lectura; use imágenes simples, reducidas (pequeñas) e inmóviles para ilustrar el contenido evítelos gráficos "dancing dogs" que no hacen mas que moverse pero que no aportan ningún contenido los formatos de archivos gráficos son: comprimidos (.jpg) fotografías y dibujos (.gif)

9 Sumario de diseño: La página principal :
debe indicar claramente de qué se trata el sitio. En esta página sitúe el menú de navegación, su logo, y un texto que explique al visitante qué puede encontrar en su sitio web. Su página principal debe ser informativa y debe impulsar a la acción al visitante. La página inicial es el lugar donde el visitante decide qué hará: si pinchar sobre alguno de sus enlaces o abandonar el sitio. Si usted ofrece alguna promoción, descuento o servicio gratuito con el objetivo de hacer contacto con posibles clientes, asegúrese de colocar un enlace a dicho servicio en su página principal.

10

11

12 Sumario de diseño Dar feedback al usuario:
Esto significa proporcionar al usuario la posibilidad de saber q esta ocurriendo dentro del sitio, mediante la implementación de mensaje

13 Sumario de diseño Establecer mecanismos para la administración de un sitio. Implementación de sitios dinámicos(PHP, Rubi, ASP.net) mediante metodologías de desarrollo y herramientas de desarrollo Web. Hacer a los usuarios del sitio, administradores y al mismo tiempo diseñadores del sitio, hacerlos independientes.

14

15

16 Sumario de diseño Proporcionar herramientas o módulos que
faciliten la búsqueda de contenido en nuestra Web, por parte de los usuarios

17

18

19 noel buezo febrero 2006 noel.buezo@gmail.com
CONOCIENDO EL NUEVO MUNDO DEL ORDEN EN LA WEB TABLAS  XHTML  noel buezo febrero 2006

20 XHTML XHTML, acrónimo inglés de eXtensible Hyper Text Markup Language (lenguaje extensible de marcado de hipertexto), es el lenguaje de marcado pensado para sustituir a HTML como estándar para las páginas web. XHTML es la versión XML de HTML, por lo que tiene, básicamente, las mismas funcionalidades, pero cumple las especificaciones, más estrictas, de XML. Su objetivo es avanzar en el proyecto del World Wide Web Consortium de lograr una web semántica, donde la información, y la forma de presentarla estén claramente separadas. En este sentido, XHTML serviría únicamente para transmitir la información que contiene un documento, dejando para hojas de estilo (como las hojas de estilo en cascada) y JavaScript su aspecto y diseño en distintos medios (ordenadores, PDAs, teléfonos móviles, impresoras...).

21 Ventajas Inconvenientes
Las principales ventajas del XHTML sobre otros formatos son: Compatibilidad parcial con navegadores antiguos: la información se visualiza, aunque sin formato. Apuntar que el XHTML 1.0 fue diseñado expresamente para ser mostrado en navegadores que soportan HTML de base. Un mismo documento puede adoptar diseños radicalmente distintos en diferentes aparatos, pudiendo incluso escogerse entre varios diseños para un mismo medio. Facilidad de edición directa del código y de mantenimiento. Formato abierto, compatible con los nuevos estándares que actualmente está desarrollando el W3C como recomendación para futuros agentes de usuario o navegadores. Los documentos escritos conforme a XHTML 1.0 pueden potencialmente presentar mejor rendimiento en las actuales herramientas web que aquellos escritos conforme a HTML. Inconvenientes Algunos navegadores antiguos no son totalmente compatibles con los estándares, lo que hace que las páginas no siempre se muestren correctamente. Esto cada vez es menos problemático, al ir cayendo en desuso. Muchas herramientas de diseño web aún no producen código XHTML correcto.

22 HTML <body bgcolor="#006699"> <p align="left" class="style1">El uso de xhtml es indispensable en estos casos</p> <p align="left" class="style1">Por que de esta forma no repito tanto codigo... <a href="#" class="style2">enlaces</a></p> </body> El uso de xhtml es indispensable en estos casos Por que de esta forma no repito tanto código... enlaces XHTML p{ font-family:Arial, Helvetica, sans-serif; text-align:left; font-size:12px; font-weight:bold} a{ font-family:Arial, Helvetica, sans-serif; color:#3399FF; font-size:12px} body{ background-color: #006699; }

23 Diferencias entre HTML y XHTML
Se eliminan elementos no semánticos: Desaparecen las etiquetas de HTML <font>, <center>. Desaparecen varios atributos de formato. El aspecto del documento se describe únicamente a través de hojas de estilo. Al ser XML, se exige: Incluir siempre la etiqueta "doctype" apropiada. Todas las etiquetas deben cerrarse, aunque sea poniendo una barra "/", como, por ejemplo: <br> pasa a ser <br />. Sólo pueden incluirse datos en formatos admitidos por XML. Esto da problemas para incluir JavaScript en los documentos directamente. Todos los atributos deben tener un valor, y meterlo entre comillas. Además, los nombres y atributos de todas las etiquetas deben estar en minúsculas.

24 Como identificar un documento xhtml
xml:lang="es" xmlns=" <html xml:lang="es" xmlns= <head></head> <body></body> </html> Adjuntando una hoja de estilo en cascada (CSS, Cascading Style Sheets ) <link href="estilo2.css" rel="stylesheet" type="text/css">

25 Estructura de una hoja de estilos
Cada una de las instrucciones de una CSS, se llama regla, existen 2 tipos de regla: Reglas por “id”: estas se llaman desde el documento html y son unicas, es decir en el documento html, solo debe existir un objeto con ese id, ejem: Reglas por “clase”: la diferencia con la regla anterior es que las clases se pueden repetir y esta regla se puede aplicar las veces que sea necesario a cualquier objeto independientemente si ya posee una regla id; ejem: <div id=“noel”></div> <p id="noel" class="resaltado"></p> <p id="edwin" class="resaltado"></p>

26 Sintaxis Para declarar una regla tipo id : #contenido{ top:195px; position:absolute; background-color:#006699} Dentro del documento se sabe entonces que solo se tiene declarado un Objeto llamado contenido. Para declarar una regla tipo class (clase): <div class=“noel" id=“contenido"><p>Esto es una prueba</p></div> Esta misma clase se puede utilizar para diferentes objetos sin importar su declaración de “id”

27 MAQUETACIÓN #lateralizquierda #contenedor #lateralderecha #encabezado
.cajasderecha #cuerpocontenido #cuerpocontenidosuperior .cajasderecha .banner .cajaizquierda #cuerpocontenidoinferior .cajasderecha .cajaizquierda .cajaizquierda

28 MAQUETACIÓN

29 MAQUETACIÓN

30 MAQUETACIÓN: Prueba de espacio del contenido de la pagina Web.

31 MAQUETACIÓN: aplicando gráficos a la maquetación

32 MAQUETACIÓN: aplicando gráficos a la maquetación

33 MAQUETACIÓN: aplicando gráficos a la maquetación

34 MAQUETACIÓN: aplicando gráficos a la maquetación

35 MAQUETACIÓN: aplicando gráficos a la maquetación

36 MAQUETACIÓN: aplicando gráficos a la maquetación

37 MAQUETACIÓN: aplicando gráficos a la maquetación

38 MAQUETACIÓN: Diseño final en versión html, pagina en PHP - XHTML

39