Especialista en desarrollo  de aplicaciones web JORNADA 3 cid deza,  moisés [email_address]
Dreamweaver <ul><li>Entorno </li></ul>
Dreamweaver <ul><li>Sitio Web:  Conjunto de documentos o páginas vinculadas con atributos compartidos, como temas relacion...
Dreamweaver <ul><li>Creación de un Sitio Web </li></ul>Diseño Gráfico Creación de la estructura física en  la herramienta ...
web 2.0 – del.icio.us <ul><li>Crear una cuenta Gmail </li></ul><ul><li>Registrase en del.icio.us ( http://delicious.com ) ...
Ejercicio <ul><li>Para familiarizarnos con el entorno de trabajo de Dreamweaver, vamos a desarrollar un proyecto consisten...
Ejercicio 1 <ul><li>Proyecto : Sitio Web del Curso Especialista </li></ul><ul><li>Descripción : Se trata de desarrollar un...
Ejercicio 1 <ul><li>Fase 1:  Realizar el diseño gráfico del sitio </li></ul><ul><ul><li>Boceto </li></ul></ul><ul><ul><li>...
Ejercicio 1 <ul><li>Diseño </li></ul><ul><ul><li>Página principal : página en la que deberá mostrarse el logotipo del curs...
Ejercicio 1 <ul><li>La página deberá crearse utilizando como base una  tabla  (Barra de Insertar  Pestaña Tablas). </li><...
Ejercicio 2: Head <ul><li>Una vez creada la página principal, y con el objetivo de aportar información acerca de la página...
Ejercicio 3: Sitio Web <ul><li>Dado que vamos a crear varias páginas, lo correcto es crear un sitio Web con Dreamweaver. P...
Ejercicio 4: Sitio Web <ul><li>Modificar el sitio web recién creado con el objetivo de definir un servidor remoto al que s...
Ejercicio 6: Formularios <ul><li>Crear la página web,  contactar.htm , que permita a los visitantes de nuestro sitio conta...
Ejercicio 7: Contenido <ul><li>Crear las páginas web correspondientes a cada uno de los módulos. </li></ul><ul><li>Estas p...
Upcoming SlideShare
Loading in...5
×

Especialista Web J3

391

Published on

Transparencias 3ª jornada curso especialista

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
391
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
47
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Especialista Web J3

  1. 1. Especialista en desarrollo de aplicaciones web JORNADA 3 cid deza, moisés [email_address]
  2. 2. Dreamweaver <ul><li>Entorno </li></ul>
  3. 3. Dreamweaver <ul><li>Sitio Web: Conjunto de documentos o páginas vinculadas con atributos compartidos, como temas relacionados, un diseño similar o un objetivo común. </li></ul><ul><li>Crear un sitio web: </li></ul><ul><ul><li>Planificar </li></ul></ul><ul><ul><li>Diseñar estructura básica </li></ul></ul><ul><ul><li>Desarrollar el sitio </li></ul></ul>
  4. 4. Dreamweaver <ul><li>Creación de un Sitio Web </li></ul>Diseño Gráfico Creación de la estructura física en la herramienta de desarrollo Transformar el diseño gráfico a HTML Desarrollar el Sitio Web en herramienta de desarrollo ¿Web corporativa? ¿Aplicación Web Intranet? Determinar público objetivo <ul><li>1.- Photoshop, Fireworks, Boceto a mano </li></ul><ul><ul><li>Página Principal </li></ul></ul><ul><ul><li>Página Primer Nivel </li></ul></ul><ul><ul><li>Página Segundo Nivel </li></ul></ul><ul><li>2.- Estructura de navegación </li></ul><ul><li>3.- Resolución </li></ul>Creación de la estructura de directorios (definir el sitio web) <ul><li>Requisitos NO funcionales </li></ul><ul><li>Compatibilidad con navegadores . Requiere hacer uso de estándares XHTML y CSS. </li></ul><ul><li>Sitio web accesible ( accesibilidad web : capacidad de acceso a la web y a sus contenidos por todas las personas independientemente de la discapacidad) </li></ul>
  5. 5. web 2.0 – del.icio.us <ul><li>Crear una cuenta Gmail </li></ul><ul><li>Registrase en del.icio.us ( http://delicious.com ) </li></ul><ul><li>Agregar las URL’s que resulten interesantes asignándoles TAGS </li></ul>
  6. 6. Ejercicio <ul><li>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 . </li></ul><ul><li>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. </li></ul><ul><li>El proyecto estará disponible en Internet y podrá ser consultado por cualquier usuario. </li></ul>
  7. 7. Ejercicio 1 <ul><li>Proyecto : Sitio Web del Curso Especialista </li></ul><ul><li>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: </li></ul><ul><ul><li>default.htm: Página principal con información corporativa y acceso al resto de páginas </li></ul></ul><ul><ul><ul><li>Modulos </li></ul></ul></ul><ul><ul><ul><ul><li>modulo1.htm: Página con información acerca del módulo1 </li></ul></ul></ul></ul><ul><ul><ul><ul><li>modulo2.html: Página con información acerca del módulo2 </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Modulo3.html: Página con información acerca del módulo3 </li></ul></ul></ul></ul><ul><ul><ul><li>Contactar </li></ul></ul></ul><ul><ul><ul><ul><li>contactar.htm: Página con un formulario que permita enviar datos de contacto. </li></ul></ul></ul></ul>
  8. 8. Ejercicio 1 <ul><li>Fase 1: Realizar el diseño gráfico del sitio </li></ul><ul><ul><li>Boceto </li></ul></ul><ul><ul><li>Definir la estructura de navegación </li></ul></ul><ul><ul><li>Resolución para la que va a ser realizada </li></ul></ul><ul><li>Fase 2 : Definir la estructura de directorios que se va a utilizar para almacenar nuestro sitio web. </li></ul><ul><li>Fase 3 : Comenzar la implementación de nuestro sitio en la herramienta de desarrollo escogida. </li></ul>
  9. 9. Ejercicio 1 <ul><li>Diseño </li></ul><ul><ul><li>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 </li></ul></ul>Encabezado (logo + titulo) Barra de navegación Zona principal Zona de menú Pie de página
  10. 10. Ejercicio 1 <ul><li>La página deberá crearse utilizando como base una tabla (Barra de Insertar  Pestaña Tablas). </li></ul><ul><li>En el encabezado deberá aparecer el logotipo del curso, así como el título. </li></ul><ul><li>El menú de la izquierda debe crearse con listas (Barra de Insertar  Pestaña Texto). Crear los hipervínculos necesarios. </li></ul><ul><li>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. </li></ul><ul><li>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). </li></ul><ul><li>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. </li></ul><ul><li>No utilizar hojas de estilo CSS. </li></ul><ul><li>La página deberá llamarse default.htm. </li></ul><ul><li>Trabajar en modo código y vista diseño. </li></ul>
  11. 11. Ejercicio 2: Head <ul><li>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: </li></ul><ul><ul><li>Palabras clave: curso, especialista, web, dreamweaver </li></ul></ul><ul><ul><li>Descripción de la página </li></ul></ul><ul><ul><li>Autor de la página </li></ul></ul><ul><ul><li>Tiempo de refresco: 120 segundos </li></ul></ul><ul><li>Utilizar las herramientas de la pestaña “Head” de la barra insertar. </li></ul>
  12. 12. Ejercicio 3: Sitio Web <ul><li>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). </li></ul><ul><ul><li>El nombre del sitio será: curso_especialista </li></ul></ul><ul><ul><li>No se utilizarán tecnologías de servidor </li></ul></ul><ul><ul><li>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). </li></ul></ul><ul><ul><li>No nos vamos a conectar, de momento con ningún servidor remoto. </li></ul></ul>
  13. 13. Ejercicio 4: Sitio Web <ul><li>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: </li></ul><ul><ul><li>ftp :// curso.ideit.es </li></ul></ul><ul><ul><ul><li>Usuario: sdi4109 </li></ul></ul></ul><ul><li>El sitio remoto estará en la ruta </li></ul><ul><ul><li>/HTML/ login_teleforma </li></ul></ul><ul><li>Cambiar las diferentes vistas del sitio. </li></ul><ul><li>Probar a sincronizar el sitio web con las diferentes opciones posibles. </li></ul>
  14. 14. Ejercicio 6: Formularios <ul><li>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: </li></ul><ul><ul><li>Campo de texto : para que introduzcan su nombre. </li></ul></ul><ul><ul><li>Área de texto : para que el usuario indique cual es el motivo por el que quiere contactar con nosotros. </li></ul></ul><ul><ul><li>Grupo de opciones : para que indique si es hombre o mujer. La opción por defecto será mujer. </li></ul></ul><ul><ul><li>Lista : Para indicar la provincia gallega en la que reside. La provincia por defecto será Ourense. </li></ul></ul><ul><ul><li>Campo de texto : para que introduzca el nº de la cta. bancaria. Nadie deberá ver lo que se escribe en este campo. </li></ul></ul><ul><ul><li>Casilla de verificación : para que el usuario indique si acepta que sus datos van a ser enviado a Internet. </li></ul></ul><ul><ul><li>Botón de envío : para enviar el formulario. </li></ul></ul><ul><ul><li>Botón de reset : para restablecer los valores originales del formulario. </li></ul></ul><ul><li>Aclarar el significado de los objetos del formulario con descripciones textuales. </li></ul><ul><li>Utilizas las herramientas disponibles en la pestaña “Formularios” de la barra insertar. </li></ul><ul><li>Actualizar la página en el sitio remoto y probar que funciona. </li></ul><ul><li>El formulario, una vez que el usuario pulse el botón de envío, debe enviarse a la dirección de e-mail: [email_address] (usuariocurso es la cuenta que has creado para este curso). </li></ul>
  15. 15. Ejercicio 7: Contenido <ul><li>Crear las páginas web correspondientes a cada uno de los módulos. </li></ul><ul><li>Estas páginas web deberán ser accesibles desde la página principal. </li></ul><ul><li>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. </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×