diseño páginas web - introducción
TRANSCRIPT
![Page 1: Diseño páginas web - Introducción](https://reader033.vdocumento.com/reader033/viewer/2022042522/55c2afeabb61ebf22b8b4733/html5/thumbnails/1.jpg)
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](https://reader033.vdocumento.com/reader033/viewer/2022042522/55c2afeabb61ebf22b8b4733/html5/thumbnails/2.jpg)
¿?Qué es Internet
![Page 3: Diseño páginas web - Introducción](https://reader033.vdocumento.com/reader033/viewer/2022042522/55c2afeabb61ebf22b8b4733/html5/thumbnails/3.jpg)
¿?Qué es Internet
redes de comunicación interconectadas
conjunto de servicios
![Page 4: Diseño páginas web - Introducción](https://reader033.vdocumento.com/reader033/viewer/2022042522/55c2afeabb61ebf22b8b4733/html5/thumbnails/4.jpg)
¿?Cómo funciona
redes de ordenadores conectados
servidores <> clientes
![Page 5: Diseño páginas web - Introducción](https://reader033.vdocumento.com/reader033/viewer/2022042522/55c2afeabb61ebf22b8b4733/html5/thumbnails/5.jpg)
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](https://reader033.vdocumento.com/reader033/viewer/2022042522/55c2afeabb61ebf22b8b4733/html5/thumbnails/6.jpg)
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](https://reader033.vdocumento.com/reader033/viewer/2022042522/55c2afeabb61ebf22b8b4733/html5/thumbnails/7.jpg)
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](https://reader033.vdocumento.com/reader033/viewer/2022042522/55c2afeabb61ebf22b8b4733/html5/thumbnails/8.jpg)
Editores HTML
Editores WYSIWYG
![Page 9: Diseño páginas web - Introducción](https://reader033.vdocumento.com/reader033/viewer/2022042522/55c2afeabb61ebf22b8b4733/html5/thumbnails/9.jpg)
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](https://reader033.vdocumento.com/reader033/viewer/2022042522/55c2afeabb61ebf22b8b4733/html5/thumbnails/10.jpg)
@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](https://reader033.vdocumento.com/reader033/viewer/2022042522/55c2afeabb61ebf22b8b4733/html5/thumbnails/11.jpg)
@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](https://reader033.vdocumento.com/reader033/viewer/2022042522/55c2afeabb61ebf22b8b4733/html5/thumbnails/12.jpg)
@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](https://reader033.vdocumento.com/reader033/viewer/2022042522/55c2afeabb61ebf22b8b4733/html5/thumbnails/13.jpg)
@Estructurade una web
partes de cada página
cabecera
cuerpo
pie
![Page 14: Diseño páginas web - Introducción](https://reader033.vdocumento.com/reader033/viewer/2022042522/55c2afeabb61ebf22b8b4733/html5/thumbnails/14.jpg)
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](https://reader033.vdocumento.com/reader033/viewer/2022042522/55c2afeabb61ebf22b8b4733/html5/thumbnails/15.jpg)
44. Definir la estructura
árbol decontenidos
estructuravisual
![Page 16: Diseño páginas web - Introducción](https://reader033.vdocumento.com/reader033/viewer/2022042522/55c2afeabb61ebf22b8b4733/html5/thumbnails/16.jpg)
55. Bocetar el aspecto visual y optimizar imágenes, iconos...
boceto
optimización
![Page 17: Diseño páginas web - Introducción](https://reader033.vdocumento.com/reader033/viewer/2022042522/55c2afeabb61ebf22b8b4733/html5/thumbnails/17.jpg)
6. Montar los HTML´s
7. Generar todo el sitio web
8. Testear con diferentes navegadores web
9. Subir al servidor - Filezilla
6789