SEMANA 4 - PRESENTACION Y ESTRUCTURA DE UN SITIO WEB

ING. EDSON RAÚL LAZO ALVAREZ

Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II

INFORMÁTICA II

Estructura de un Sitio Web

index.html

huguito.jpg

imagenes novedades.html

videos

contactanos.html audio

2 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II

INFORMÁTICA II

SITIO WEB Un sitio web es una colección de páginas web relacionadas, imágenes, vídeos u otros archivos digitales típicamente comunes a un dominio de Internet o subdominio en la World Wide Web en Internet.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II

INFORMÁTICA II

La creación de Sitios Web Es labor del diseñador, el crea y diseña los sitios, el que produce y controla la información y el que usa las tecnologías que se encuentran en internet.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

DISEÑO WEB El proceso del diseño web no siempre debe seguir unos pasos específicos y rígidos, ya que cada proyecto tiene sus particularidades y habrá que adaptarse a ellas como corresponda.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

DISEÑO WEB El objetivo número uno de cualquier web debería ser crear algo que sea útil para las personas que la utilizarán.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

DISEÑO WEB 1 Crear y Organizar el Contenido

4 Comprobar el Funcionamiento

2 Dibujar los bocetos de las páginas

5 3

Cargar y hace nuevas Pruebas

Crear los Documentos HTML o producir el sitio

6 Dar Mantenimiento al Sitio

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

CREAR Y ORGANIZAR EL CONTENIDO

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

ÁRBOL DE NAVEGACIÓN

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

DIBUJAR LOS BOCETOS DE LAS PÁGINAS

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

CREAR LOS DOCUMENTOS HTML O PRODUCIR EL SITIO

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

COMPROBAR EL FUNCIONAMIENTO

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

CARGAR Y HACE NUEVAS PRUEBAS

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

DAR MANTENIMIENTO AL SITIO

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

LA ESTRUCTURA DEL SITIO WEB La estructura de Sitio Web empieza definiendo la ubicación de las páginas y los elementos como imágenes, animaciones, archivos de sonido, etc. Es decir se crearán las capetas que formaran el sitio.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

LA ESTRUCTURA DEL SITIO WEB Una vez creadas las carpetas que formaran un sitio local, ya es posible definir el sitio para que el software de diseño web pueda administrarlo.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

DREAMWEAVER DW nos advierte con un mensaje que NO ES ACONSEJABLE ya que desde dos sitios diferentes podremos acceder a los mismos archivos.

Cada carpeta raíz debe ser considerada como una isla, autosuficiente y aislada del resto.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

EL MAPA DEL SITIO WEB Representación gráfica o textual de un sitio web Inicio Buscador Noticias Contactar Servicios Apertura Cuentas Cliente SSH Reservas Foro Correo WebMail Información Equipación Aulas Ocupación Aulas FAQ Tutoriales Horario Aulas

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

EL WIREFRAME Text in here

Text in here

Representa la estructura y distribución de elementos dentro de una página web. Se desarrollan bosquejos.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

EL WIREFRAME

Cada área de la página recibe un nombre único; este ayudara en la asignación de formatos mas adelante.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

24

Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II

INFORMÁTICA II

ACTIVIDAD – CL2 DEFINIR UN SITIO WEB El tema a tratar será: ”El tema que ud elija”

ESTRUCTURE UN SITIO WEB Elabore la estructura del sitio web que cuente con al menos 5 páginas web. Realice los bocetos , el mapa de sitio web, etc.

WIRE FRAME Elaborar el WIREFRAME de las páginas del sitio web. considere los elementos de navegación DOCUMENTE SU PROYECTO Entregue lo solicitado en HOJAS. CL2 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

Atiende….

Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II

INFORMÁTICA II

Estructura de un Sitio Web

index.html

huguito.jpg

imagenes novedades.html

videos

contactanos.html audio

27 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

28

No te olvides de tu vecino

Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II

INFORMÁTICA II

Ejercicio 1 Definir un sitio web que utilizarás para guardar los documentos HTML que crees en cada uno de los ejercicios. También tendrás que crear el documento HTML principal (index.html). El sitio web definido en Dreamweaver se llamará “Practica Dreamwaver” Para la creación del sitio web, es recomendable que generes una carpeta en el “Escritorio” o en el disco “Alumno” y le asignes un nombre similar a “sitio_apellidos_nombres”. Dentro de esta carpeta deberás crear otra que se llamará “img”. Guarda en ella las imágenes que desees insertar en el HTML. En cuanto a la configuración del documento HTML estándar, deberás tener en cuenta aspectos como la versión de HTML, el Doctype, la codificación de los caracteres, etc.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

Ejercicio 2 Este ejercicio está orientado al manejo de las herramientas que nos permiten previsualizar el código HTML que estamos creando.

30

Para completarlo, deberás configurar varios navegadores en Dreamweaver de modo que puedas previsualizar el resultado de la página de forma ágil. Los navegadores que deberás configurar son: Internet Explorer, Firefox y Chrome.

Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

Ejercicio 3 En este ejercicio te planteamos jugar con texto. Deberás añadir 10 párrafos y cada uno de ellos deberá tener su propio color, tamaño, alineación y estilo. Es importante entender para esto la aplicación de Hojas de Esitlo en Cascada - CSS.

31 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

Ejercicio 4 En este apartado vamos a trabajar con listas.

Deberás crear una lista ordenada, otra desordenada y una de definición. Finalmente, crearás una lista anidada a partir de la unión de una lista ordenada y una desordenada.

Cada una de las listas deberá tener un mínimo de cinco elementos.

32 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

Ejercicio 5 En este ejercicio vas a trabajar con imágenes.

Para ello, importarás una imagen a Dreamweaver y la trabajarás como un mapa de imágenes. Luego, crearás cinco zonas activas dentro de dicho mapa y cada uno de los enlaces conducirá a una página diferente que se abrirá en una nueva ventana del navegador.

33 Ing. Edson Raúl Lazo Alvarez

INFORMÁTICA II

34

Ing. Edson Raúl Lazo Alvarez Ing. Edson Raúl Lazo Alvarez INFORMÁTICA II

INFORMÁTICA II