Este documento presenta algunas consideraciones clave para la construcción de sitios web. Inicialmente, introduce brevemente las etapas de desarrollo de un proyecto web y aspectos importantes del diseño web como la navegación intuitiva y la presentación agradable para el usuario. Luego, describe herramientas básicas como editores HTML y FTP, y conceptos fundamentales como HTML, CSS y sistemas de gestión de contenido que permiten crear y administrar sitios web de manera flexible. Finalmente, proporciona recursos adicionales para profundizar en

1. Algunas pistas para la construcción Web Barcelona 2009
Algunas pistas para la construcción Web
(Este documento es un esbozo de los temas que podemos ver, faltan cosas por
definir…)
A. BREVE INTRODUCCIÓN AL DISEÑO WEB
0. Etapas de desarrollo de un proyecto Web:
1. Consideraciones del diseño Web: Aspectos que siempre se deben tener en cuenta.
(Navegación intuitiva / Niveles claros de lectura / Presentación y estética agradable al usuario / Código válido,
accesible y semánticamente correcto / Separación del contenido y la presentación /…)
2. Preproyecto o definición de nuestra Web: Pensar en nuestras necesidades.
(Definición de nuestro usuario-target-audiencia / Dispositivos de uso y entorno tecnológico / Especificaciones
técnicas (Front/Back end) / Mapa o esquema del sitio / WireFrames o flujos de contenidos / Contenidos definitivos y
dinámicos ( textos+ imágenes+videos) / Imagen Corporativa / Mantenimiento día a día a futuro / Escalabilidad futura
(idiomas, agregar o quitar desarrollos) / …
3. Para trabajar en la Web:
• Tamaños, medidas y unidades
• Tipografía Web
• Colores Web
• Imágenes
• Otras recomendaciones
1

2. Algunas pistas para la construcción Web Barcelona 2009
B. CONSTRUCCIÓN DE LA WEB
0. Herramientas básicas:
• Editor HTML (tipo WYSIWYG "What You See Is What You Get"):
Dreamweaver, Amaya, etc. …
• Cliente FTP (File Transfer Protocol; nos sirve para la transferencia de datos
entre el cliente y el servidor): FileZilla (Windows), Cyberduck (Mac), etc. …
• Servidor local (nos permite realizar pruebas en "local" [no conectados a Internet]
de nuestras aplicaciones, ya sea que incluyan bases de datos, php, flash, html,
javascript, etc.): WampServer (Windows), MAMP (Mac), etc. …
• Web Developer (complemento para Firefox) https://addons.mozilla.org/es-
ES/firefox/addon/60
• Editor de Imágenes: Photoshop, GIMPshop, etc. …
• Editor de animaciones vectoriales: Flash, …
• Conversor de archivos: ffmpeg, …
1. HTML (the Hypertext Markup Language) y XHTML:
Es el lenguaje de marcado predominante para la construcción de páginas Web. Es usado para describir la estructura y
el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se
escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>).
• Introducción
• Características básicas
• Texto
• Enlaces
• Listas
• Imágenes y objetos
• Tablas
• Formularios
• Estructura y layout
• Metainformación
*Documentos y recursos para profundizar:
Introducción a XHTML http://www.librosweb.es/xhtml/
2. CSS (Cascading Style Sheets):
CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por
extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las
hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.
• Introducción
• Selectores
• Unidades de medida y colores
• Modelo de cajas
• Posicionamiento y visualización
• Texto
2

3. Algunas pistas para la construcción Web Barcelona 2009
• Enlaces
• Imágenes
• Listas
• Tablas
*Documentos y recursos para profundizar:
Introducción a CSS http://www.librosweb.es/css/index.html
Referencia de CSS 2.1 http://www.librosweb.es/referencia/css/index.html
CSS avanzado http://www.librosweb.es/css_avanzado/
3. Gestores de contenido (content management system, abreviado CMS) y otros
recursos para la construcción de sitios Web:
Un CMS es un programa que permite crear una estructura de soporte (framework) para la creación y administración
de contenidos, principalmente en páginas web, por parte de los participantes.
Consiste en una interfaz que controla una o varias bases de datos donde se aloja el contenido del sitio. El sistema
permite manejar de manera independiente el contenido y el diseño. Así, es posible manejar el contenido y darle en
cualquier momento un diseño distinto al sitio sin tener que darle formato al contenido de nuevo, además de permitir
la fácil y controlada publicación en el sitio a varios editores.
• Blogs: WordPress…
• Portales: Drupal, Joomla!...
• Portafolio: Indexhibit, Indxr, ProFolio…
• Image Galleries…
• eCommerce…
• Learning Management: Moodle…
3