diseño páginas web - introducción

17
Taller de Diseño de páginas web con recursos gratuítos Sesión 1: 1. Qué es Internet 2. Tecnologías web 3. Software libre y recursos gratuítos en Internet 4. Estructura de una web 5. Pasos para elaborar una web

Upload: lidia-noko

Post on 06-Aug-2015

164 views

Category:

Design


4 download

TRANSCRIPT

Page 1: Diseño páginas web - Introducción

Taller deDiseño de páginas webcon recursos gratuítosSesión 1:

1. Qué es Internet

2. Tecnologías web

3. Software libre y recursos gratuítos en Internet

4. Estructura de una web

5. Pasos para elaborar una web

Page 2: Diseño páginas web - Introducción

¿?Qué es Internet

Page 3: Diseño páginas web - Introducción

¿?Qué es Internet

redes de comunicación interconectadas

conjunto de servicios

Page 4: Diseño páginas web - Introducción

¿?Cómo funciona

redes de ordenadores conectados

servidores <> clientes

Page 5: Diseño páginas web - Introducción

Tecnología necesariapara lacreación de webs

1. navegador web

2. editor de imágenes

3. editor html

4. cliente ftp

Page 6: Diseño páginas web - Introducción

1. Internet Explorer: 52.71%

2. Firefox: 21.47%

3. Chrome: 13.49%

4. Safari: 8.10%

5. Opera: 1.65%

Navegadores web más usados en España

(Julio 2011)

Page 7: Diseño páginas web - Introducción

De pago:Dreamweaver | FrontPage | ...

Gratuitos:Amaya | Kompozer | BlueGriffon

Bloc de notas | Microsoft WordOpen Office ...

Editores HTML

Procesadores de texto

Otros: Notepad ++

Editores WYSIWYG

Page 8: Diseño páginas web - Introducción

Editores HTML

Editores WYSIWYG

Page 9: Diseño páginas web - Introducción

Editores de imágenes

De pago:

Photoshop | Corel...

Gratuitos:

Gimp | Inkscape ...

Bocetar la web

Optimizarimágenes, iconos...

Page 10: Diseño páginas web - Introducción

@Páginas estáticas casi no permiten interactuación con el usuario

no tienen facilidad de actualización de contenidos

Page 11: Diseño páginas web - Introducción

@Páginas dinámicaspermiten interactuar

pueden actualizarse sin tener que ser editadas de nuevo

requieren otras tecnologías:

javascript | flash

php, asp, jsp...

bases de datos

Page 12: Diseño páginas web - Introducción

@Estructurade una web

niveles del sitio web

partes de cada página

portada | primer nivel

| ... | páginas finales

cabecera | cuerpo | pie...

Page 13: Diseño páginas web - Introducción

@Estructurade una web

partes de cada página

cabecera

cuerpo

pie

Page 14: Diseño páginas web - Introducción

123Pasos a seguirpara elaborar una web

1. Determinar los objetivos del sitio

2. Determinar la audiencia de destino

3. Definir los contenidos del sitio

Page 15: Diseño páginas web - Introducción

44. Definir la estructura

árbol decontenidos

estructuravisual

Page 16: Diseño páginas web - Introducción

55. Bocetar el aspecto visual y optimizar imágenes, iconos...

boceto

optimización

Page 17: Diseño páginas web - Introducción

6. Montar los HTML´s

7. Generar todo el sitio web

8. Testear con diferentes navegadores web

9. Subir al servidor - Filezilla

6789