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