Ixdacursomodulo4 110628111208 Phpapp01

Maquetado
Diseo de interfaces y maquetado web
Manuel Razzari
http://convistaalmar.com.ar
http://creativecommons.org/licenses/by/2.5/ar/
Qu es una pgina web?
Qu es un tag?
HTML
Markup language: lenguaje de marcado
Tag: etiqueta
Hola, <strong>que tal</strong>
Qu es un tag?
Puedo poner una etiqueta adentro de otra.
<p>Hola, <strong>que tal</strong></p>
Qu es un tag?
Toda etiqueta que se abre tiene que cerrarse.
Siempre tiene que quedar una adentro de otra.
Bien:
<p>Hola, <strong>que tal</strong></p>
Mal:
<p>Hola, <strong>que tal</p></strong>
7
rbol de elementos
Doctype
Nos dice que tipo de documento es y su versin.
Head
Informacin acerca de la pgina.
10
Title
Aparece en la barra de ttulo y en los tabs.
11
Title
Es el link principal en los resultados de bsqueda.
12
http://www.socialpatterns.com/search-engine-optimization/writing-better-titles/
Title
13
http://www.deyalexander.com.au/publications/page-titles.html
Body
Lo que se ve dentro de la ventana del navegador
14
El validador
Cmo s que lo estoy haciendo bien?
http://validator.w3.org
Nos asegura que:
Los tags estn bien tipeados
Estn correctamente anidados
No falta ningn elemento requerido
No hay errores de sintaxis
15
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you
El validador
<p>Hola, <strong>que tal</p></strong>
16
Links
HTML
Markup Language
17
Links
HTML
HyperText Markup Language
pagina2.html
foto.jpg
pagina1.html
etc.
18
Links
Link entre dos pginas.
a: ancla
href: referencia hipertextual
pagina1.html
19
http://glyphobet.net/blog/essay/206
Links
a: ancla
pagina1.html
20
Links
a: ancla
pagina1.html
21
Links
a: ancla
pagina1.html
22
pagina2.html
Atributos
<a href="pagina2.html">ir a pgina 2</a>
nombre
23
valor
URLs
URL absoluta:
<a href="http://www.lanacion.com.ar/espectaculos/">Espectculos</a>
24
URLs
URLs relativas
<a href="pagina2.html">ir a pgina 2</a>
<a href="fotos/pagina2.html">ver foto</a>
25
Imgenes
No slo linkear a otro recurso, sino incluirlo.
<a href="fotos/foto.jpg">ver foto</a>
26
Imgenes
No slo linkear a otro recurso, sino incluirlo.
<img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />
27
Imgenes
28
Imgenes
Tag de
imagen
29
Imgenes
Tag de
imagen
30
URL de la imagen
(gif, jpg, png)
Imgenes
Tag de
imagen
31
URL de la imagen
(gif, jpg, png)
Ancho y alto
Imgenes
Tag de
imagen
32
URL de la imagen
(gif, jpg, png)
Ancho y alto
Texto alternativo
Imgenes
Tag de
imagen
33
URL de la imagen
(gif, jpg, png)
Ancho y alto
Texto alternativo
Cierre
Imgenes
Cmo ve Google una imagen?
34
Imgenes
Cmo ve Google una imagen?
No entiende nada.
35
Imgenes
36
Imgenes
37
Imgenes
38
Imgenes
39
http://tinyurl.com/alt-decision-tree
http://webaim.org/techniques/alttext/
Imgenes
Decoracin
alt=""
Mejor: CSS!
40
Imgenes
Decoracin
alt=""
Mejor: CSS!
Contenido
(informacin
o funcional)
alt="texto
breve"
41
Imgenes
Decoracin
alt=""
Mejor: CSS!
Contenido
(informacin
o funcional)
alt="texto
breve"
Informacin
redundante
alt=""
42
Imgenes
Elemento con contenido
<p>Tags con contenido adentro</p>
Elemento sin contenido

Al no tener texto, ni otro elemento adentro, el

elemento se cierra solo.
<tag />
43
http://www.w3.org/TR/xhtml-media-types/#C_2
Tags ms comunes
p
img
a
h1, h2, hn
div
ul, ol, li
strong, em, b, i
span
link
head, title, body
44
a abbr address area article aside audio b

base bb bdo blockquote body br button
canvas caption cite code col colgroup
command datagrid datalist dd del details
dialog
dfn
div
dl
dt
em
embed
eventsource fieldset figure footer form h1
h2 h3 h4 h5 h6 head header hr html i
iframe img input ins kbd label legend li
link mark map menu meta meter nav
noscript object ol optgroup option output p
param pre progress q rp rt samp script
section select small source span strong
style sub sup table tbody td textarea tfoot
th thead time title tr ul var video
Encabezados
45
Encabezados
46
Encabezados
47
Encabezados
48
http://www.456bereastreet.com/archive/200901/headings_heading_hierarchy_and_document_outlines/
Encabezados
49
http://tinyurl.com/3vlphez
Encabezados
!!!
50
http://tinyurl.com/3vlphez
Encabezados
Generacin automtica de ndice
51
http://fuelyourcoding.com/scripts/toc/
Encabezados
52
http://www.youtube.com/watch?v=AmUPhEVWu_E
Encabezados
:-(
53
http://www.viaresto.clarin.com/
Saltos de lnea
54
Listas
55
Listas
Vietas con imgenes
56
Listas
Lista con links: navegacin
57
http://css.maxdesign.com.au/
Listas
Menes, tabs
58
http://www.alistapart.com/articles/taminglists/, http://www.alistapart.com/articles/slidingdoors/
Listas anidadas
59
http://www.htmldog.com/articles/suckerfish/
Listas
60
http://www.lanacion.com.ar
Listas
61
Listas
[...]
62
Listas
<ul>
Unordered list.
<ol>
Ordered list.
63
http://javirecetas.com/bizcocho-de-vainilla
Listas
*
*
*
*
Esto<br />
No<br />
Est<br />
Bien<br />
1. Esto<br />
2. Mucho<br />
3. Menos<br />
64
<ul>
<li>Esto</li>
<li>Es</li>
<li>Bueno</li>
</ul>
<ol>
<li>Tambin</li>
<li>Bueno</li>
<li>Esto</li>
</ol>
Punto punto punto
65
http://edant.clarin.com/diario/2004/05/03/um/m-752951.htm
Punto punto punto
<span class=pt2>
</span>
66
Punto punto punto
<span class=pt2>
</span>
67
.botones {
border-bottom: 1px dotted #969696;
}
Setenta mil pesos
68
https://github.com/mercadolibre/chico/issues/632
nfasis
Fragmentos importantes
<p><strong>Urgente!</strong> Hoy se agotan los cupos.</p>
Cambio de tono, afecta significado.

<p>Llam un doctor <em>ahora</em></p>
Destaque visual, no necesariamente importante

<p><b>S, pero quin nos curar</b> del fuego sordo,
del fuego sin color que corre al anochecer...</p>
Fragmentos en otro idioma, trminos tcnicos.

<p>Me pareci ver un lindo <i>felis silvestris catus</i>!</p>
69
http://html5doctor.com/i-b-em-strong-element/
Etiquetas genricas
<div>...</div>: contenedor genrico
70
Etiquetas genricas
71
Etiquetas genricas
72
Etiquetas genricas
73
Etiquetas genricas
74
Etiquetas genricas
<span>...</span>: fragmento genrico
<p>Jos Lpez, abogado.
Tel: <span class="tel">54 11 50227763</span>
</p>
Jos Lpez, abogado.

Tel:
75
54 11 50227763
Etiquetas genricas
<span>...</span>: fragmento genrico
<p>Jos Lpez, abogado.
class="tel">
Tel: <span class="tel">54
11 50227763</span>
<span class="type">Home</span>
</p>
54 11 50227763
</span>
</p>
Jos Lpez, abogado.
Tel:
76
54 11 50227763
Beneficios del marcado

semntico
SEO
Accesibilidad
Diseo cacheable
Future proof!
Hace posible
Rediseos ms rpidos
Responsive design
Progressive enhancement
77
El HTML ganar!
78
Web apps
ChromeOS
Boot to Gecko
HTML5 en Windows 8
Mac OS Dashboard apps
iPad, ePub
Apache Cordova (PhoneGap)
http://platform.html5.org/
http://platform.html5.org/
La plataforma Web
79
CSS
Hojas de estilo en cascada.
Se complementan con el HTML,
describiendo el diseo visual de una pgina.
80
http://www.popandshorty.bigcartel.com/product/you-are-the-css-to-my-html-button
CSS Zen Garden
81 http://www.mezzoblue.com/zengarden/alldesigns/
Mltiples medios
82 http://www.raoulwallenberg.net/
Mltiples dispositivos
83 http://www.alistapart.com/articles/responsive-web-design/
Incluir el CSS
Elemento link
<link rel="stylesheet" href="css/style.css" />
84
Incluir el CSS
Elemento link
<link rel="stylesheet" href="css/style.css" />
Print CSS
<link rel="stylesheet" href="css/style.css" media="print" />
Media queries - responsive design

<link rel="stylesheet" href="css/720.css"
media="screen and (min-width: 720px)" />
85
HTML base
86
Maquetado de ejemplo en http://pub.cvam.com.ar/ixda/2011/maquetado
87
Selectores
Redefinir tags de HTML
h1 {
color: #249999;
}
a{
color: #0071BC;
}
88
Selectores
Redefinir tags de HTML
h1 {
color: #249999;
}
a{
color: #0071BC;
}
89
Selectores
Todo se puede cambiar
<p>Para disear interfaces web <b>efectivas,
atractivas, y usables</b> Inicio...</p>
90
Selectores
Todo se puede cambiar
<p>Para disear interfaces web <b>efectivas,
atractivas, y usables</b> Inicio...</p>
b {
font-weight: normal;
background: #FFFF99;
}
91
Selectores
Class
Para botones
y similares, no me sirve
pegarle a todos los <a>!
a {
color: #FFFFFF;
background: #637580;
}
92
Selectores
Class
Class me permite
agrupar por tipo.
.button {
color: #FFFFFF;
}
<a class="button">Ver posts anteriores</a>
93
Selectores
Clases semnticos, no descriptivos
.gris_chico {
color: #CCCCCC;
font-size: 80%;
}
.fecha {
color: #CCCCCC;
font-size: 80%;
}
94
Selectores
ID
Un elemento que es nico en la pgina.
#intro {
color: #FFFFFF;
background: #28DBD5;
}
<p id="intro">IxDA es la Asociacin de Diseo de Interaccin.
Somos una red global dedicada a la prctica profesional...
<a href="info.html">Ver ms</a>
</p>
95
Selectores
ID
96
Reglas de CSS
Anatoma de una regla de CSS.
selector {
atributo: valor;
}
97
Mltiples selectores
Una regla puede tener ms de un selector.
.button {
}
#footer {
}
98
Mltiples selectores
separados por comas
.button
.button,{
#footer
background:
{
#586875;
}
background:
#586875;
}
#footer {
}
99
Mltiples selectores
separados por comas
.button
.button,{
#footer
background:
{
#586875;
}
background:
#586875;
}
#footer {
background:
#586875;
.button
{
}
text-transform: uppercase;
}
100
Modelo de caja
101 http://www.redmelon.net/tstme/box_model/
Modelo de caja
#intro { }
102
Bordes
border: 1px solid #24BCB7;
103
Mrgenes
margin: 1em;
104
Mrgenes
margin: 1em;
105
Mrgenes
margin: 0 0 1em 0;
106
Color de fondo
107
Color de fondo
108
Relleno
padding: 10px;
109
Relleno
padding: 10px 240px 10px 10px;
top right bottom left trouble
110
Relleno
padding: 10px 240px 10px 10px;
top right bottom left trouble
111
Imagen de fondo
background: #28DBD5 url(../img/intro.gif);
intro.gif
112
Imagen de fondo
background: #28DBD5 url(../img/intro.gif);
intro.gif
113
Fondo repetido
background: #28DBD5 url(../img/intro.gif) no-repeat;
opciones: repeat, repeat-x, repeat-y
114
Posicin del fondo

background: #28DBD5 url(../img/intro.gif) no-repeat 350px -35px;
left
top
115
Bloque vs Lnea
<p>Para disear interfaces web
<b>efectivas, atractivas, y usables</b>!
Inicio: Mircoles 1 de junio...</p>
<p>Horario: de 19 a 22 hs.</p>
116
http://webdesignfromscratch.com/html-css/css-block-and-inline/
Bloque vs Lnea
Elemento
en lnea
117
Bloque vs Lnea
Elemento
en lnea
Elemento
de bloque
118
Elementos flotantes
<img src="float.jpg" alt="Taza" />
<p>Vestibulum ut magna...</p>
119
http://css.maxdesign.com.au/floatutorial/
Elementos flotantes
img {
float: left;
width: 150px;
}
120 http://css.maxdesign.com.au/floatutorial/
Elementos flotantes
img {
float: left;
width: 150px;
}
p {
float: left;
width: 150px;
}
121
http://css.maxdesign.com.au/floatutorial/
<div id="main">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>
122
#main {
...
}
#sidebar {
...
}
#footer {
...
}
123
#main {
float: left;
}
#sidebar {
float: left;
}
#footer {
...
}
124
#main {
float: left;
}
#sidebar {
float: left;
}
#footer {
clear: both;
}
125
#main {
float: left;
margin-right: 55px;
}
#sidebar {
float: left;
}
#footer {
clear: both;
}
126
Tcnica de faux columns
127
http://www.alistapart.com/articles/fauxcolumns/

#sidebar {
background: #f2f2f2;
}
:(
128 http://www.alistapart.com/articles/fauxcolumns/
wrapper
<div id="content">
</div>
129
http://www.alistapart.com/articles/fauxcolumns/

content.gif
#content {
background:
url(../img/content.gif);
}
wrapper
<div id="content">
</div>
130 http://www.alistapart.com/articles/fauxcolumns/
Clear usando overflow

#footer {
clear: both;
}
<div id="content">
</div>
131 http://www.quirksmode.org/css/clearing.html

Sin el footer, el
wrapper se colapsa,
porque los floats no
estn en el flujo
normal del documento.
<div id="content">
</div>

O bien hidden
#content {
overflow: auto;
width: 100%;
}
<div id="content">
</div>
Posicionamiento
134
Relativo
#intro_more {
position: relative;
}
135
Relativo
#intro_more {
position: relative;
top: 40px;
left: -50px;
}
136
Absoluto
#intro_more {
position: absolute;
top: 0;
left: 0;
}
137
Absoluto
#intro_more {
position: absolute;
top: 0;
left: 0;
}
138
#intro {
position: relative;
}
Absoluto
#intro_more {
position: absolute;
top: 0; 12px;
bottom:
left: 0;
right:
20px;
}
139
#intro {
position: relative;
}
Fijo
#intro_more {
position: fixed;
bottom: 12px;
right: 20px;
}
140
Fijo
#intro_more {
position: fixed;
bottom: 12px;
right: 20px;
}
141
Fijo
#intro_more {
position: fixed;
bottom: 12px;
right: 20px;
}
142
La cascada
Ante dos selectores iguales, el ltimo tiene prioridad:
pisa al anterior.
...
h2 {
color: #ff0000;
}
...
h2 {
...
143
color: #249898;
}
La cascada
Muchas propiedades se heredan de los
elementos contenedores.
h2 {
p {
font-family: Arial;
}
font-family: Arial;
}
.fecha {
font-family: Arial;
}
144
La cascada
Muchas propiedades se heredan de los
elementos contenedores.
h2 {
p {
font-family: Arial;
}
font-family: Arial;
}
.fecha {
font-family: Arial;
}
body {
font-family: Arial;
}
145
La cascada
Cuando algo se repite, generalizar.
.texto {
font-family: Arial;
}
<p class="texto">Loren ipsum</p>
<p class="texto">Dolor sit amet</p>
<p class="texto">Consectetur adipiscing</p>
146
La cascada
.texto {
font-family: Arial;
}
<p class="texto">Loren ipsum</p>
<p class="texto">Dolor sit amet</p>
<p class="texto">Consectetur adipiscing</p>
<div class="texto">
<p>Loren ipsum</p>
<p>Dolor sit amet</p>
<p>Consectetur adipiscing</p>
</div>
147
La cascada
148
La cascada
149
La cascada
Especificidad, selectores contextuales.
a {
font-family: Arial;
color: blue;
}
#mainMenu a {
color: red;
background: url
("../img/mainmenu.gif")
repeat-x;
border: 1px solid #D7D8D9;
display: block;
padding: 0 14px;
text-decoration: none;
}
150
http://librosweb.es/css/capitulo2/selectores_basicos.html
Tamao de tipografas
body {
font-size: 13px;
*font-size: small;
}
h2 {
p {
/* IE <= 7 */
font-size: 160%;
}
/* nada! hereda de body*/
}
.fecha {
font-size: 80%;
}
151
http://developer.yahoo.com/yui/3/examples/cssfonts/cssfonts-size.html
Pila de tipografas
Font stack
body {
font-family: Cambria, Georgia, Times, Times New Roman, serif;
}
Cambria
Georgia
Times
152
Qu tipografas puedo usar?
153
http://www.codestyle.org/css/font-family/
Qu tipografas puedo usar?

Cualquiera!
Elegir una que tenga licencia @font-face.
154
http://Typekit.com (Din, Futura, Meta, Trajan, Dax)
http://Webfonts.fonts.com (Helvetica, Frutiger, Univers!)
http://Webtype.com (Interstate, Gill Sans)
http://Fontsquirrel.com (open source / free / custom)
http://Google.com/webfonts (open source)
Mejora progresiva
El contenido, siempre accesible.
155
http://tinyurl.com/653gfd7
Esto no es un link
<a id="ToppageUC1_Mainmenubuild2_BemestingButton1_Lin kButton1"
class="MenuButton" href="javascript:__doPostBack('ToppageUC1$Mainmenu
build2$BemestingButton1$LinkButton1','')">Inicio</a>
156
http://slideshare.net/pazguille/estndares-web-con-chico-ui, https://twitter.com/danwrong/status/205300456547823616
Esto no es un link
<p id="rep">Ver reputacin</p>
<script>
$("#rep").bind("click", function () {
window.location = "http://ejemplo.com";
});
</script>
157
Esto no es un link
<script>
});
</script>
<a href="https://twitter.com/#!mrazzari/status/205322525339693057">
158
Esto no es un link
<script>
});
</script>
<a href="https://twitter.com/#!mrazzari/status/205322525339693057">
159
Mejora progresiva
<a href="javascript:window.open('index.htm','popup','width=300,height=400');">
Abrir popup muy mal
</a>
<a href="#" onClick="window.open('index.htm','popup','width=300,height=400')">

Tambin mal
</a>
Est roto para:

Usuarios sin JS
Buscadores
Agregar a favoritos
Abrir en otro tab / ventana
Ver link en barra de estado
Verificadores de links
160
http://www.nosolousabilidad.com/articulos/popups_javascript.htm
Mejora progresiva
<a href="index.htm" target="popup" onClick="window.open('index.htm', 'popup',
'width=300,height=400'); return false;">
Un poco mejor
</a>
161
Mejora progresiva
<a href="index.htm" target="popup" onClick="window.open('index.htm', 'popup',
Un poco mejor
</a>
<a href="index.htm" target="popup" onClick="window.open(this.href, this.target,

Mucho mejor!
</a>
162
Mejora progresiva
<a href="index.html" class="pop-me-up">Mejorsimo</a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script src="js/funciones.js"></script>
// Funciones.js
jQuery(function($) {
$('.pop-me-up').click(function(e){
window.open($(this).attr("href"), "popup", "width=300,height=400");
return false;
});
});
163
Mejora progresiva
Aceptar las diferencias.
Navegador moderno
vs.
Internet Explorer 7
164
Mejora progresiva
Polyfills: JavaScripts que dan funcionalidad a
navegadores que no la soportan nativamente.
Ejemplo: CSS3 multi column

165
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Como pedir ayuda
Validar el cdigo
Lista de correo: http://ovillo.org
Enviar un link a la pgina con problemas

(es mejor que pegar cdigo en un mail). Testcase.
Google! (Alguien ya tuvo tu mismo problema)
FAQs
http://mezzoblue.com/css/cribsheet
http://css-discuss.incutio.com
166
Como evaluar qu es bueno

Antes de copiar de la web un fragmento de cdigo,
script o plugin...
167
Validarlo
Testearlo en nuestros browsers objetivo
CSS y JS no entremezclados con el HTML
Escalable (text zoom)
Usa el framework o librera que ya uss
Si hay <a>, que apunten a una URL
Puedo tabular de un link a otro
El cdigo parece prolijo (comentado, identado)
Herramientas
Firebug
http://getfirebug.com/whatisfirebug
Chrome Dev Tools
https://developers.google.com/chrome-developer-tools/
Web developer extension
https://addons.mozilla.org/en-US/firefox/addon/web-developer/
Screen calipers
http://www.iconico.com/caliper/skins.aspx
IE Collection
http://utilu.com/IECollection/
SelectOracle
http://tux.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py
168

Ixdacursomodulo4 110628111208 Phpapp01

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Ixdacursomodulo4 110628111208 Phpapp01

Diunggah oleh

Hak Cipta:

Format Tersedia

Maquetado

Diseo de interfaces y maquetado web

Qu es una pgina web?

Qu es una pgina web?

Qu es una pgina web?

<p>Hola, <strong>que tal</strong></p>

Elemento sin contenido

Al no tener texto, ni otro elemento adentro, el

a abbr address area article aside audio b

Punto punto punto

Punto punto punto

Punto punto punto

Setenta mil pesos

Cambio de tono, afecta significado.

Destaque visual, no necesariamente importante

Fragmentos en otro idioma, trminos tcnicos.

Jos Lpez, abogado.

Beneficios del marcado

Mac OS Dashboard apps

Apache Cordova (PhoneGap)

CSS Zen Garden

Media queries - responsive design

Maquetado de ejemplo en http://pub.cvam.com.ar/ixda/2011/maquetado

Posicin del fondo

Tcnica de faux columns

Tcnica de faux columns

Tcnica de faux columns

Tcnica de faux columns

Clear usando overflow

Clear usando overflow

Clear usando overflow

Qu tipografas puedo usar?

Qu tipografas puedo usar?

http://Typekit.com (Din, Futura, Meta, Trajan, Dax)

http://Webfonts.fonts.com (Helvetica, Frutiger, Univers!)

http://Webtype.com (Interstate, Gill Sans)

http://Fontsquirrel.com (open source / free / custom)

http://Google.com/webfonts (open source)

<a href="#" onClick="window.open('index.htm','popup','width=300,height=400')">

Est roto para:

<a href="index.htm" target="popup" onClick="window.open(this.href, this.target,

Ejemplo: CSS3 multi column

Como pedir ayuda

Lista de correo: http://ovillo.org

Enviar un link a la pgina con problemas

Google! (Alguien ya tuvo tu mismo problema)

Como evaluar qu es bueno

Testearlo en nuestros browsers objetivo

CSS y JS no entremezclados con el HTML

Escalable (text zoom)

Usa el framework o librera que ya uss

Si hay <a>, que apunten a una URL

Puedo tabular de un link a otro

El cdigo parece prolijo (comentado, identado)

Chrome Dev Tools

Web developer extension

Anda mungkin juga menyukai