especialista web j3
Post on 12-Jun-2015
462 Views
Preview:
DESCRIPTION
TRANSCRIPT
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.
top related