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

Please download to get full document.

View again

All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
 3
 
  Producción Digital I Clase 11 01/11/2017 Wenceslao Zavala #encabezado #navegador #contenido.noticia.noticia.noticia.noticia.noticia.noticia #pie HTML + CSS HTML CSS Apariencia 3 Caja de elemento
Related documents
Share
Transcript
Producción Digital I Clase 11 01/11/2017 Wenceslao Zavala #encabezado #navegador #contenido.noticia.noticia.noticia.noticia.noticia.noticia #pie HTML + CSS HTML CSS contenidos Apariencia 3 Caja de elemento HTML 4 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;} 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 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 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 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. 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. 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 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. 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 / 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 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 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 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 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 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. 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 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 } El diseño y desarrollo deben responder al comportamiento del usuario acorde al medio en el que se visualice. Ethan Marcotte Responsive Web Design 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 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 / 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 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 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 CSS MediaQueries Desktop 1100px Tablets (max-width: 768px) { } Smartphone (max-width: 480px) { } 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 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 Producción Digital I Clase 11 01/11/2017 Wenceslao Zavala
Related Search
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks