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. 1.1 Consorcio para la web

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

1.1.2. En este consorcio hay grupos que trabajan en el desarrollo de especificaciones y programas que puedan distribuirse gratuitamente por todo el mundo. También se encargan de crear códigos de referencia para incorporar y promover estándares de publiación.

1.2. 1.2 Iniciativa para la accesibilidad

1.2.1. La WAI 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 de red existente.

1.2.2. Se trata de conseguir que la web sea más accesible para todos los usuarios y de que esta accesibilidad no dependa de sus circunstancias personales ni de los dispositivos que posean para el acceso a la información.

1.3. 1.3 Pautas de accesibilidad

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. 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.4.2. Cuando varias personas intercambian información, han de asegurarse de que el formato que utilizan es compatible con sus programas; en caso contrario, no podrán acceder a ella.

1.4.3. La mejor opción para intercambiar información es utilizar alguno de los considerados formatos estándar, ya que, de este modo, se garantiza que cualquier usuario tenga acceso.

1.5. 1.5 Tipos de formato

1.5.1. - Formato cerrado o propietario: La especificación de estos formatos no está publicada (pertenece a empresas) y, por tanto, solo la pueden utilizar las aplicaciones de su propiedad. Un ejemplo de este tipo de formato es DOCX

1.5.2. - Formato publicado: Su especificación pertenece a empresas, pero su código si está publicado y, por tanto, puede ser utilizado por aplicaciones de otras empresas. Un ejemplo de este tipo de formato es RTF de Microsoft.

1.5.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. Un ejemplo es ODF, de LibreOffice.

1.5.4. Formatos recomendados:

1.5.4.1. TXT: texto plano

1.5.4.2. ODF: basado en XML

1.5.4.3. PDF: formato muy extendido

1.5.4.4. HTML: formato sencillo para crear páginas web

1.5.4.5. XML: formato más evolucionado que el HTML

1.5.4.6. GIF, JPEG Y PNG: formatos gráficos

2. PÁGINAS WEB

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

2.1.1. Las páginas web o documentos HTML son los documentos que conforman la WorldWideWeb, 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. Para poder visualizar el contenido de una página, esta se debe abrir con un navegador web, aplicación que es capaz de leer, interpretar y mostrar estos documentos.

2.1.2. Lenguaje HTML

2.1.2.1. Las páginas web deben crearse con un lenguaje especifico, el lenguaje HTML (hypertext markup language), ya que es el único modo de garantizar que cualquier persona pueda visualizarlas con independencia del navegador web que utilice. Como se verá más adelante, los comandos de este lenguaje se denominan <etiquetas HTML>, se escriben entre los símbolos <> y permiten dar formato a los elementos de la página web. El potencial de este lenguaje es que permite incluir información de distinta naturaleza (texto, imágenes..) y, además, ofrece la posibilidad de utilizar hiperenlaces para poder navegar de una página a otra.

2.2. 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 hayan 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. Los Diseñadores web suelen crear un sitio web en el disco duro del ordenador (sitio local) para guardar en el los documentos HTML creados y los recursos utilizados. Posteriormente, una vez comprobadas las páginas, copia en todos los archivos del sitio local en el servidor web de su proveedor (sitio remoto). De este modo, cuando se publica el sitio web, las páginas se hacen públicas y, así, puede ser visitadas por cualquier usuario a través de Internet.

2.3. 2.3 Tipos de páginas web

2.3.1. Páginas web estáticas

2.3.1.1. Las páginas web estática 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 y diseñador lo considera oportuno. Los usuarios que las visiten solo pueden visualizar su contenido.

2.3.2. Páginas web animadas

2.3.2.1. Las páginas web estática 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. Otro modo de amenizar la página web consiste en agregar animaciones gráficas creadas con Adobe flash.

2.3.3. Páginas web dinámicas

2.3.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 incluso de modificar en introducir información. La página mostrará en cada momento el resultado de la acción que haya realizado el usuario. Estas páginas están basadas en un lenguaje de programación web y en la utilización de bases de datos, por lo que el servidor donde se vayan a alojar debe de estar preparado para ello. Son ejemplos de páginas dinámicas los foros, los blogs, los wikis, etc.

2.3.4. Páginas web de contenidos

2.3.4.1. Los gestores de contenidos proporcionan una plataforma en la que los usuarios pueden participar activamente en la elaboración de 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.

2.3.4.2. En los gestores de contenidos, hay un administrador encargado de administrar los usuarios y de otorgarles privilegios: ver (leer) la información, escribir artículos, editar los artículos existentes, etc.

2.3.4.3. Lo habitual es que la información ofrecida por los gestores de contenido sea pública, es decir, que no haya que identificarse para poder ver y leer la información.

3. EDITORES DE PÁGINAS WEB

3.1. 3.1 Editores de texto

3.2. 3.2 Editores visuales

3.2.1. KompoZer

3.2.2. Adobe Dreamweaver

3.3. 3.3 Herramientas de la web 2.0

3.4. 3.4 Editores online

3.5. 3.5 Gestores de contenidos

4. CREAR PÁGINAS WEB CON KOMPOZER

4.1. 4.1 Crear y administrar un sitio web local

4.2. 4.2 Crear una página web

4.3. 4.3 Escribir texto en una página web

5. TRABAJAR CON PÁGINAS WEB

5.1. 5.1 Cambiar los colores de una página

5.2. 5.2 Guardar una página web

5.3. 5.3 Cambiar las propiedades de una página

5.4. 5.4 Modos de edición

5.5. 5.5 Comprobar las páginas creadas

5.6. 5.6 Trabajar con varias páginas web

6. TABLAS EN PÁGINAS WEB

6.1. 6.1 Insertar una tabla como estructura de la página web

6.2. 6.2 Insertar una tabla para mostrar datos

6.3. 6.3 Escribir texto en una tabla

6.4. 6.4 Modificar la estructura de una tabla

6.5. 6.5 Cambiar el aspecto de una tabla

7. IMÁGENES EN PÁGINAS WEB

7.1. 7.1 ¿Qué son los vínculos relativos?

7.2. 7.2 Insertar una imagen

7.3. 7.3 Modificar una imagen

8. ENLACES EN PÁGINAS WEB

8.1. 8.1 Crear un enlace de texto

8.2. 8.2 Crear un enlace en una imagen

8.3. 8.3 Crear un enlace a una página de Internet

8.4. 8.4 Crear un enlace a otros tipos de documentos

8.5. 8.5 Crear un enlace a un correo electrónico

8.6. 8.6 Crear un enlace a un vídeo

9. LENGUAJE HTML EN PÁGINAS WEB

9.1. 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 palabras clave, tags o etiquetas que permiten dar formato de texto y al resto de elementos utilizados en las páginas.

9.1.2. En KompoZer, el código fuente de la página que se está 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. 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..) que pueden tener propiedades diferentes

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 página web) <body> (cuerpo de la página), etc.

9.2.3. Las etiquetas HTML suelen ser dobles, ya que tienen que indicar el comiendo y el final de la zona del texto (Código) a la que afecta. KompoZer puede mostrar las etiquetas del documento en su vista de diseño, lo que permite a los usuarios identificar los elementos de la página web y familiarizarse con las etiquetas HTML. Para verlas, hay que activar el modo de edición "Diseño" y seleccionar "Etiquetas HMTL" de la lista desplegable "Vista"

9.2.4. Además, en la barra de estado, el programa muestra en todo momento las etiquetas de las zonas de la página web donde está situado el elemento en el que se está trabajando.

9.2.5. Algunas etiquetas son imprescindibles porque definen la estructura obligatoria de cualquier documento web. Las características o propiedades de cada elemento también se declaran con comandos propios del lenguaje HTML: los denominados "atributos": El esquema estándar de una etqiueta HTML: <etiqueta atributo="valor"> contenido </etiqueta>

9.2.6. En caso de querer definir varios atributos en una misma etiqueta, estos se escriben seguidos y separados por punto y coma (;). El siguiente ejemplo define el tipo de letra, el color y la alineación del texto "Mi página web" escrito con el éetilo de Título 1.

10. HOJAS DE ESTILO EN PÁGINAS WEB

10.1. 10.1 Crear una hoja de estilos enlazada

10.2. 10.2 Crear reglas de estilo