Diseño de páginas web

Comienza Ya. Es Gratis
ó regístrate con tu dirección de correo electrónico
Rocket clouds
Diseño de páginas web por Mind Map: Diseño de páginas web

1. Accesibilidad e intercambio de información

1.1. Consorcio para la web (W3C)

1.1.1. El W3C ( World Wide Web Consortium) es una asociación internacional que se fundó en 1994 con la intención de proponer pautas y protocolos comunes para todos los usuarios que permitieran obtener el máximo potencial y favorecer la evolución de la World Wide Web.

1.2. Iniciativa para la accesibilidad (WAI)

1.2.1. La WAI (Web Accessibility Initiative) es un área de trabajo incluida en el consorcio W3C cuyo objetivo es promover y garantizar el acceso a la web de cualquier persona, con independencia del tipo de hardware o software que posea, de su idioma, su cultura, su localización geográfica o la infraestructura.

1.3. Pautas de accesibilidad (WCAG)

1.3.1. El trabajo de la WAI ha dado como resultado una serie de directrices que se han tomado como referencia para elaborar la legislación de las tecnologías de la información en todo el mundo; son las WCAG, conocidas como<<Pautas de Accesibilidad al Contenido en la Web>>, que pretenden orientar en la generación de páginas web para que se eliminen las barreras en el acceso a la información.

1.4. Intercambio de información

1.4.1. Los documentos pueden crearse con diferentes programas. Estos les confieren características particulares que determinan el formato del documento y las aplicaciones que permitirán visualizarlo y editarlo. El formato de un documento se identifica a través de la extensión del archivo que lo contiene.

1.5. Tipos de formatos

1.5.1. El formato de un documento determina sus características y viene dado por su especificación, la cual está definida por sus desarrolladores. Existen varios tipos de formatos:

1.5.1.1. Formato cerrado o propietario: la especificación de estos formatos no está publica (pertenece a empresas) y, por tanto, solo la pueden utilizar las aplicaciones de su propiedad.

1.5.1.2. Formato publicado: su especificación pertenece a empresas, pero su código sí está publicado y, por tanto, puede ser utilizado por aplicaciones de otras empresas.

1.5.1.3. Formato abierto: la especificación de estos formatos está publicada en su totalidad. Suelen pertenecer a organizaciones sin ánimo de lucro, por lo que cualquier desarrollador de aplicaciones puede utilizarlos libremente.

1.5.2. Formatos recomendados:

1.5.2.1. TXT: conocido como texto plano, no permite dar formato al texto y suele utilizarse en correos, foros, etc.

1.5.2.2. ODF: es un formato estándar utilizado por LibreOffice y basado en XML. Fue aprobado como estándar ISO en el año 2006.

1.5.2.3. PDF: es un formato muy extendido. Su principal característica es que el aspecto del documento es idéntico al de su impresión.

1.5.2.4. HTML: se trata de un formato sencillo para crear páginas web. Existen algunas extensiones de este formato, no especificadas por W3C, que no se consideran dentro del estándar.

1.5.2.5. XML: es un formato más evolucionado que HTML, por lo que lo está sustituyendo en Internet. Aunque fue desarrollado por Microsoft, ha dejado libre su especificación para poder ser utilizado por cualquier usuario que conozca este formato.

2. Páginas web

2.1. ¿Qué es una página web?

2.1.1. Las páginas web o documentos HTML son los documentos que conforman la World Wide Web, el servicio más conocido y utilizado de internet. Se trata de documentos hipertexto, esto es, que ofrecen información combinando texto, sonido, imágenes, animaciones, vídeos, etc. Por esta razón, también se puede decir que las páginas web son documentos multimedia.

2.1.1.1. LENGUAJE HTML: las páginas web deben crearse con un lenguaje específico, el lenguaje HTML (hypertext markup languaje), ya que es el único modo de garantizar que cualquier persona pueda visualizarlas con independencia del navegador web que utilice.

2.2. ¿Qué es un sitio web?

2.2.1. Un sitio web es un conjunto de páginas web pertenecientes a una persona, empresa o entidad. Dicho sitio está constituido por los documentos HTML correspondientes a las páginas web y por todos los recursos que se hay utilizado en ellas: imágenes, vídeos, sonidos, etc.. El sitio web debe estar organizado. Por lo tanto, es necesario crear carpetas en las que guardar todo su contenido de forma ordenada.

2.3. Tipos de páginas web

2.3.1. Las páginas web se pueden clasificar según distintos criterios. Aunque no se pueden hacer clasificaciones totalmente rigurosas, en este caso, haremos las siguientes:

2.3.1.1. Páginas web estáticas

2.3.1.1.1. Son documentos HTML que muestran información. No se llaman así porque no puedan contener animaciones, sino porque su contenido se actualiza con poca frecuencia únicamente cuando su creador o diseñador lo considera oportuno. Los usuarios que las visitan solo pueden visualizar su contenido.

2.3.1.2. Páginas web animadas

2.3.1.2.1. Las páginas web estáticas se pueden animar incluyendo scripts o applets, que son pequeños programas escritos en un lenguaje de programación compatible con HTML y, por lo tanto, interpretables por los navegadores web.

2.3.1.3. Páginas web dinámicas

2.3.1.3.1. A diferencia de las páginas estáticas, las páginas dinámicas ofrecen al usuario la posibilidad de interactuar con la página e incluso de modificar o introducir información. La página mostrará en cada momento el resultado de la acción que hay realizado el usuario. Ejemplos: los foros, blogs, los wikis, etc..

2.3.1.4. Páginas web de contenido

2.3.1.4.1. Los gestores de contenidos proporcionan una plataforma en la que los usuarios pueden participar activamente en la elaboración de la información mostrada. Con estas aplicaciones se crean páginas web dinámicas cuya información se actualiza constantemente con la colaboración de un conjunto de usuarios pertenecientes a una empresa o entidad.

3. Editores de páginas web

3.1. Editores de texto

3.1.1. Con cualquier editor de texto, incluso con los más sencillos (aquellos que trabajan, únicamente con texto plano, esto es, sin formato), se pueden crear páginas web. Las páginas web son, en realidad, documentos de texto que contienen multitud de etiquetas HTML, necesarias para especificar las características y el contenido de las mismas. Lógicamente es necesario reconocer el lenguaje HTML y tener nociones de programación para diseñar y crear páginas web.

3.2. Editores visuales

3.2.1. Los editores visuales, llamados <<editores WYSIWYG>>, permiten crear páginas web sin tener conocimientos de HTML, El usuario diseña el documento con las herramientas del editor, escribe el texto necesario y agrega elementos (imágenes, videos, etc..)

3.2.1.1. KompoZer: es un editor de software libre de fácil visualizar los documentos con su aspecto real. Además, se trata de un programa multiplataforma, es decir dispone de versiones para diferentes sistemas operativos, como GNU/Linux y Windows

3.2.1.2. Adobe Dreamweaver: es uno de los editores de documentos HTML comerciales más utilizados. Proporciona herramientas avanzadas de diseño y facilita el uso de código HTML dinámico (capas, botones flash, barras de navegación, textos animados, imágenes de sustitución...). También permite trabajar con marcos o frames y con hojas de estilos en cascada (CSS), lo que le otorga una enorme potencialidad.

3.3. Herramientas de la web 2.0

3.3.1. También se pueden crear documentos HTML utilizando herramientas de la web 2.0 disponibles en distintos servidores de Internet ( blogs, wikis, etc.) o aplicaciones específicas en línea como por ejemplo, Glogster.

3.4. Editores online

3.4.1. La gran ventaja de los editores online es que se pueden crear páginas web sin necesidad de utilizar ninguna aplicación específica. El único requisito indispensable es disponer de un navegador web para acceder a Internet.

3.5. Gestores de contenidos

3.5.1. Un sistema de gestión de contenidos es una plataforma que permite crear una estructura de soporte para que distintos usuarios puedan crear, publicar y administrar información con un diseño común. Los gestores de contenidos han propiciado la aparición de las herramientas web 2.0, ya que permiten a los usuarios la participación activa en la creación, la publicación y el mantenimiento de un sitio web. Por ello muchas empresas, instituciones y centros educativos han optado por crear sus sitios web con gestores de contenidos.

4. Crear páginas web con KompoZer

5. Trabajar con páginas web

6. Tablas en páginas web

7. Imágenes en páginas web

8. Enlaces en páginas web

9. Lenguaje HTML en páginas web

9.1. Lenguaje HTML

9.1.1. El lenguaje HTML es el que se utiliza para crear páginas web. Se trata de un conjunto de permiten dar formato al texto y al resto de elementos utilizados en las páginas. En KompoZer, el código fuente de la página que esta diseñando se puede ver activando el modo de edición Código fuente. Si se tienen conocimientos de HTML, se puede modificar o escribir el código de la página para cambiar su configuración y su aspecto.

9.2. Etiquetas HTML

9.2.1. Los documentos creados con lenguaje HTML están constituidos por un conjunto de elementos ( cabecera, cuerpo, tablas, columnas, filas, títulos, textos, imágenes, enlaces...) que pueden tener propiedades diferentes: tipo de letra, color de la fuente, color del fondo, negrita, ancho, alto...

9.2.2. Todos los elementos se declaran en el lenguaje HTML mediante unos comandos especiales denominados <<etiquetas>>. Estas han de escribirse entre los símbolos <>. Algunos ejemplos son: <head> ( cabecera de la página web), <body> (cuerpo de la página), >h1> (texto escrito con el estilo Título 1), etc.

9.2.3. Algunas son impresindibles

9.2.3.1. definen la estructura obligatoria de cualquier documento web

9.2.4. Las caracteristicas o propiedades de cada elemento también se declaran con comandos propios del lenguaje HTML.

9.2.5. Etiquetas, Caracteristicas y funciones

9.2.5.1. <HTML>…</HTML>: indican el comienzo y el final del documento web. Son las etiquetas principales del mismo.

9.2.5.2. <head>…</head>: especifican los elementos y propiedades de la cabecera de la página web.

9.2.5.3. <title>…</title>: delimitan el texto que aparecerá en la barra de título del navegador.

9.2.5.4. <h1>…</h1>: definen un texto etiquetado como Título 1.

9.2.5.5. <table>…>/table>: definen las caracteristicas y el contenido de una tabla.

9.2.5.6. <tr>…</tr>: definen las caracteristicas y el contenido de una fila de una tabla.

9.2.5.7. <td>…</td>: definen las caracteristicas y el contenido de una celda de una fila de la tabla.

9.2.5.8. <p>…</p>: determinan un párrafo del texto.

9.2.5.9. <br>: provoca un salto de línea en el texto. No necesita etiqueta de cierre complementaria.

9.2.5.10. <img src="ruta y nombre imagen"/>: permiten insertar una imagen en la página web. Se trata de una etiqueta que lleva el cierre incorporado (también puede omitirse), por lo que no necesita otra etiqueta complementaria.

10. Hojas de estilo en páginas web