Get Started. It's Free
or sign up with your email address
Diseño de páginas web by Mind Map: Diseño de páginas web

1. Crear páginas web con KompoZer

1.1. Crear y administrar un sitio web local

1.2. Crear una página web

1.3. Escribir texto en una página web

1.3.1. Modificar el formato de los caracteres

1.3.2. Escribir una lista

1.3.3. Modificar el formato de los párrafos

2. Accesibilidad e intercambio de información

2.1. Consorcio para la web

2.1.1. El W3C es una asociación internacional, potencial y favorece la evolución de la Worl Wide Web

2.1.2. En este consorcio, hay grupos

2.1.3. La importancia del diseño accesible de las páginas web

2.2. Iniciativa para la accesibilidad

2.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

2.2.1.1. Esta acceibilidad no depende de sus circunstancias personales

2.3. Pautas de accesibilidad

2.3.1. El trabajo de la WAI ha dado como resultado una serie de directrices que pretenden orientar en la generación de páginas web para que se eliminen las barreras en el acceso a la información

2.3.2. Proporcionan solucione para aquellos casos en los que el diseño de la página puede producir problemas de acceso a la información

2.4. Intercambio de información

2.4.1. Debido a los diferentes tipos de programas con los que puede crearse un documento, estos adquieren características particulares que determinan el formato del documento y las aplicaciones que le permitirán visualizarlo y editarlo

2.4.1.1. El formato de un archivo se identifica a través de la extensión del archivo que lo contiene

2.4.2. Para intercambiar información las personas han de asegurarse de que el formato utilizado compatible con sus programas

2.4.2.1. En caso contrario no podrán acceder a ella

2.4.2.2. La mejor opción es utilizar alguno de los considerados formatos estándar, ya que, se garantiza que cualquier usuario tenga acceso

2.5. Tipos de formato

2.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:

2.5.1.1. Formato cerrado o propietario

2.5.1.1.1. La especificación de estos formatos no está publicada

2.5.1.1.2. Solo pueden utilizar las aplicaciones de su propiedad

2.5.1.2. Formato publicado

2.5.1.2.1. Su especificación pertenece a empresas

2.5.1.2.2. Puede ser utilizado por aplicaciones de otras empresas

2.5.1.3. Formato abierto

2.5.1.3.1. La especificación de estos formatos está publicada en su totalidad

2.5.1.3.2. Cualquier desarrollador de aplicaciones puede utilizarlos libremente

3. Páginas web

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

3.1.1. Documentos que forman la World Wide Web

3.1.2. Documentos hipertexto = Documentos multimedia

3.1.2.1. Ofrecen información combinando texto, sonido, imágenes, animaciones, vídeos, etc.

3.1.3. Lenguaje HTML (hypertext markup language)

3.1.3.1. Las páginas web son creadas con este lenguaje

3.1.3.1.1. Único modo de garantizar que cualquier persona pueda visualizarlas con independencia del navegador web que utilice

3.1.3.2. Los comandos de este lenguaje se denominan << etiquetas HTML >>

3.1.3.2.1. Se escriben entre los símbolos <>

3.1.3.2.2. Permiten dar formato a los elementos de la página web

3.1.3.3. El potencial de este lenguaje es que permite incluir información de diferente naturaleza y ofrece la posibilidad de utilizar hiperenlaces para poder navegar de una página a otra

3.2. ¿Qué es un sitio web?

3.2.1. Conjunto de páginas web pertenecientes a una persona, empresa o entidad

3.2.1.1. Constituido por los documentos HTML correspondientes a las páginas web y por todos los recursos que hayan utilizado en ellas

3.2.2. El sito web debe estar organizado

3.2.2.1. Para ello crean carpetas en las que guardar todo su contenido de forma ordenada

3.2.3. Los diseñadores web suelen crear un sitio web en el disco duro del ordenador para guardar en el los documentos HTML creados y los recursos utilizados

3.2.3.1. Una vez comprobadas la páginas , copian todos los archivo del sitio local en servidor web de su proveedor.

3.2.3.1.1. Cuando se publica el sitio web, las páginas se hacen públicas y. así, pueden ser visitadas por cualquier usuario a través de Internet

3.3. Tipos de página web

3.3.1. Estáticas

3.3.1.1. Documentos HTML que muestran información

3.3.1.2. Su contenido se actualiza con poca frecuencia

3.3.1.2.1. Únicamente cuando su creador o diseñador lo considera oportuno

3.3.1.3. Los usuarios que la visitan solo pueden visualizar su contenido

3.3.2. Animadas

3.3.2.1. Las páginas web estáticas se pueden animar añadiendo scripts o applets

3.3.2.2. Otro modo de amenizar una página web es agregando animaciones gráficas creadas con Adobe Flash

3.3.3. Dinámicas

3.3.3.1. Ofrecen al usuario la posibilidad de interactuar con la página e incluso de modificar o introducir información

3.3.3.2. La página mostrará en cada momento el resultado de la acción que haya realizado el usuario

3.3.3.3. Basada en un lenguaje de programación web y en la utilización de bases de datos

3.3.3.4. Ejemplos

3.3.3.4.1. Los foros

3.3.3.4.2. Los blogs

3.3.3.4.3. Los wikis

3.3.4. De contenidos

3.3.4.1. Los usuarios pueden participar activamente en la elaboración de información mostrada

3.3.4.2. Con estas aplicaciones se crean páginas web dinámicas

3.3.4.3. Hay un administrador encargado de administrar los usuarios y otorgarles privilegios

3.3.4.3.1. Ver (leer) la información

3.3.4.3.2. Escribir artículos

3.3.4.3.3. Editar los artículos existentes

3.3.4.3.4. etc.

4. Editores de página web

4.1. Editores de texto

4.1.1. Cualquier editor de texto puede crear páginas web

4.1.1.1. Las páginas web son documentos de texto que contienen multitud de etiquetas HTML, necesarias para especificar las características y el contenido de las mismas

4.1.2. El documento de texto debe ser guardado con el formato HTM o HTML

4.1.2.1. Para ver su aspecto hay que abrirlo con un navegador

4.2. Editores visuales

4.2.1. Permiten crear páginas web sin tener conocimientos de HTML

4.2.1.1. El usuario diseña el documento con ñas herramientas del editor , escribe el texto necesario y agrega otros elementos

4.2.1.2. Permite que el usuario pueda ver el documento con el aspecto que tendrá cuando se visualice con un navegador web

4.2.1.3. El programa va escribiendo, de forma automática y sin la participación del usuario, el código HTML necesario para diseñar la página web

4.2.2. KompoZer

4.2.2.1. Editor de software libre de fácil manejo que permite visualizar los documentos con su aspecto real

4.2.2.2. Programa multiplataforma

4.2.2.2.1. Dispone de versiones para diferentes sistemas operativos

4.2.2.3. Proporciona un módulo para administrar los sitios web

4.2.2.3.1. Permite crear las páginas web en un servidor local y publicarlas posteriormente en Internet, e incluso trabajar directamente con las páginas de un servidor remoto

4.2.2.4. Ofrece la posibilidad de trabajar con hojas de estilo cascada

4.2.3. Adobe Dreamweaver

4.2.3.1. Uno de los editores de documentos HTML comerciales más utilizados

4.2.3.2. Proporciona herramientas avanzadas de diseño y facilita el uso de código HTML dinámico

4.2.3.3. Permite trabajar con marcos o frames y con hojas de estilo cascada

4.3. Herramientas de la web 2.0

4.3.1. Pueden crear documentos HTML

4.3.1.1. Utilizando la herramientas de la web 2.0 disponibles en distintos servidores de Internet o aplicaciones específicas en línea

4.3.1.2. Aunque puede haber pequeñas variaciones, el proceso general siempre es el mismo

4.4. Editores online

4.4.1. Pueden crear páginas web sin necesidad de utilizar ninguna aplicación específica

4.4.2. El único requisito indispensable es disponer de un navegador web para acceder a Internet

4.4.3. Suelen permitir crear un sitio web y publicar directamente en Internet la páginas creadas

4.4.4. Pueden ser tanto gratuitos como costosos

4.5. Gestores de contenidos

4.5.1. Plataforma que permite crear una estructura de soporte para que distintos usuarios puedan crear, publicar, mantener y administrar información con un diseño común

4.5.2. Muchas empresas, instituciones y centros educativos han optado por crear sus sitios web con gestores de contenidos

4.5.3. Los usuarios tienen distintos niveles de acceso. Existe una graduación de usuarios que varía según la plataforma utilizada

4.5.3.1. Administrador

4.5.3.1.1. Tiene todos los permisos

4.5.3.1.2. Gestiona al resto de usuarios

4.5.3.2. Autor

4.5.3.2.1. Crea contenido

4.5.3.3. Editor

4.5.3.3.1. Crea y edita contenido

4.5.3.4. Publicador

4.5.3.4.1. Crea, edita y publica

4.5.4. Joomla!

4.5.4.1. Software de código abierto que permite desarrollar sitios web dinámicos e interactivos

5. Trabajar con páginas web

5.1. Cambiar los colores de una página

5.2. Guardar una página web

5.3. Cambiar las propiedades de una página

5.4. Modos de edición

5.5. Comprobar las páginas creadas

5.6. Trabajar con varias páginas web

6. Tablas en páginas web

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

6.2. Insertar una tabla para mostrar datos

6.3. Escribir texto en una tabla

6.4. Modificar la estructura de una tabla

6.4.1. Insertar o eliminar filas y columnas

6.4.2. Unir celdas

6.5. Cambiar el aspecto de una tablas

7. Imágenes en páginas web

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

7.2. Insertar una imagen

7.3. Modificar una imagen

7.3.1. Cambiar el tamaño

7.3.2. Distribuir texto alrededor

8. Enlaces en páginas web

8.1. Crear un enlace de texto

8.2. Crear un enlace de una imagen

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

8.4. Crear un enlace a otros tipos de documentos

8.5. Crea un enlace a un correo elcetrónico

8.6. Crear un enlace a un vídeo

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

9.1.2. Se puede ver el código HTML de la página web que se tenga abierta en un navegador mediante la opción << ver código fuente >> del menú contextual de la misma página

9.2. Etiqueta HTML

9.2.1. Los documento creados con lenguaje HTML están constituidos por un conjunto de elementos

9.2.1.1. Todo los elementos e declaran en el lenguaje HTML mediante unos comandos epeciales denominados << etiquetas >>

9.2.2. Estructura básica

9.2.2.1. <html>

9.2.2.2. <head> .... </head>

9.2.2.2.1. Información técnica para el navegador

9.2.2.3. <body> ... </body>

9.2.2.3.1. Contenido que aparecerá en la página web

9.2.2.4. </html>

10. Hojas de estilo en páginas web

10.1. Crear una hoja de estilos enlazados

10.2. Crear reglas de estilo

10.3. Enlazar una hoja de estilos a una página web