Slide 1
Slide 1 text
HTML
+CSS
Slide 2
Slide 2 text
SERGIO NOUVEL
@SHESHO
Slide 3
Slide 3 text
Slide 4
Slide 4 text
USUARIO NAVEGADOR
PETICIÓN
SERVIDOR
RESPUESTA
Slide 5
Slide 5 text
TÚ CHROME
“GUARDA MIS
DATOS”
“OK, DUDE”
PÁGINA WEB
(HTML+CSS
+IMÁGENES)
Slide 6
Slide 6 text
HTML = CONTENIDO
“QUÉ”
CSS = PRESENTACIÓN
“CÓMO”
Slide 7
Slide 7 text
HTML = CONTENIDO
“HOOOLA, LES QUIERO DECIR QUE BLA
BLA BLA”
CSS = PRESENTACIÓN
“OK, ESO VA CON TEXTO ROJO Y 2 PX DE
MARGEN”
Slide 8
Slide 8 text
HTML DICE: Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Cras est est, condimentum a
vulputate ut, imperdiet nec elit
Aenean nec dui et risus suscipit
malesuada. Nunc auctor pellentes
nulla in suscipit. Lorem ipsum dol
sit amet, consectetur adipiscing
elit. Donec purus nisl, vulputate
vitae pretium tincidunt, pharetr
eget magna. Etiam libero
pellentesque
placerat
SDFDSFSFSDF
SDFFFF
“ESO ES UN PÁRRAFO”
“ESO ES UN TÍTULO 1”
“AHÍ TIENE QUE IR UNA
IMAGEN”
“ESO ES UN LISTADO”
Slide 9
Slide 9 text
HTML DICE: Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Cras est est, condimentum a
vulputate ut, imperdiet nec elit
Aenean nec dui et risus suscipit
malesuada. Nunc auctor pellentes
nulla in suscipit. Lorem ipsum dol
sit amet, consectetur adipiscing
elit. Donec purus nisl, vulputate
vitae pretium tincidunt, pharetr
eget magna. Etiam libero
pellentesque
placerat
SDFDSFSFSDF
SDFFFF
Slide 10
Slide 10 text
CSS DICE: Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Cras est est, condimentum a
vulputate ut, imperdiet nec elit
Aenean nec dui et risus suscipit
malesuada. Nunc auctor pellentes
nulla in suscipit. Lorem ipsum dol
sit amet, consectetur adipiscing
elit. Donec purus nisl, vulputate
vitae pretium tincidunt, pharetr
eget magna. Etiam libero
pellentesque
placerat
SDFDSFSFSDF
SDFFFF
“ESE LINK VA SUBRAYADO”
“ESO VA CON ARIAL”
“ESTA PARTE VA EN
NEGRITA Y BORDE ROJO”
“ESA CAJA VA A LA IZQUIERDA”
Slide 11
Slide 11 text
CSS DICE: Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Cras est est, condimentum a
vulputate ut, imperdiet nec elit
Aenean nec dui et risus suscipit
malesuada. Nunc auctor pellentes
nulla in suscipit. Lorem ipsum dol
sit amet, consectetur adipiscing
elit. Donec purus nisl, vulputate
vitae pretium tincidunt, pharetr
eget magna. Etiam libero
pellentesque
placerat
SDFDSFSFSDF
SDFFFF
text-decoration: underline;
font-family: arial;
font-weight: bold;
border: 1px solid red;
float: left;
Slide 12
Slide 12 text
CSS
HTML
HTML
HTML
HTML
Slide 13
Slide 13 text
HTML
ES
SEMÁNTICO
Slide 14
Slide 14 text
SINTAXIS HTML
contenido…
APERTURA
CIERRE
Slide 15
Slide 15 text
Esto
es
una
negrita
y
esto
no
lo
es.
Esto
está
en
cursiva
y
esto
no
lo
está.
Esto
es
un
perro
y
esto
no
lo
es.
Slide 16
Slide 16 text
Esto
es
una
negrita
y
esto
no
lo
es.
Esto
está
en
cursiva
y
esto
no
lo
está.
Esto
es
un
perro
y
esto
no
lo
es.
Esto es una negrita
y esto no lo es.
Esto está en cursiva
y esto no lo está.
y esto no lo es.
Slide 17
Slide 17 text
Qué
bonito
te
queda
ese
vestido!
Slide 18
Slide 18 text
ALGUNAS ETIQUETAS SE CIERRAN
A SÍ MISMAS
A
continuación,
un
salto
de
línea:
Gracias,
salto
de
línea.
Slide 19
Slide 19 text
ALGUNAS ETIQUETAS SE CIERRAN
A SÍ MISMAS
A
continuación,
una
imagen:
Gracias,
imagen.
Slide 21
Slide 21 text
ALGUNAS ETIQUETAS PUEDEN
CONTENER A OTRAS (ANIDACIÓN)
Esto es un párrafo y esto es un vínculo dentro del párrafo. Esto es sólo párrafo.
Esto no es párrafo ni vínculo.Slide 22
Slide 22 text
Y OTRAS PUEDEN CONTENERSE A
SÍ MISMAS
Esto
es
una
"div",
y
esto
es
una
sub
"div"
dentro
de
otra
y
esto
es
parte
de
la
“div”
grande
Slide 23
Slide 23 text
Esto
es
una
"div",
y
ETIQUETA “PARENT”
ETIQUETA “CHILD”
esto
es
una
sub
"div"
dentro
de
otra
y
esto
es
parte
de
la
“div”
grande
Slide 24
Slide 24 text
...SÍ, EXACTO
Slide 25
Slide 25 text
LA GRACIA DE LAS ETIQUETAS SON
SUS ATRIBUTOS
Este
vínculo
no
lleva
a
ninguna
parte
Este
vínculo
me
lleva
a
example.com
Slide 26
Slide 26 text
LAS ETIQUETAS PUEDEN TENER
MUCHOS ATRIBUTOS
Home
![]()
(OJO, SIEMPRE VAN EN LA ETIQUETA DE APERTURA)
Slide 27
Slide 27 text
href
src
title
target
type
URL DEL LINK
UBICACIÓN DEL RECURSO
LEYENDA AL PASAR EL MOUSE
PARA ABRIR EN VENTANA NUEVA
SI ES UN BOTÓN, UN CHECKBOX,
UN CAMPO DE TEXTO, ETC.
Slide 29
Slide 29 text
ALGUNOS ATRIBUTOS NO
NECESITAN UN VALOR
<input
type="text"
required
/>
<input
type="checkbox"
checked
/>
Slide 30
Slide 30 text
LA PÁGINA WEB MÁS BÁSICA DEL
UNIVERSO ES ASÍ:
...
...
Slide 31
Slide 31 text
<meta>
<link>
<script>
<style>
</head>
TÍTULO DE LA PÁGINA
FORMATO DE CARACTERES
E INFO ÚTIL PARA GOOGLE
VINCULAR CSS, MOSTRAR
FAVICONS, ETC
INSERTAR JAVASCRIPT
INSERTAR CSS DIRECTAMENTE
Slide 32
Slide 32 text
BLOCK
V/S
INLINE
Slide 33
Slide 33 text
BLOCK: UNA CAJA QUE OCUPA SU
CARRIL PROPIO
Block&
Block&(predeterminado)&
Block&
Slide 34
Slide 34 text
ALGUNAS ETIQUETAS BLOCK
-
"CAJA" NO SEMÁNTICA
PÁRRAFO
ENCABEZADO DE LA PÁGINA
LISTADO (VIÑETAS)
INFORMACIÓN
COMPLEMENTARIA (SIDEBAR)
Slide 35
Slide 35 text
INLINE: FLUYE CON EL TEXTO Y NO
TIENE DIMENSIONES
Hola, esto es un párrafo, y
esto es un elemento inline
dentro de este párrafo.
Slide 36
Slide 36 text
Hola, esto es un párrafo, y esto es un elemento inline dentro de ese párrafo.
Slide 38
Slide 38 text
HTML5
Slide 39
Slide 39 text
HTML5
ES
HTML.
Slide 40
Slide 40 text
ETIQUETAS HTML5: MEDIA
LIENZO DE DIBUJO
ADIVINEN
ADIVINEN
Slide 41
Slide 41 text
ETIQUETAS HTML5 ESTRUCTURALES
ENCABEZADO
INFO COMPLEMENTARIA
(SIDEBAR)
PIE DE PÁGINA
GRUPO DE ENCABEZADOS
MENÚ DE NAVEGACIÓN
Slide 42
Slide 42 text
ETIQUETAS HTML5 SEMÁNTICAS
Slide 43
Slide 43 text
CLASS
& ID
Slide 45
Slide 45 text
"MARCAN" EL HTML CON NOMBRES
QUE LUEGO USAREMOS EN CSS
"A
todos
los
párrafos
con
nombre
de
clase
'destacado',
se
les
solicita
usar
fuente
Tahoma
a
la
brevedad
posible."
-‐
CSS
Slide 46
Slide 46 text
CLASS = MUCHAS VECES
“PERRO”
ID = SÓLO UNA VEZ
“FIRULAIS”
Slide 47
Slide 47 text
CLASS = VARIAS A LA VEZ
“PERRO COLLIE”
ID = SÓLO UNA VEZ
“FIRULAIS”
Slide 48
Slide 48 text
CLASS = REUTILIZACIÓN
“HEY! USTEDES!”
ID = DIFERENCIACIÓN
“TÚ, SOLAMENTE TÚ”
Slide 50
Slide 50 text
CSS
CASCADING STYLE SHEETS
Slide 51
Slide 51 text
SINTAXIS CSS
selector
{
regla1:valor1;
regla2:valor2;
}
QUÉ SE MODIFICARÁ
CÓMO SE MODIFICARÁ
...FIN
Slide 52
Slide 52 text
SINTAXIS CSS
a
{
color:green;
font:Arial;
}
QUÉ SE MODIFICARÁ
CÓMO SE MODIFICARÁ
...FIN
"A TODAS LAS ETIQUETAS …"
Slide 53
Slide 53 text
SINTAXIS CSS
h1
{
width:100px;
margin:1em;
}
QUÉ SE MODIFICARÁ
CÓMO SE MODIFICARÁ
...FIN
"A TODAS LAS ETIQUETAS
…"
Slide 54
Slide 54 text
CSS TE CAMBIARÁ LA VIDA
a
{
color:red;
}
SIN CSS :(
Slide 55
Slide 55 text
SINTAXIS DE SELECTORES
perro
.gris
#firulais
SELECTOR HTML
class="gris"
id="firulais"
Slide 56
Slide 56 text
SINTAXIS DE SELECTORES
article
.button
#toggle
SELECTOR HTML
class="button"
id="toggle"
Slide 57
Slide 57 text
SINTAXIS DE SELECTORES
perro.gris
perro#firulais
perro.gris.maltes
SELECTOR HTML
Slide 66
Slide 66 text
MODELO DE CAJA
OUTLINE
Slide 67
Slide 67 text
header
{
margin-‐top:100px;
margin-‐right:50px;
margin-‐bottom:40px;
margin-‐left:90px;
}
Slide 68
Slide 68 text
header
{
margin:100px
50px
40px
90px;
}
...LA MAGIA DEL SHORTAND
Slide 69
Slide 69 text
footer
{
padding-‐top:40px;
padding-‐right:10px;
padding-‐bottom:40px;
padding-‐left:10px;
}
Slide 70
Slide 70 text
footer
{
padding:40px
10px;
}
...LA MAGIA DEL SHORTAND
Slide 71
Slide 71 text
aside
{
border-‐color:#ffc;
border-‐style:solid;
border-‐width:2px;
}
Slide 72
Slide 72 text
aside
{
border:2px
solid
#ffc;
}
...LA MAGIA DEL SHORTAND
Slide 73
Slide 73 text
FRAME...
WORKS?
Slide 74
Slide 74 text
HTML = BOILERPLATE
CSS = BOOTSTRAP
JS = JQUERY
Slide 75
Slide 75 text
HTML = HAML
CSS = SASS
JS = COFFEESCRIPT
LENGUAJES DE ABSTRACCIÓN/
PREPROCESADORES
Slide 76
Slide 76 text
(GRACIAS, RUBY)
Slide 77
Slide 77 text
ABSTRACCIÓN
.container
%strong
Hola
%a{:href=>"#"}
Click
here
#featured
%em
Look!
HAML HTML
Hola
Click
here
Look!
Slide 78
Slide 78 text
ABSTRACCIÓN
.container
width:
300px
color:
red
a
border:
none
.item
cursor:
pointer
SASS CSS
.container
{
width:
300px;
color:
red;
}
.container
a
{
border:
none;
}
.container
.item
{
cursor:
pointer;
}
Slide 79
Slide 79 text
BORRE
CÓDIGO.
Slide 80
Slide 80 text
GRACIAS.
slideshare.net/fondiu
www.continuum.cl