Introduccion Al Diseño y Maquetacion de Interfaces Web

Maquetado Diseño de interfaces y maquetado web

Manuel Razzari

http://convistaalmar.com.ar

http://creativecommons.org/licenses/by/.!/ar/

"#u$ es una p%gina web&



"#u$ es un tag& HTML Markup language: lenguaje de marcado Tag: etiqueta Hola, que tal

"#u$ es un tag& Puedo poner una etiqueta adentro de otra.

Hola, que tal

"#u$ es un tag& Toda etiqueta que se abre tiene que cerrarse. Siempre tiene que quedar una adentro de otra. Bien:
Hola, que tal

Mal:
Hola, que tal

,rbol de elementos

Doctype Nos dice que tipo de documento es y su versin.

0ead !n"ormacin acerca de la p#gina.

1itle $parece en la barra de t%tulo y en los tabs.

1itle &s el link principal en los resultados de b'squeda.

1itle

2ody o que se ve dentro de la ventana del navegador

3l validador /0mo s1 que lo estoy (aciendo bien2 (ttp:))validator.*3.org Nos asegura que: os tags est#n bien tipeados &st#n correctamente anidados No "alta ning'n elemento requerido No (ay errores de sinta-is •

•

•

•

3l validador
Hola, que tal

4in5s HTML Markup anguage

4in5s HTM HyperTe-t Markup anguage

pagina4.(tml

"oto.jpg

pagina8.(tml etc.

4in5s ink entre dos p#ginas. a: ancla (re": re"erencia (iperte-tual

pagina8.(tml


pagina8.(tml


pagina8.(tml


pagina8.(tml

pagina4.(tml

6tributos ir a página 2 nombre

valor

7R4s ; absoluta: spectáculos

7R4s ;s relativas ir a página 2 !er foto

8m%genes No slo linkear a otro recurso< sino incluirlo. !er foto

8m%genes No slo linkear a otro recurso< sino incluirlo. !er foto

8m%genes

8m%genes

Tag de imagen

8m%genes

Tag de imagen

; de la imagen =gi"< jpg< png>

8m%genes

Tag de imagen


$nc(o y alto

8m%genes

Tag de imagen


$nc(o y alto

Te-to alternativo

8m%genes

Tag de imagen


$nc(o y alto

Te-to alternativo

0ierre

8m%genes /0mo ve ?oogle una imagen2

8m%genes /0mo ve ?oogle una imagen2

No entiende nada.

8m%genes

8m%genes

8m%genes

8m%genes

8m%genes @ecoracin alt="" Mejor: 0SSA


0ontenido =in"ormacin o "uncional> alt="te(to )re!e"


0ontenido =in"ormacin o "uncional> alt="te(to )re!e"

!n"ormacin redundante alt=""

8m%genes &lemento con contenido
*ags con conteni#o a#entro

&lemento sin contenido

$l no tener te-to< ni otro elemento adentro< el tag se cierra solo.

1ags m%s comunes p img a (8< (4< (nC div ul< ol< li strong< em< b< i span link (ead< title< body

●

●

●

●

●

●

●

●

●

●

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 d"n div dl dt em embed eventsource "ieldset "igure "ooter "orm (8 (4 (3 (D (6 (9 (ead (eader (r (tml i i"rame 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 te-tarea t"oot t( t(ead time title tr ul var video

3ncabezados

3ncabezados

3ncabezados

3ncabezados

3ncabezados

3ncabezados

!!!

3ncabezados ?eneracin autom#tica de %ndice

3ncabezados

3ncabezados

:+=

9altos de lnea

4istas

4istas GiIetas con im#genes

4istas ista con links: navegacin

4istas Men'es< tabs

4istas anidadas

4istas

4istas

4istas

[...]

4istas

nordered list.

Jrdered list.

4istas -

sto<)r /> o<)r /> stá<)r /> +ien<)r />

$. sto<)r /> 2. Mucho<)r /> . Menos<)r />

sto

s

+ueno

*am)in

+ueno

sto

;unto punto punto

;unto punto punto

000000000 00000000000000000000000000 000000000000000000000000000 000000000000000000000

;unto punto punto

000000000 00000000000000000000000000 000000000000000000000000000 000000000000000000000

.)otones 1 )or#er)ottom: $p( #otte# 34545456 7

¡Urgente! Ho8 se agotan los cupos.

0ambio de tono< a"ecta signi"icado.
9lamá un #octor ahora;

@estaque visual< no necesariamente importante
<)>Sí, pero quién nos curará #el fuego sor#o, #el fuego sin color que corre al anochecer...

Lragmentos en otro idioma< t1rminos t1cnicos. felis silvestris catus 

Me pareci !er un lin#o

3tiquetas gen$ricas <#i!>...: contenedor gen1rico





3tiquetas gen$ricas ...: "ragmento gen1rico
?os pe@, a)oga#o. *el: &A $$ &%22BB5

José López, abogado. Tel: ☎ 54 11 50227763

3tiquetas gen$ricas ...: "ragmento gen1rico
?os pe@, a)oga#o. class="tel"> *el: &A $$ &%22BB5 Home
&A $$ &%22BB5

José López, abogado. ☎ 54 11 50227763 Tel: ⌂

2eneficios del marcado sem%ntico S&J $ccesibilidad @iseIo cac(eable Luture proo"A

●

●

●

●

Hace posible ;ediseIos m#s r#pidos ;esponsive design Progressive en(ancement

●

●

●

=3l 01M4 ganar%> ●

eb apps

●

a nube< 0(romeJS

●

HTM6 en indo*s 

●

iPad< ePub

?99 Hojas de estilo en cascada. Se complementan con el HTM< describiendo el diseIo visual de una p#gina.

?99 @en Aarden

MBltiples medios

MBltiples dispositivos

8ncluir el ?99 &lemento link

8ncluir el ?99 &lemento link

Print 0SS

Media queries + responsive designO

01M4 base

9electores ;ede"inir tags de HTM (8  color : 4DEEEEQ R a color : 55K8B0Q R

9electores ;ede"inir tags de HTM (8  color : 4DEEEEQ R a color : 55K8B0Q R

9electores Todo se puede cambiar
'ara #iseFar interfaces we) <)>efecti!as, atracti!as, 8 usa)les Gnicio...

9electores Todo se puede cambiar
'ara #iseFar interfaces we) <)>efecti!as, atracti!as, 8 usa)les Gnicio...

) 1 fontweight: normal6 )acCgroun#: 3446 7

9electores 0lass Para botones y similares< no me sirve pegarle a todos los A a 1 color: 36 )acCgroun#: 35B&I%6 7

9electores 0lass 0lass me permite agrupar por tipo.

.)utton 1 color: 36 )acCgroun#: 35B&I%6 7 Jer posts anteriores

9electores 0lases sem#nticos< no descriptivos .grisKchico 1 color: 3LLLLLL6 fontsi@e: I%6 7 .fecha 1 color: 3LLLLLL6 fontsi@e: I%6 7

9electores !@ n elemento que es 'nico en la p#gina. 3intro 1 color: 36 )acCgroun#: 32IN+N&6 7

G(NO es la Osociacin #e NiseFo #e Gnteraccin. Pomos una re# glo)al #e#ica#a a la práctica profesional... Jer más

9electores !@

Reglas de ?99 $natom%a de una regla de 0SS. selector 1 atri)uto: !alor6 7

MBltiples selectores na regla puede tener m#s de un selector. .)utton 1 )acCgroun#: 3&I5IB&6 7 3footer 1 )acCgroun#: 3&I5IB&6 7

MBltiples selectores na regla puede tener m#s de un selector. separados por comas

.)utton .)utton,1 3footer )acCgroun#: 1 3&I5IB&6 7 )acCgroun#: 3&I5IB&6 7 3footer 1 )acCgroun#: 3&I5IB&6 7

MBltiples selectores na regla puede tener m#s de un selector. separados por comas

.)utton .)utton,1 3footer )acCgroun#: 1 3&I5IB&6 7 )acCgroun#: 3&I5IB&6 7 3footer 1 )acCgroun#: 3&I5IB&6 .)utton 1 7 te(ttransform: uppercase6 7

Modelo de caCa

Modelo de caCa 3intro 1 Q 7

2ordes )or#er: $p( soli# 32A+L+B6

M%rgenes margin: $em6

M%rgenes margin: $em6

M%rgenes margin: % % $em %6

?olor de fondo )acCgroun#: 32IN+N&6

?olor de fondo )acCgroun#: 32IN+N&6

Relleno pa##ing: $%p(6

Relleno pa##ing: $%p( 2A%p( $%p( $%p(6 top right )ottom left 9trouble;

Relleno pa##ing: $%p( 2A%p( $%p( $%p(6 top right )ottom left 9trouble;

8magen de fondo )acCgroun#: 32IN+N& urlD../img/intro.gifE6

intro.gif

8magen de fondo )acCgroun#: 32IN+N& urlD../img/intro.gifE6

intro.gif

ondo repetido )acCgroun#: 32IN+N& urlD../img/intro.gifE norepeat6 opciones: repeat, repeat(, repeat8

;osiciEn del fondo )acCgroun#: 32IN+N& urlD../img/intro.gifE norepeat &%p( &p(6 left top

2loque vs 4nea pPara diseIar inter"aces *eb be"ectivas< atractivas< y usables)bA !nicio: Mi1rcoles 8 de junio...)p pHorario: de 8E a 44 (s.)p


&lemento en l%nea


&lemento en l%nea &lemento de bloque

3lementos flotantes
Jesti)ulum ut magna...

3lementos flotantes
img 1 float: left6 wi#th: $&%p(6 7

3lementos flotantes
img 1 float: left6 wi#th: $&%p(6 7 p 1 float: left6 wi#th: $&%p(6 7

<#i! i#="main">... <#i! i#="si#e)ar">... <#i! i#="footer">...

3main 1 ... 7 3si#e)ar 1 ... 7 3footer 1 ... 7

3main 1 float: left6 7 3si#e)ar 1 float: left6 7 3footer 1 ... 7

3main 1 float: left6 7 3si#e)ar 1 float: left6 7 3footer 1 clear: )oth6 7

3main 1 float: float : left left6 6 marginright: marginright : &&p( &&p(6 6 7 3si#e)ar 1 float: float : left left6 6 7 3footer 1 clear: clear : )oth )oth6 6 7

1$cnica de FfauG columnsH

1$cnica de FfauG columnsH 3si#e)ar 1 )acCgroun#: )acCgroun# : 3f2f2f2 3f2f2f26 6 7

:=

1$cnica de FfauG columnsH

*rapper <#i! i#="content"> <#i! i#="main">... <#i! i#="si#e)ar">... <#i! i#="footer">...

1$cnica de FfauG columnsH content.gif

3content 1 )acCgroun#: urlD../img/content.gifE6 7

*rapper <#i! i#="content"> <#i! i#="main">... <#i! i#="si#e)ar">... <#i! i#="footer">...

?lear usando overflow 3footer 1 clear: )oth6 7

<#i! i#="content"> <#i! i#="main">... <#i! i#="si#e)ar">... <#i! i#="footer">...

?lear usando overflow Sin el "ooter< el *rapper se colapsa< porque los "loats no est#n en el "lujo normal del documento.

<#i! i#="content"> <#i! i#="main">... <#i! i#="si#e)ar">... <#i! i#="footer">...

?lear usando overflow J bien hi##en 3content 1 o!erflow: auto6 wi#th: $%%6 7

<#i! i#="content"> <#i! i#="main">... <#i! i#="si#e)ar">...

;osicionamiento

Relativo

3introKmore 1 position: relati!e6 7

Relativo

3introKmore 1 position: relati!e6 top: A%p(6 left: &%p(6 7

6bsoluto

3introKmore 1 position: a)solute6 top: %6 left: %6 7

6bsoluto

3introKmore 1 position: a)solute6 top: %6 left: %6 7

3intro 1 position: relati!e6 7

6bsoluto

3introKmore 1 position: a)solute6 top: %6 $2p(6 )ottom: left: %6 right: 2%p(6 7

3intro 1 position: relati!e6 7

iCo

3introKmore 1 position: fi(e#6 )ottom: $2p(6 right: 2%p(6 7

iCo


iCo


4a cascada $nte dos selectores iguales< el 'ltimo tiene prioridad: pisa al anterior. ... h2 1 color: 3ff%%%%6 7 ... h2 1 color: 32A4I4I6 7 ...

4a cascada Muc(as propiedades se (eredan de los elementos contenedores. h2 1 fontfamil8: Orial6 7 p 1 fontfamil8: Orial6 7 .fecha 1 fontfamil8: Orial6 7

4a cascada Muc(as propiedades se (eredan de los elementos contenedores. h2 1 fontfamil8: Orial6 7 p 1 fontfamil8: Orial6 7 .fecha 1 fontfamil8: Orial6 7 )o#8 1 fontfamil8: Orial6 7

4a cascada 0uando algo se repite< generali,ar. .te(to 1 fontfamil8: Orial6 7
oren ipsumQ

Nolor sit ametQ

Lonsectetur a#ipiscingQ

4a cascada 0uando algo se repite< generali,ar. .te(to 1 fontfamil8: Orial6 7
oren ipsumQ

Nolor sit ametQ


<#i! class="te(to">
oren ipsumQ

Nolor sit ametQ


4a cascada &speci"icidad< selectores conte-tuales. a 1 fontfamil8: Orial6 color: )lue6 7 3mainMenu a 1 color: green6 )acCgroun#: url D"../img/mainmenu.gif"E repeat(6 )or#er: $p( soli# 3NBNIN46 #ispla8: )locC6 pa##ing: % $Ap(6 te(t#ecoration: none6 7

1amaño de tipografas )o#8 1 fontsi@e: $p(6 -fontsi@e: small6 7

/- G <= B -/

h2 1 fontsi@e: $5%6 7 p 1 /- na#a here#a #e )o#8-/ 7 .fecha 1 fontsi@e: I%6 7

;ila de tipografas Lont stackO )o#8 1 fontfamil8: Lam)ria, Reorgia, *imes, 9*imes ew Soman;, serif 6 7

Cambria

Aeorgia Times

"#u$ tipografas puedo usar&

"#u$ tipografas puedo usar& U0ualquieraA &legir una que tenga licencia V"ont+"ace. licencia V"ont+"ace. ●

(ttp:))Typekit.com =@in< Lutura< Meta< Me ta< Trajan< Trajan< @a->

●

(ttp:))eb"onts."onts.com =Helvetica< Lrutiger< niversA>

●

(ttp:))ebtype.com =!nterstate< (ttp:))ebtype.com =!nterstate< ?ill Sans>

●

(ttp:))Lontsquirrel.com =open (ttp:))Lontsquirrel.com =open source ) "ree ) custom>

●

(ttp:))?oogle.com)*eb"onts =open source>

MeCora progresiva &l contenido< siempre accesible.

MeCora progresiva "> O)rir popup mu8 mal

"> *am)in mal

&st# roto para: suarios sin WS Buscadores $gregar a "avoritos $brir en otro tab ) ventana Galidacin

●

●

●

●

●

MeCora progresiva Un poco meor

MeCora progresiva Un poco meor

Mucho meor

MeCora progresiva MeorVsimo <script src="//aa(.googleapis.com/aa(/li)s/quer8/$.&.$/quer8.s"> <script src="s/funciones.s"> // unciones.s Wuer8DfunctionDXE 1 XDT.popmeupTE.clicCDfunctionDeE1 win#ow.openDXDthisE.attrD"href"E, TpopupT, Twi#th=%%,height=A%%TE6 return false6 7E6 7E6

?omo pedir ayuda Galidar el cdigo

●

ista de correo: (ttp:))ovillo.org

●

&nviar un link a la p#gina con problemas =es mejor que pegar cdigo en un mail>. TestcaseO.

●

?oogleA =$lguien ya tuvo tu mismo problema>

●

L$Xs

●

(ttp:))me,,oblue.com)css)cribs(eet (ttp:))css+discuss.incutio.com

?omo evaluar qu$ es bueno $ntes de copiar de la *eb un "ragmento de cdigo< script o plugin... Galidarlo

●

Testearlo en nuestros bro*sers objetivo

●

0SS y WS no entreme,clados con el HTM

●

&scalable =te-t ,oom>

●

sa el "rame*ork o librer%a que ya us#s

●

Si (ay a< que apunten a una ;

●

Puedo tabular de un link a otro

●

&l cdigo parece prolijo =comentado< identado>

●

Introduccion Al Diseño y Maquetacion de Interfaces Web

Recommend Documents