Producción Digital I. Clase 8. Wenceslao Zavala

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Producción Digital I. Clase 8. Wenceslao Zavala"

Javier Salinas Sánchez
hace 5 años
Vistas:

1 Producción Digital I Clase 8 Wenceslao Zavala

2 T.P. N 5 Galería Incluir en el sitio trabajado una galería de fotos con imágenes pequeñas y al hacer click o pasar con el mouse por encima, que se vean de un tamaño mayor (con un mínimo de seis imágenes). Es importante que el tamaño de ninguna imagen sea achicada o agrandada en dentro del HTML (dreamweaver), sólo con CSS, o un editor de imagen (Photoshop). Importante: Recordar el orden y nombres de los archivos y carpetas. Ningún nombre de archivo ni carpeta debe tener acentos, Ñ, espacios o signos. Sólo pueden ser letras número y _ o -. Fecha de entrega: Clase N 8 (11/10/17). Modo de Entrega: Se sube vía FTP.

3 HTML + CSS HTML CSS <contenidos> Apariencia 3

4 Caja de elemento HTML 4

5 CSS Reset Se deben normalizar los estilos CSS antes de empezar. Los navegadores tienen diferentes propiedades predeterminadas para los elementos, por eso se debe hacer que todos los elementos tengan el mismo aspecto. * { margin:0; padding: 0;}

6 #encabezado #navegador #contenido.noticia.noticia.noticia.noticia.noticia.noticia #pie

8 Desplazamiento de Artículos

10 El diseño y desarrollo deben responder al comportamiento del usuario acorde al medio en el que se visualice. Ethan Marcotte Responsive Web Design

11 En qué consiste Responsive Web Design Grillas o diseños flexibles Uso de imágenes planificado Utilización de CSS MediaQueries Resolución de pantalla Ver cuando aplicar Javascript

12 CSS para Diferentes Soportes Se determina el CSS según el soporte MediaQueries Es un módulo CSS3 que permite que el contenido pueda adaptarse según las condiciones del dispositivo. Como la resolución de la pantalla y la orientación del dispositivo. Es la base para el diseño web adaptable. <link rel="estilos" href="pantallas.css" /> <link rel="estilos" href= tabletas.css" /> <link rel="estilos" href= moviles.css" />

13 Formularios

Formularios Cómo trabaja un formulario? Dos partes para que trabaje un formulario. La que ve el usuario con los campos y botones, y la que procesa la información que ingresa el usuario 1.

14 Formularios Cómo trabaja un formulario? Dos partes para que trabaje un formulario. La que ve el usuario con los campos y botones, y la que procesa la información que ingresa el usuario 1. El usuario completa el formulario y presiona enviar. 2. El navegador compila la información y la envía a una aplicación web en el servidor 3. La aplicación web en el servidor la recibe y procesa. 4. Luego de procesada la información, la aplicación le muestra una pantalla de respuesta al usuario.

15 Formularios Declaración de un Formulario <form> Más que una etiqueta de marcado es una declaración de que una acción se ejecutará, y que permitirá enviar los datos seleccionados e ingresados a través de los campos del formulario. Ejemplo: <form method="post" action="respuesta.php >

16 Formularios Atributos de la etiqueta <form> Al declarar un formulario la etiqueta de apertura incluye dos atributos sin los cuales el formulario no funciona: ACTION Señala la ruta donde se procesan los datos del formulario. METHOD Especifica cómo se va a enviar la información. Puede ser GET o POST y determina la forma de envío de los datos.

17 Formularios Fieldset y Legend Fieldset es usado para indicar un grupo lógico de los campos. Toda etiqueta Fieldset incluye una etiqueta Legend que le da un nombre a los campos agrupados. Label Relaciona un texto a un elemento <input>. <label for="lnombre">nombre:</label> <input type="text" id="lnombre" name="fnombre" />

18 Formularios Campos <input type="text > La etiqueta <input> indica un elemento simple de formulario. Lleva dos atributos: 1. type (tipo de elemento) 2. name (para asignarle un nombre) Ejemplo: <input type="text" name="nombre">

19 Formularios Areas de Texto <textarea> Las Áreas de Texto son campos de entrada donde el usuario podrá escribir comentarios, consultas, etc. Se diferencia de los campos de texto por contener muchas líneas. Ejemplo: <textarea name="comentarios" id="comentarios" cols="45" rows="5"></textarea>

20 Formularios Casillas de Verificación <input type="checkbox"> Permiten elegir entre varios elementos de una lista. Seleccionando uno o varios de los elementos de una lista. El atributo name siempre es el mismo y lo que varía es el atributo valor. Música Cine Leer Botones de Opción <input type="radio"> Indican una lista de elementos de los cuales sólo puede seleccionarse uno. Masculino Femenino

21 Formularios Listas/Menú <select> Los combos o selecciones permiten al usuario elejir uno o varios elementos de un menú o lista. Ejemplo: <select name="pais" id="pais"> <option selected="selected">seleccione país</option> <option value="argentina">argentina</option> <option value="brasil">brasil</option> <option value="colombia">colombia</option> </select>

22 Formularios Botones <input type="submit"> <input type="reset > El botón de envío (submit) le indica al navegador que envíe al servidor los datos del formulario. Ejemplo: <input type="submit" name="button" id="button" value="enviar" /> Validación de formularios Agregar un atributo al campo para obligar al usuario a rellenar determinados datos. Required Dreamweaver maneja validar formularios con el componente llamado Spry

23 T.P. N 6 Formulario Consignas: A partir del proyecto del sitio trabajado se deberá agregar un formulario de contacto donde el usuario cargue su nombre, , sexo, país y comentarios como mínimo. Es importante que el formulario cuente con una validación para que el usuario complete de manera obligatoria el nombre, un válido y el país como mínimo para pasar a la ventana de respuesta. El formulario de contacto también debe tener modificadas las propiedades de apariencia para que no sean las predeterminadas del navegador, y las etiquetas de los campos se deben acomodar según el dispositivo. Fecha de entrega: Clase N 9 (18/10/17) vía FTP.

24 Producción Digital I Clase 8 Wenceslao Zavala

Documentos relacionados

Producción Digital I. Clase 12 03/11/2016. Wenceslao Zavala

Producción Digital I. Clase 12 03/11/2016. Wenceslao Zavala Producción Digital I Clase 12 03/11/2016 Wenceslao Zavala #encabezado #navegador #contenido.noticia.noticia.noticia.noticia.noticia.noticia #pie HTML + CSS HTML CSS Apariencia 3 Caja de elemento