anexo 1 - Programación Aplicaciones T.Web

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.