Especialista en desarrollo de aplicaciones web

JORNADA 3

cid deza, moisésmoises@uvigo.es

Dreamweaver Entorno

Dreamweaver Sitio Web: Conjunto de documentos o páginas

vinculadas con atributos compartidos, como temas relacionados, un diseño similar o un objetivo común.

Crear un sitio web:1. Planificar2. Diseñar estructura básica3. Desarrollar el sitio

Dreamweaver Creación de un Sitio Web

Diseño GráficoDiseño Gráfico

1.- Photoshop, Fireworks, Boceto a mano• Página Principal• Página Primer Nivel• Página Segundo Nivel

2.- Estructura de navegación3.- Resolución

Creación de la estructura física en la herramienta de desarrollo

Creación de la estructura física en la herramienta de desarrollo

Creación de la estructura de directorios(definir el sitio web)

Transformar el diseño gráfico a HTML

Transformar el diseño gráfico a HTML

Desarrollar el Sitio Web en herramienta de desarrollo

Desarrollar el Sitio Web en herramienta de desarrollo

Requisitos NO funcionales• Compatibilidad con navegadores. Requiere hacer uso de estándares XHTML y CSS.• Sitio web accesible (accesibilidad web: capacidad de acceso a la web y a sus contenidos por todas las

personas independientemente de la discapacidad)

¿Web corporativa?¿Aplicación Web Intranet?Determinar público objetivo

web 2.0 – del.icio.us1. Crear una cuenta Gmail2. Registrase en del.icio.us (http://delicious.com)3. Agregar las URL’s que resulten interesantes asignándoles

TAGS

Ejercicio Para familiarizarnos con el entorno de trabajo de

Dreamweaver, vamos a desarrollar un proyecto consistente en la realización un sitio web para un curso de Especialista en desarrollo de aplicaciones Web.

A través de pequeños ejercicios, se irán configurando las diferentes páginas web, estáticas de momento, que forman parte del proyecto.

El proyecto estará disponible en Internet y podrá ser consultado por cualquier usuario.

Ejercicio 1 Proyecto: Sitio Web del Curso Especialista Descripción: Se trata de desarrollar un sitio web donde se ofrezca

información acerca de curso de especialista en desarrollo de aplicaciones web. El sitio web tendrá una estructura de 2 niveles tal y como sigue:

default.htm: Página principal con información corporativa y acceso al resto de páginas Modulos

modulo1.htm: Página con información acerca del módulo1 modulo2.html: Página con información acerca del módulo2 Modulo3.html: Página con información acerca del módulo3

Contactar contactar.htm: Página con un formulario que permita enviar datos de contacto.

Ejercicio 1 Fase 1: Realizar el diseño gráfico del sitio

Boceto Definir la estructura de navegación Resolución para la que va a ser realizada

Fase 2: Definir la estructura de directorios que se va a utilizar para almacenar nuestro sitio web.

Fase 3: Comenzar la implementación de nuestro sitio en la herramienta de desarrollo escogida.

Ejercicio 1 Diseño

Página principal: página en la que deberá mostrarse el logotipo del curso, el nombre del curso, una descripción del mismo y enlaces de acceso a cada uno de las secciones (modulos y contactar). La estructura de la página de 1º nivel será similar a la siguiente

Encabezado (logo + titulo)

Barra de navegación

Zona principal

Zona de menú

Pie de página

Ejercicio 1 La página deberá crearse utilizando como base una tabla (Barra de

InsertarPestaña Tablas). En el encabezado deberá aparecer el logotipo del curso, así como el

título. El menú de la izquierda debe crearse con listas (Barra de

InsertarPestaña Texto). Crear los hipervínculos necesarios. En el pie de página deberá existir un enlace que permita enviar un mail

al diseñador de la página web, así como la fecha de realización. En la zona principal de la página, se debe indicar una pequeña

descripción del mismo. Hacer uso de las etiquetas de encabezado de HTML (H1, H2, etc).

Una vez creada la tabla probar a previsualizar la página en el navegador por defecto (F12) y probar a cambiar el navegador por defecto.

No utilizar hojas de estilo CSS. La página deberá llamarse default.htm. Trabajar en modo código y vista diseño.

Ejercicio 2: Head Una vez creada la página principal, y con el objetivo de

aportar información acerca de la página realizada y que ésta pueda ser indexada por los robots de búsquedas, cómo google, se deberá modificar la cabecera de la página incluyendo:

Palabras clave: curso, especialista, web, dreamweaver Descripción de la página Autor de la página Tiempo de refresco: 120 segundos

Utilizar las herramientas de la pestaña “Head” de la barra insertar.

Ejercicio 3: Sitio Web Dado que vamos a crear varias páginas, lo correcto es

crear un sitio Web con Dreamweaver. Para ello se utilizará la herramienta de gestión de Sitios de Dreamweaver (Menú Sitio Nuevo Sitio).

El nombre del sitio será: curso_especialista No se utilizarán tecnologías de servidor Todas las páginas creadas se deberán almacenar localmente

en la carpeta c:\Mis Documentos\login_teleforma. (login_teleforma es tu login en la plataforma).

No nos vamos a conectar, de momento con ningún servidor remoto.

Ejercicio 4: Sitio Web Modificar el sitio web recién creado con el objetivo de

definir un servidor remoto al que se conectará vía FTP. Los datos de acceso son:

ftp://curso.ideit.es Usuario: sdi4109

El sitio remoto estará en la ruta /HTML/login_teleforma

Cambiar las diferentes vistas del sitio. Probar a sincronizar el sitio web con las diferentes

opciones posibles.

Ejercicio 6: Formularios Crear la página web, contactar.htm, que permita a los visitantes de nuestro sitio

contactar con nosotros. Esta página deberá contar con los siguientes objetos de formulario:

Campo de texto: para que introduzcan su nombre. Área de texto: para que el usuario indique cual es el motivo por el que quiere contactar

con nosotros. Grupo de opciones: para que indique si es hombre o mujer. La opción por defecto será

mujer. Lista: Para indicar la provincia gallega en la que reside. La provincia por defecto será

Ourense. Campo de texto: para que introduzca el nº de la cta. bancaria. Nadie deberá ver lo que se

escribe en este campo. Casilla de verificación: para que el usuario indique si acepta que sus datos van a ser

enviado a Internet. Botón de envío: para enviar el formulario. Botón de reset: para restablecer los valores originales del formulario.

Aclarar el significado de los objetos del formulario con descripciones textuales. Utilizas las herramientas disponibles en la pestaña “Formularios” de la barra

insertar. Actualizar la página en el sitio remoto y probar que funciona. El formulario, una vez que el usuario pulse el botón de envío, debe enviarse a la

dirección de e-mail: usuariocurso@gmail.com (usuariocurso es la cuenta que has creado para este curso).

Ejercicio 7: Contenido Crear las páginas web correspondientes a cada uno de los

módulos. Estas páginas web deberán ser accesibles desde la página

principal. Mostrarán el contenido de cada módulo y permitirán

visualizar el documento PDF con la información del módulo pulsando sobre una imagen.