ANEXO 1 Principios de diseño web 1. Diseño Orientado al Usuario Tiene por objetivo la creación de productos que resuelvan las necesidades concretas de sus Usuarios finales, consiguiendo la mayor satisfacción y mejor experiencia de uso posible con el mínimo esfuerzo por su parte. La mayoría de procesos que hacen Diseño Centrado en el Usuario tienen el siguiente esqueleto: Conocer a fondo a los usuarios finales. Diseñar un Producto que resuelva sus necesidades y se ajuste a sus capacidades, expectativas y motivaciones. Poner a prueba los diseñado (test de usuario) 2. Diseño Orientado a Objetivos Se marcan unos Objetivos al comienzo del Proyecto y el diseño se centra en cumplir esos Objetivos. Los objetivos pueden ser de cualquier carácter. Nota: Un diseño orientado a la suscripción de Usuarios, un diseño Orientado a SEO. No tenemos ningún modelo de usuario predefinido intentamos realizar el Diseño pensando en satisfacer un Objetivo marcado inicialmente. 3. Diseño Orientado a la Implementación Es la realización de una aplicación en base, generalmente a unas especificaciones. Programa, componente de Software u otro sistema de cómputo. Nota: previamente a la realización del diseño tenemos unas directrices que debe de cumplir. El diseño tomará como referencia estas directrices sin importarnos a quién se dirige. El proceso de diseño web 1. Estructura de diseño web y navegabilidad. La estructura de una web es muy importante debido a que la forma en que estructures el contenido de tu web será determinante para que los usuarios encuentren o no lo que buscan. Por tanto esta debe facilitar y agilizar al máximo la búsqueda de información de tus visitantes. Al mismo tiempo, también es importante diseñar la estructura de forma que actualizaciones futuras de la web no obliguen a cambiar muchas partes de la página. La navegabilidad es la facilidad con la que un usuario puede desplazarse por todas las páginas que componen un sitio web. Para lograr este objetivo un sitio web debe proporcionar un conjunto de recursos y estrategias de navegación diseñados para conseguir un resultado óptimo en la localización de la información y en la orientación para el usuario. Nota: las barras que te indican el recorrido realizado, el Logotipo que apunta al index de tu página, un buen sistema de estructura con categorías,… 2. Compatibilidad con los navegadores Una premisa muy importante es que para todos los navegadores, los sitios web deben mostrarse correctamente. Nota: cada navegador es de una casa y aunque se está trabajando en la estandarización completa de los diseños hasta la fecha de hoy todavía quedan flecos por solventar. Complementos individuales por navegador, Posición de Capas el efecto Hover de CSS,… 3. Resolución Uno de los grandes problemas a los que nos enfrentamos a la hora de un diseño efectivo en una web es la resolución de la pantalla. El diseño que realicemos debe estar orientado a la presentación óptima de la web ante la posibilidad de usuarios con diferentes resoluciones. ¿Qué es el diseño responsivo? El diseño responsivo es un diseño que responde al tamaño del dispositivo desde el que se está visualizando la web, adaptando las dimensiones del contenido y mostrando los elementos de una forma ordenada y optimizada sea cual sea el soporte. La nueva versión CSS3 incluye entre sus novedades unas directrices que se llaman media queries, cuya función es explicarle al navegador, cómo debe aparecer una página web en los diferentes tamaños de resolución. Por lo general se están estableciendo ahora mismo 3 estándares, móvil (entre 320px y 561px), tablet (561px y 800px) y PC (superior a 800px). ¡Sigo sin enterarme!...bien... Imagínate que tienes un menú en la parte superior en la versión de PC que son 5 pestañas una al lado de la otra, a través de las media queries, le dirás que si la resolución de pantalla es menor de 561px, cómo no van a entrar todas, que ponga las pestañas una debajo de la otra, y que las haga un poco más estrechas. Origen de los lenguajes de marcado generales: SGML y XML SGML son las siglas de Standard Generalized Markup Language o “Estándar de Lenguaje de Marcado Generalizado”. Consiste en un sistema para la organización y etiquetado de documentos. El lenguaje SGML sirve para especificar reglas de etiquetado de documentos y no impone en sí ningún conjunto de etiquetas en especial. El XML (extensible Markup Language – Lenguaje extensible de marcas) es un lenguaje abierto, derivado de SGML, optimizado para su uso en la WWW, y que va a permitirnos describir el sentido o la semántica de los datos. El XML, a diferencia del HTML, separa el contenido de la presentación. XML es un MetaLenguaje que permite la definición de lenguajes concretos de representación de documentos. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE chapter PUBLIC "-//OASIS//DTD DocBook XML V4.2//EN" "docbookx.dtd"> <!--Nuestro primer capítulo del libro--> <chapter lang="es" id="capitulo_1"> <title>Introducción a XML.</title> <sect1><title>Definición de XML</title> <para><application>XML</application> es un lenguaje de descripción de documentos.</para> </sect1> </chapter> Características Generales de los Lenguajes de Marcado: Un lenguaje de marcado o lenguaje de marcas es una forma de codificar un documento que, junto con el texto, incorpora etiquetas o marcas que contienen información adicional acerca de la estructura del texto o su representación. Texto Plano Una de las principales ventajas de este tipo de codificación es que puede ser interpretada directamente, dado que son archivos de texto plano. Esto es una ventaja evidente respecto a los sistemas de archivos binarios, que requieren siempre de un programa intermedio para trabajar con ello. Un documento de marcado puede ser editado por un usuario con un sencillo editor de textos, sin perjuicio de que se puedan utilizar programas más sofisticados que le faciliten el trabajo. Compacidad Las instrucciones de marcado se entremezclan con el propio contenido en un único archivo o flujo de datos. Facilidad de Procesamiento Las organizaciones de estándares han venido desarrollando lenguajes especializados para los tipos de documentos de comunidades o industrias concretas. Flexibilidad Aunque originalmente los lenguajes de marcas se idearon para documentos de texto, se han empezado a utilizar en áreas como gráficos vectoriales, servicios web… Estructura general de un documento con lenguaje de marcado. Cada lenguaje estructurado tiene su propia estructura definida. Los elementos generalmente tienen una estructura jerárquica y los elementos deben de estar perfectamente anidados. Metadatos e instrucciones de proceso Una parte importante de la metainformación de la página son los metadatos, que nos permiten incluir información sobre la propia página. La especificación de HTML, no define la lista de metadatos que podemos incluir, por lo que las páginas tienen libertad para incluir lo que consideren adecuados. La eqtiqueta empleada para la definición de estos es <meta>. Etiquetas o marcas Las etiquetas pueden utilizarse para añadir al contenido cualquier clase de metadatos. En HTML se definen 91 etiquetas que se utilizan para marcar los diferentes componentes de la página. Algunas de ellas ya se consideran obsoletas: center,Font,… A pesar de existir tantas etiquetas, no es suficiente para crear páginas complejas. Algunos elementos como imágenes y enlaces necesitan más información adicional. A esa información se le llama atributos. Atributos Los atributos son elementos que añaden a la etiqueta para especificar de forma más precisa o añadir información necesaria para la etiqueta. Evidentemente no todos los atributos se pueden utilizar en todas las etiquetas, cada etiqueta define su propia lista de atributos, aunque existen atributos que son absolutamente genéricos para todas las etiquetas. Comentarios Un comentario es una construcción de lenguaje de programación destinada a incrustar anotaciones legibles al programador en el código fuente de un programa informático.