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

Transcripción

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

2 #encabezado #navegador #contenido.noticia.noticia.noticia.noticia.noticia.noticia #pie

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 Elemento de Línea o Bloque El estándar HTML clasifica a todos sus elementos en dos grandes grupos: elementos en línea y elementos de bloque. Los elementos de bloque ("block elements" en inglés) siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea. Los elementos en línea ("inline elements" en inglés) no empiezan necesariamente en nueva línea y sólo ocupan el espacio necesario para mostrar sus contenidos. 6

7 Barra de Navegación Barra de Navegación = Lista de Enlaces: Una barra de navegación necesita HTML estándar como base. Una barra de navegación es básicamente una lista de enlaces, por lo que el uso de la <ul> y elementos <li> tiene mucho sentido: <ul> <li><a href= index.html">home</a></li> <li><a href="noticias. html">noticias</a></li> <li><a href="contacto. html">contacto</a></li> </ul> <ul> Unorder List <li> List

8 Barra de Navegación Existen 2 formas para crear una barra horizontal de navegación: Usando el método inline li { display:inline;} li a { display: inline-block;} Usando el método floating li { float:left ;} li a { display: block;} Ambos métodos sirven, pero: Para links de un mismo tamaño se debe usar el método floating. Este elemento no reconoce altura de la caja, ya que está flotante. Para un menú centrado se debe usar el método Inline. Pero no se le puede determinar un ancho a la caja.

9 Reglas Específicas Son reglas que le dan una ruta de pertenencia al elemento de HTML para definir propiedades específicas. #nav ul li a {color:#ff00ff;} Sólo para los links que se encuentren en la barra de navegación que estén dentro de una lista. Esto no aplica a los demás vínculos del HTML 9

10 Seudo-clases y seudo-elementos Son reglas de CSS que se utiliza para añadir propiedades a un estado de un elemento. Sintaxis de las pseudo-classes: selector:pseudo-clase { propiedad:valor; } El más utilizado es para el Roll-Over. a:hover {color:#ff00ff;} /* link mouse over */ 10

11 Formularios

12 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.

13 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 >

14 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.

15 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" />

16 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">

17 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>

18 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

19 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>

20 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

21 T.P. N 6 para Diferentes Dispositivos A partir del sitio trabajado, se deberá diseñar la estructura del documento de manera que el mismo sea visible de manera correcta para diferentes dispositivos (pantallas y celulares/tabletas) utilizando una sola hoja de estilos CSS. Pantallas: 1100px Tabletas: 768px Móviles: 480px Importante: Recordar que los nombres de archivo o carpetas NO deben tener acentos, Ñ, espacios o signos. Sólo pueden ser letras número y _ o -. Entrega: Clase N 8 (06/10/16) Se sube vía FTP. 21

22 T.P. N 7 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 9 (14/10/16). Modo de Entrega: Se sube vía FTP.

23 T.P. N 8 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 11 (27/10/16) vía FTP.

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

25 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

26 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" />

27 Mi Sitio Título Principal Seccion 1 Seccion 2 Seccion 3 Seccion 4 Seccion 5 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec augue lacus, aliquam in, luctus in, gravida vel, mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc aliquet ultrices ante Mauris nunc dolor, egestas vel, auctor sed, dignissim vitae, enim. Phasellus tincidunt. Phasellus vel wisi id neque cursus rhoncus. Morbi cursus tristique est. Título noticia 1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec augue lacus, aliquam in, luctus in, gravida vel, mi. + info Título noticia 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec augue lacus, aliquam in, luctus in, gravida vel, mi. + info Título noticia 3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec augue lacus, aliquam in, luctus in, gravida vel, mi. + info Título noticia 4 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec augue lacus, aliquam in, luctus in, gravida vel, mi. + info Título noticia 5 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec augue lacus, aliquam in, luctus in, gravida vel, mi. + info Título noticia 6 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec augue lacus, aliquam in, luctus in, gravida vel, mi. + info Datos del pie de página 2016

28 Mi Sitio Seccion 1 Seccion 2 Seccion 3 Seccion 4 Seccion 5 Título Principal Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec augue lacus, aliquam in, luctus in, gravida vel, mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc aliquet ultrices ante Mauris nunc dolor, egestas vel, auctor sed, dignissim vitae, enim. Phasellus tincidunt. Phasellus vel wisi id neque cursus rhoncus. Morbi cursus tristique est. Título noticia 1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec augue lacus, aliquam in, luctus in, gravida vel, mi. + info Título noticia 3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec augue lacus, aliquam in, luctus in, gravida vel, mi. + info Título noticia 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec augue lacus, aliquam in, luctus in, gravida vel, mi. + info Título noticia 4 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec augue lacus, aliquam in, luctus in, gravida vel, mi. + info Datos del pie de página 2016

29 Mi Sitio Seccion 1 Seccion 2 Seccion 3 Seccion 4 Seccion 5 Título Principal Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec augue lacus, aliquam in, luctus in, gravida vel, mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc aliquet ultrices ante Mauris nunc dolor, egestas vel, auctor sed, dignissim vitae, enim. Phasellus tincidunt. Phasellus vel wisi id neque cursus rhoncus. Morbi cursus tristique est. Título noticia 1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec augue lacus, aliquam in, luctus in, gravida vel, mi. + info Título noticia 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec augue lacus, aliquam in, luctus in, gravida vel, mi. + info Título noticia 3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec augue lacus, aliquam in, luctus in, gravida vel, mi. + info Datos del pie de página 2016

30 CSS MediaQueries Desktop 1100px Tablets (max-width: 768px) { } Smartphone (max-width: 480px) { }

31 Posicionamiento Las propiedades de posicionamiento permiten colocar un elemento sin importar el flujo del HTML. Static: Predeterminado Está siempre posicionado de acuerdo con el flujo normal de la página. Fixed: Se coloca en relación con la ventana del navegador. Relative: Situado con relación a su posición normal Absolute: Posicionado en relación con el primer elemento padre que tiene una posición que no sea estática. Si no se encuentra dicho elemento, el bloque de contención es <html> 31

32 Propiedades CSS3 Mantener Padding(relleno) en el ancho de Caja: box-sizing: border-box; Bordes redondeados: border-radius: 6px; Sombra de Cajas: box-shadow: 2px 2px 2px #333; 32

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