Algunas pistas para la construcción Web Barcelona 2009

1

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

Algunas pistas para la construcción Web Barcelona 2009

2

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

Algunas pistas para la construcción Web Barcelona 2009

3

• 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…