descargar presentacion
Anuncio
HTML / CSS [email protected] HTML • Cómo funciona la web? • Estructura y semántica: Texto / Listas / Links • Imágenes • Tablas • Formularios • EXTRAS Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS • Qué es, para qué sirve y cómo se usa? • Colores • Agregar estilos al texto • Cajas: Entender y modificar el box-model • Layout: Agregar estructura Introducción a la maquetación web PDF Disponible en: webinars.donweb.com ¿CÓMO FUNCIONA LA WEB? + CONTENIDO Introducción a la maquetación web + PRESENTACIÓN COMPORTAMIENTO PDF Disponible en: webinars.donweb.com ¿CÓMO FUNCIONA LA WEB? CONTENIDO Introducción a la maquetación web PDF Disponible en: webinars.donweb.com ¿CÓMO FUNCIONA LA WEB? Estructura de un documento de texto Introducción a la maquetación web PDF Disponible en: webinars.donweb.com ¿CÓMO FUNCIONA LA WEB? <html> <head> <title>Titulo del documento</title> </head> <body> <h1>Este es un t&iacute;tulo de primer nivel</h1> <p>Aqu&iacute; hay un p&aacute;rrafo que ocupa varias l&iacute;neas y sirve como intruducci&oacute;n al webinar de maquetaci&oacute;n web</p> </body> Estructura de un documento HTML Introducción a la maquetación web PDF Disponible en: webinars.donweb.com ¿CÓMO FUNCIONA LA WEB? etiqueta de apertura Introducción a la maquetación web PDF Disponible en: webinars.donweb.com ¿CÓMO FUNCIONA LA WEB? etiqueta de cierre Introducción a la maquetación web PDF Disponible en: webinars.donweb.com ¿CÓMO FUNCIONA LA WEB? nombre del atributo valor del atributo EJEMPLO: Elemento HTML + Atributo Introducción a la maquetación web PDF Disponible en: webinars.donweb.com ¿CÓMO FUNCIONA LA WEB? nombre del atributo valor del atributo EJEMPLO: Elemento HTML + Atributo Introducción a la maquetación web PDF Disponible en: webinars.donweb.com ¿CÓMO FUNCIONA LA WEB? Mi primer documento HTML Introducción a la maquetación web PDF Disponible en: webinars.donweb.com ¿CÓMO FUNCIONA LA WEB? Mi primer documento HTML Introducción a la maquetación web PDF Disponible en: webinars.donweb.com ¿CÓMO FUNCIONA LA WEB? Mozilla Developer Network: HTML Tag Reference https://developer.mozilla.org/en/docs/Web/HTML/Element HTML Dog: HTML Tags http://htmldog.com/reference/htmltags/ Webplatform.org: HTML Elements http://docs.webplatform.org/wiki/html/elements W3C: Markup Validator Service http://validator.w3.org/ Introducción a la maquetación web PDF Disponible en: webinars.donweb.com ¿CÓMO FUNCIONA LA WEB? Block de notas Netbeans Introducción a la maquetación web Notepad++ Aptana SublimeText Eclipse Dreamweaver PDF Disponible en: webinars.donweb.com HTML: TEXTO Markup estructural / Markup semántico Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: TEXTO ELEMENTOS DE TEXTO • Markup estructural títulos, párrafos, saltos de linea. • Markup semántico énfasis, citas, acrónimos, definiciones, cambios. Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: TEXTO / MARKUP ESTRUCTURAL TÍTULOS <h1>Este es un titulo de nivel 1</h1> Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: TEXTO / MARKUP ESTRUCTURAL PÁRRAFO <p>Este es un ejemplo de un parrafo</p> Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: TEXTO / MARKUP ESTRUCTURAL BOLD <p>Ejemplo de texto en <b>negrita</b>.</p> Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: TEXTO / MARKUP ESTRUCTURAL ITALIC <p>Ejemplo de texto en <i>italica</i>.</p> Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: TEXTO / MARKUP SEMÁNTICO STRONG <p>Ejemplo de texto <strong>importante</strong>.</p> Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: TEXTO / MARKUP SEMÁNTICO EMPHASIS <p>Ejemplo de texto <em>enfatizado</em>.</p> Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: TEXTO / MARKUP SEMÁNTICO <abbr> <s> <dfn> <del> <cite> <acronym> <ins> <address> Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: LISTAS Desordenadas / Ordenadas / Definición Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: LISTAS LISTAS DESORDENADAS Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: LISTAS LISTAS ORDENADAS Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: LISTAS LISTAS DE DEFINICIÓN Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: LISTAS LISTAS ANIDADAS Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: LINKS Internos / Externos / Absolutos / Relativos Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: LINKS destino texto visible dónde nos lleva al hacer click Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: LINKS Google Atributos: href=“http://www.google.html” title=“Ir a Google Argentina” target=“_self / _blank / _parent / _top” URL: Uniform Resource Locator Absoluta: Links externos Relativa Links internos en relación a donde estamos ubicados Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: IMÁGENES img / figure + figcaption Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: IMÁGENES IMG Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: TABLAS Representación de datos en formato de grilla Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: TABLAS <tr> dispositivo <tr> iPhone < 3GS <tr> iPhone 4, 4S <tr> retina? (pt) point resolution (px) pixel resolution 320 x 480 320 x 480 Si 320 x 480 640 x 960 iPhone 5 Si 320 x 568 640 x 1136 <tr> iPhone 6 SI 375 × 667 750 × 1334 <tr> iPhone 6 Plus SI 414 × 736 1242 × 2208 <tr> iPad 1, 2 & Mini 768 x 1024 768 x 1024 <tr> iPad 3, 4 768 x 1024 1536 x 2048 Si <th> Introducción a la maquetación web <td> PDF Disponible en: webinars.donweb.com HTML: TABLAS Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: FORMS Ingresar texto / Opciones / Botones Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: FORMS Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: FORMS Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: FORMS Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: FORMS Ingresar texto Introducción a la maquetación web Seleccionar opciones Botones PDF Disponible en: webinars.donweb.com HTML: FORMS INGRESAR TEXTO INPUT: Texto <input type=“text” name=“usuario” size=“15” maxlength=“30” value=“Ingresar nombre” /> INPUT: Password <input type=“password” name=“contrasena” size=“20” maxlength=“32” value=“Ingresar contrase&ntilde;” /> TEXTAREA <textarea name="comentario" cols=“20” rows=“4”>Ingrese su comentario</textarea> Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: FORMS SELECCIONAR OPCIONES SELECT <select name=“pais”> <option value=“ar”>Argentina</option> <option value=“co”>Colombia</option> <option value=“uy”>Uruguay</option> </select> INPUT: Radio button <input type=“radio” name=“genero” value=“H” /> Hombre <input type=“radio” name=“genero” value=“M” checked=“checked” />Mujer INPUT: Checkbox <input type=“checkbox” name=“suscribir” value=“newsletter” checked=“checked” /> newsletter <input type=“checkbox” name=“suscribir” value=“blog” /> Blog Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: FORMS BOTONES BUTTON <button><img src=“images/add.gif” alt=“add” width=“10” height=“10” /> Add</button> INPUT: Submit <input type=“submit” name=“subscribe” value=“Subscribe” /> INPUT: Image <input type=“image” src=“images/subscribe.jpg” width=“100” height=“20” /> Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: FORMS LABEL Y FIELDSET LABEL <label for=“user”>Nombre de usuario:</label> <input id=“user type=“text” value=”Ingrese su usuario”> <label>Contraseña: <input type=“password” name=“pass” /></label> FIELDSET <fieldset> <legend>Contacto</legend> <label>E-mail: <input type=“text” name=“email” /></label> <label>Teléfono: <input type=“text” name=“telefono” /></label> <label>Dirección: <input type=“text” name=“direccion” /></label> </fieldset> Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: FORMS Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: EXTRAS CLASES & ID Atributo: class <p class=“texto—error”>Ha ocurrido un error</p> <p class=“texto—alert”>Esta seguro que desea salir?</p> Atributo: ID <form id=“form—contacto” action=“http://donweb.com/test” method=“post” ></form> Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: EXTRAS AGRUPAR ELEMENTOS: DIV Introducción a la maquetación web PDF Disponible en: webinars.donweb.com HTML: EXTRAS AGRUPAR ELEMENTOS: SPAN Introducción a la maquetación web PDF Disponible en: webinars.donweb.com PRESENTACION Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: QUÉ ES? Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: PARA QUÉ SIRVE? selector declaración EJEMPLO: Regla CSS Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: CÓMO SE USA? SELECTORES Selector Alcance universal aplica a todos los elementos del documento de tipo elementos Ejemplo * {...} h1, h2, h3 {...} p.text-important {...} .text-important {...} de clase elementos que contienen la clase especificada de ID elementos que contienen el ID especificado hijo hijo directo del elemento declarado li > a {...} descendiente descendiente general del elemento (no necesariamente hijo directo) body a {...} adyacente elemento que es un hermano proximo del primero h1 + p {...} hermano elemento hermano del primero (no necesariamente el proximo continuo) h1 ~ p {...} Introducción a la maquetación web #header {...} PDF Disponible en: webinars.donweb.com CSS: PARA QUÉ SIRVE? propiedad valor EJEMPLO: Regla CSS Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: CÓMO SE USA? CSS: En linea <p style=“color: blue; font-size: 12px; margin-bottom: 15px; fontweight: bold;”>Parrafo de ejemplo</p> CSS: En el documento HTML <head> <title>Using Internal CSS</title> <style type=“text/css”> body { font-family: arial; background-color: rgb(185,179,175);} h1 { color: white; } </style> </head> Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: CÓMO SE USA? REFERENCIA EXTERNA <head> <title>Mi primer sitio web</title> <link href=“css/styles.css” type=“text/css” rel=“stylesheet” /> </head> Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: CÓMO SE USA? CASCADA Y HERENCIA ULTIMA REGLA p { color: green; } p { color: red; } IMPORTANT p { color: black!important; } ESPECIFICIDAD p { color: green; } header p { color: blue; } p.intro { color: yellow; } p#alert {color: red; } " http://www.anieto2k.com/2008/08/12/selectores-css-y-especificidad-css-%C2%BFcomo-usarlos/ http://designshack.net/articles/css/what-the-heck-is-css-specificity/ http://css-tricks.com/specifics-on-css-specificity/ http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: COLORES RGB - HEX / Background / Opacity Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: COLORES RGB - HEXA NOMBRE CLAVE color: turquoise; HEXADECIMAL color: #40e0d0; RGB color: rgb(64, 224, 208); Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: COLORES OPACITY RGBA background-color: black background-color: rgba(0, 0, 0, 0.5); OPACITY background:#000000; opacity: 0.5; Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: TEXTO Tamaño / Tipografías / Estilo / Espaciado Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: TEXTO SERIF SANS SERIF MONOSPACE Georgia Times Times New Roman Arial Verdana Helvetica OCR A Std Courier New Introducción a la maquetación web Droid Sans Mono PDF Disponible en: webinars.donweb.com CSS: TEXTO WEIGHT STYLE Light Regular Bold Normal Italic Oblique Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: TEXTO FONT-FAMILY body { font-family: “Helvetica Neue”, Arial, sans-serif; } h1, h2, h3, h4 { font-family: “Times New Roman”, Times, serif; } deseada + segura + default http://cssfontstack.com/ Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: TEXTO FONT-SIZE body { font-family: “Helvetica Neue”, Arial, sans-serif; font-size: 100%; } h1 { font-size: 200%; } h2 { font-size: 1.5em; } p { font-size: 12px; } Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: TEXTO FONT-SIZE PIXELES PORCENTAJE EMS body 16px body 100% body h1 32px h1 200% h1 2em h2 1.5em h3 1.125em h2 24px h3 18px = h2 150% h3 133% = p Introducción a la maquetación web 100% 1em PDF Disponible en: webinars.donweb.com CSS: TEXTO FONT-WEIGHT body { font-family: “Helvetica Neue”, Arial, sans-serif; font-size: 100%; font-weight: normal; } h1, h2 { font-weight: bold; } h1 { font-size: 200%; } h2 { font-size: 1.5em; } Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: TEXTO FONT-STYLE body { font-family: “Helvetica Neue”, Arial, sans-serif; font-size: 100%; font-weight: normal; font-style: normal; } h1, h2 { font-weight: bold; } h1 { font-size: 200%; } h2 { font-size: 1.5em; } h2 a { font-style: oblique; } em { font-style: italic; } Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: TEXTO TEXT-TRANSFORM body { font-family: “Helvetica Neue”, Arial, sans-serif; font-size: 100%; font-weight: normal; font-style: normal; } h1 { text-transform: uppercase; } h2 { text-transform: lowercase; } h3 { text-transform: capitalize; } Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: TEXTO TEXT-ALIGN body { font-family: “Helvetica Neue”, Arial, sans-serif; font-size: 100%; font-weight: normal; font-style: normal; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; } Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: TEXTO LINE-HEIGHT body { font-family: “Helvetica Neue”, Arial, sans-serif; font-size: 100%; font-weight: normal; font-style: normal; line-height: 1.5; } "No podemos resolver problemas usando el mismo tipo de razonamiento que usamos cuando los creamos." - Albert Einstein - Introducción a la maquetación web "No podemos resolver problemas usando el mismo tipo de razonamiento que usamos cuando los creamos." - Albert Einstein - PDF Disponible en: webinars.donweb.com CSS: TEXTO FONT http://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/ Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: TEXTO FONT body { font-family: “Helvetica Neue”, Arial, sans-serif; font-size: 100%; font-weight: normal; font-style: normal; } p { font: font-style font-variant font-weight fontsize/line-height font-family; } p { font: italic small-caps normal 1em/1.5 Arial, Helvetica, sans-serif; } Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: CAJAS Tamaño / Border/ Padding / Margin Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: CAJAS ANCHO & ALTO div { min-width: 10em; max-width: 1000px; width: 70% } div { min-height: 10em; max-width: 500px; height: 50%; } Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: CAJAS OVERFLOW .div1 { overflow: visible; } .div2 { overflow: scroll; overflow: auto; } .div3{ overflow: hidden; } Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: CAJAS BOX-MODEL MARGIN BORDER PADDING HEIGHT WIDTH CONTENIDO Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: CAJAS BOX-MODEL MARGIN BORDER PADDING HEIGHT WIDTH CONTENIDO box-sizing: border-box; http://www.paulirish.com/2012/box-sizing-border-box-ftw/ Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: CAJAS PADDING & MARGIN div { padding-top: 10px; padding-right: 50px; padding-bottom: 10px; padding-left: 50px; TOP LEFT RIGHT margin-top: 20px; margin-right: auto; margin-bottom: 20px; margin-left: auto; } BOTTOM div { padding: 50px 10px 50px 10px; margin: 20px auto 20px auto; } Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: CAJAS BORDER Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: CAJAS BORDER TOP div { border-width: 2px; border-style: solid; border-color: #000; } LEFT RIGHT div { border: 2px solid #000; } BOTTOM Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: LAYOUT Float Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: LAYOUT Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: LAYOUT FLOAT .wrapper .sidebar Introducción a la maquetación web .content PDF Disponible en: webinars.donweb.com CSS: LAYOUT FLOAT .wrapper { overflow:hidden; } .sidebar { float:left; } .content { float:left; overflow: auto; } Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CSS: LAYOUT CLEARFIX http://nicolasgallagher.com/micro-clearfix-hack/ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } /* For IE 6/7 only */ .clearfix { *zoom: 1; } Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CONSEJOS Y BUENAS PRACTICAS HTML • ELEMENTOS: siempre en minúsculas • ATRIBUTOS: usar comillas para los valores e incluir siempre los atributos obligatorios (alt para imágenes, title para links) • TABLAS: NO USARLAS para layout • ESTRUCTURA: Separar contenido de presentación • SEMANTICA: Pensar que elemento es el mas indicado para representar la info que quiero mostrar • FORMULARIOS: Usar labels y fieldset a conciencia. Pensar en el usuario • DIVITIS: Usar divs y spans para agrupar elementos, pero no abusar. • CARACTERES ESPECIALES: Usar las entidades html. Introducción a la maquetación web PDF Disponible en: webinars.donweb.com CONSEJOS Y BUENAS PRACTICAS CSS • Utilizar un archivo (.css) separado para los estilos. Referencia externa. • SELECTORES: Reducir al máximo posible la longitud de las reglas • PROPIEDADES: Utilizar las formas cortas cuando sea posible • BOX-MODEL: La base fundamental al construir layouts. • FLOAT: No abusar. Pensar soluciones alternativas. Recordar limpiar floats en contenedores. • CLEARFIX: El mejor aliado al momento de maquetar. Introducción a la maquetación web PDF Disponible en: webinars.donweb.com “Si no puedes explicarlo de una manera simple, no lo entiendes lo suficientemente bien.” – Albert Einstein Introducción a la maquetación web PDF Disponible en: webinars.donweb.com MUCHAS GRACIAS! [email protected]
