descargar presentacion
Anuncio
HTML / CSS
matias.albala@donweb.com
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!
matias.albala@donweb.com
