Producción Digital I. Clase 11 01/11/2017. Wenceslao Zavala

Transcripción

1 Producción Digital I Clase 11 01/11/2017 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 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 7

8 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 */ 8

9 Formularios

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

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

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

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

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

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

16 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

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

18 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

19 Personalizar campos de Formulario Selectores de Atributos: input[type=text] { } es un selector de atributos, y sólo seleccionará esos elementos, con el atributo correspondiente. Según las especificaciones de CSS, los navegadores pueden o no usar información sobre los atributos predeterminados.

20 Selector :nth-child() El selector nth-child (n) coincide con cada elemento que es el enésimo hijo, independientemente del tipo, de su elemento principal. También se puede hacer para: el primero, último, pares o impares. firt-child, el primero last-child, el último nth-child(even), los pares nth-child(odd), los impares

21 Slider function carousel() { var i; var x = document.getelementsbyclassname("myslides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } slideindex++; if (slideindex > x.length) {slideindex = 1} x[slideindex-1].style.display = "block"; settimeout(carousel, 2000); // Cambia la imagen cada 2 segundos }

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

23 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

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

25 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

26 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

27 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

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

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

30 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; 30

31 Producción Digital I Clase 11 01/11/2017 Wenceslao Zavala