1ema 3.

1
CSS
luenLes vlnculadas
[fonL CSS



!"#$%&"'() - ermlLe vlncular fuenLes sln necesldad de que el
cllenLe las Lenga lnsLaladas en su ordenador.
"#$%&"'+,-.
valor: <famlly-name>
/0(
[ <url> [formaL(<sLrlng> [, <sLrlng>]*)] | <fonL-face-name> ] [, <url> [formaL(<sLrlng> [,
<sLrlng>]*)] | <fonL-face-name> ]*

@font-face {
font-family: Gentium,
src: url(ideal-sans-serif.woff) format("woff"),
url(basic-sans-serif.ttf) format("opentype");
}
p {
font-family: Gentium, serif;
}





hLLp://www.w3.org/18/css3-fonLs/#fonL-face-rule
[fonL CSS



1#0+'%#2 !"#$%&"'()






/%0,$3 1#$% 1#0+'% 4#++#$ )5%)$2,#$2
67#""6
WCll (Web Cpen
lonL lormaL)
.woff
6%08)%.9)6 1rue1ype .LLf
6#9)$%.9)6 Cpen1ype .LLf, .oLf
6)+:);;);&
#9)$%.9)6
Lmbedded Cpen1ype .eoL
62<36 SvC lonL .svg, .svgz
[fonL CSS



4#+9'%,:,-,;'; uepende del navegador y del slsLema operaLlvo,
La mayorla de navegadores y SC.

=>11 Web Cpen lonL lormaL
Ll Web Cpen lonL lormaL (WCll) es un formaLo de Llpo de leLra
para usarse en pglnas web. lue desarrollado por la lundacln
Mozllla, Cpera SofLware y MlcrosofL, y esL en el proceso de
normallzacln por el W3C y converLlrse en un esLndar.

?>@ Lmbedded Cpen1ype
Lmbedded Cpen1ype ( LC1 ) esLas fuenLes son una forma compacLa
de Cpen1ype para su uso como fuenLes lncrusLadas en las pglnas
web y a su vez proLegen los derechos de auLor.
hLLp://canluse.com/fonLface
[fonL CSS



/AB Scalable vecLor Craphlcs
SvC es una especlflcacln para descrlblr grflcos vecLorlales
bldlmenslonales, esLLlco o anlmado y fue creado como alLernaLlva
de formaLo ablerLo a llash. se emplea como formaLo Llpogrflco en
la web para dlsposlLlvos lCS (lad, lhone y lod)

@08)@.9)
1rue1ype es un formaLo esLndar de Llpos de leLra escalables
desarrollado lnlclalmenLe por Apple a flnales de la decada de los
ochenLa. Ls compaLlble con llrefox 3.3+ , Safarl 3.1+, Chrome 4+ y
Cpera 10+.






ConverLlr fuenLes
hLLp://www.fonLsqulrrel.com/Lools/webfonL-generaLor
[fonL CSS



!"#$%&"'() )+:);;,$3
Ls poslble el uso de fuenLes alo[adas en servldores exLerno

B##3-) 1#$%2
Ln la cabecera
<link href='http://fonts.googleapis.com/
css?family=Caesar+Dressing' rel='stylesheet'
type='text/css'>

Ln el esLllo

p {
font-family: 'Caesar Dressing', cursive;
}





hLLp://webfonLs.lnfo/fonLs-avallable-fonL-face-embeddlng
8ecursos CSS



1>C@ /DEFG?H
hLLp://www.fonLsqulrrel.com/fonLface/generaLor

I;#:)J lonLs, fabulous fonLs: Pow Lo use Lhe [fonL-face rule wlLh popular fonL servlces
hLLp://www.adobe.com/devneL/edge-web-fonLs/arLlcles/use-aL-fonL-face-wlLh-wlLh-fonL-
servlces.hLml

B##3-) 1>C@
hLLp://www.google.com/webfonLs

I;#:)K ?;3) =): 1#$%2
hLLp://www.edgefonLs.com/

@.9)L,%
hLLps://LypeklL.com/

G); @)'+ M)2,3$J Coogle lonL Al and 1ypeklL soluLlons vS [fonL-face
hLLp://www.red-Leam-deslgn.com/google-fonL-apl-and-LypeklL-soluLlons-vs-fonL-face



1ema 3.2
P1ML
LsLrucLura
LsLrucLura P1ML



Los elemenLos hLml pueden vlsuallzarse como bloque o como en
llnea.
Los elemenLos bloques !"#$% ocupan Lodo el ancho de la pglna y
fuerzan a una nueva llnea anLes y despues.

<address> <article> <aside> <audio> <blockquote> <canvas>
<dd> <div> <dl> <fieldset> <figcaption> <figure> <footer>
<form> <h1>, <h2>, <h3>, <h4>, <h5>, <h6> <header> <hgroup>
<hr> <noscript> <ol> <output> <p> <pre> <section> <table>
<tfoot> <ul> video>







hLLps://developer.mozllla.org/en-uS/docs/P1ML/8lock-level_elemenLs
LsLrucLura P1ML



Los elemenLos en llnea &'"&'( slo ocupan el ancho necesarlo y no
fuerzan nuevas llneas.

<b> <big> <i> <small> <tt>
<abbr> <acronym> <cite> <code> <dfn> <em> <kbd> <strong>
<samp> <var>
<a> <bdo> <br> <img> <map> <object> <q> <script> <span> <sub>
<sup>
<button> <input> <label> <select> <textarea>






hLLps://developer.mozllla.org/en-uS/docs/P1ML/lnllne_elemenLs
LsLrucLura P1ML



Ll elemenLo )*&+, es un elemenLo de bloque que se emplea
conLener en su lnLerlor oLros elemenLos -./0.

Ll elemenLo )*&+, no Llene nlngun slgnlflcado, es semnLlcamenLe
neuLro.

Lmpleando 233, el elemenLo )*&+, se puede uLlllzar para
esLrucLurar el documenLo en grandes bloques de conLenldo.

Ll dlv es la propuesLa para susLlLulr a los elemenLos )45!"(, para el
dlseno. Ll propslLo del elemenLo )45!"(, es para mosLrar daLos
Labulados.





LsLrucLura P1ML



Ll elemenLo -./0 )675', es un elemenLo en llnea que se emplea
como un conLenedor de LexLo.

Ll elemenLo )675', no Llene nlngun slgnlflcado especlal, es
semnLlcamenLe neuLro. .

Cuando se uLlllza [unLo con 233, el elemenLo )675', se puede
uLlllzar para esLablecer los aLrlbuLos de esLllo para las parLes del
LexLo.








LsLrucLura P1ML



Ln -./08, los bloques son susLlLuldos por bloques semnLlcos que
muesLran slgnlflcado por sl mlsmos.






<header>
<nav>
<secLlon>
<arLlcle>

<aslde>
<fooLer>
LsLrucLura P1ML



una pglna de esLe Llpo reallzada con )*&+, quedarla de la
slgulenLe manera.

Ls hablLual una ca[a conLenedor para lmpedlr que ocupe Loda la pglna cuando la venLana
de la navegador es muy grande o conLrolar la dlsposlcln de los elemenLos cuando es muy
pequena.






LsLrucLura P1ML



una pglna de esLe Llpo reallzada con los nuevos bloques
semnLlcos del -./08 quedarla.




LsLrucLura P1ML



La esLrucLura -./09 debe reallzarse en el senLldo lglco de lecLura
del documenLo, cuando la pglna se vea sln apllcar los esLllos no
plerda su slgnlflcado.








8ecursos P1ML



:;<$( 05=6#'> HTML5 articles and sections: whats the difference?
hLLp://www.brucelawson.co.uk/2010/hLml3-arLlcles-and-secLlons-
whaLs-Lhe-dlfference/

?4@"8 A#$4#;> 1he arLlcle elemenL
hLLp://hLml3docLor.com/Lhe-arLlcle-elemenL/

-./8 756# 5 756#> dlv, secLlon y arLlcle
hLLp://hLml3pasoapaso.blogspoL.com.es/2011/08/dlv-secLlon-y-
arLlcle.hLml

#'*?#> P1ML3 (dlscuslones enLre aLlcle y secLlon)
hLLp://www.ondho.com/hLml3-dlscuslones-enLre-arLlcle-y-secLlon/




1ema 3.3
CSS
LsLrucLura
LsLrucLura CSS



Los <d|v> son elemenLos de bloque que se emplean para ser
formaLeados medlanLe CSS.

Los dlv se nombran medlanLe un ldenLlflcador ID o una clase c|ass,
para manlpular su aspecLo.

ID
Cada elemenLo puede Lener un solo lu
Cada pglna puede Lener un solo elemenLo con la lu
CLASS
uede uLlllzar la mlsma clase en varlos elemenLos.
uede uLlllzar varlas clases en el mlsmo elemenLo.

un d|v puede Lener LanLo un lu como CLASS



LsLrucLura CSS



la eLlqueLa <d|v> ofrece a los dlsenadores la flexlbllldad y el conLrol
sobre la poslcln cuando se comblna con las propledades CSS.

una eLlqueLa dlv puede Lener, lnsLrucclones de formaLo (de la
famllla de fuenLe, color, bordes, eLc), aLrlbuLos de alLura y anchura,
poslclonamlenLo

1amao
Pay que Lener culdado al emplear el Lamano, el conLenldo segun el
navegador puede desbordar el Lamano de un dlv. LvlLar deflnlr alLos
sl no son necesarlos.

div{
width: 400px;
}


LsLrucLura CSS



add|ng, marg|n y border











LsLrucLura CSS



8ackground











div {
background: url(texto/f01.png) left bottom
repeat-x,
url(texto/f02.png) left bottom no-repeat,
url(texto/f03.png) left top repeat-x;
background-color: #a4d3ff;
}
f03.png
f02.png
f01.png
LsLrucLura CSS



CSS3 permlLe anadlr sombras y bordes redondeados












LsLrucLura CSS



CSS3 permlLe poslclonar los d|v en la pglna, f|oat y c|ear
Con f|oat el dlv flota a una posicin relativa.














LsLrucLura CSS



CSS3 permlLe poslclonar los d|v en la pglna, f|oat y c|ear
Con c|ear rompe el esquema del floaL.














LsLrucLura CSS



CSS3 permlLe poslclonar los d|v en la pglna, medlanLe poslLlon,
absoluLa, relaLlva o fl[a.
Con poslcln absoluLa el dlv sale del flu[o del conLenldo.














LsLrucLura CSS



Con poslcln fl[a el d|v no cambla de poslcln en el escalado del
navegador o el scroll en la pglna.















8ecursos CSS



CSS3 Generator
hLLp://css3generaLor.com/

CSS3 Grad|ent Generator
hLLp://gradlenLs.glrzad.com/

{CSS} orta| - on ||ne generator
hLLp://www.cssporLal.com/css3-rounded-corner/

CSS3 MAkLk:
hLLp://www.css3maker.com

CSS3.com
hLLp://www.css3.com/



1ema 3.4
P1ML/CSS
navegacln
navegacln P1ML



un !"#$ es una llsLa de enlaces, Llene senLldo usar las marcas de
llsLa %&'( %'*( y el enlace %+(













navegacln P1ML



,"#$ verLlcal













navegacln CSS



Los valores -.. por defecLo de la llsLa y del enlace, deben ser
a[usLados a nuesLras necesldades.













L[emplo menu verLlcal
myspace
navegacln P1ML



,"#$ horlzonLal













navegacln CSS



-.. menu horlzonLal.













L[emplo menu horlzonLal
88C
8ecursos navegacln CSS



-/*01+'+23 Menus verLlcales
hLLp://www.crlsLalab.com/curso-hLml/menus-verLlcales/

-.. 4'563 Crear un menu horlzonLal slmple con CSS
hLLp://www.cssblog.es/crear-un-menu-horlzonLal-slmple-con-css/

7809:55'03 menu horlzonLal
hLLp://www.w3schools.com/css/LrylL.asp?fllename=Lrycss_floaL3









!"#$%& ()*) +"*$,&- ./
Diseo
Firefox OS
Fundamentos
!"#$%& ()*) +"*$,&- ./
.*"$01)2"&0$# ()*) $3 4"#$%&
!" $"%&'(" )* +", &'-*./"0-&.*, )* )-,*1& 2-,3"+ 4"'" 5-'*6&7
89 % +&, *+*$*./&, :;,-0&, )* )-,*1& *,/;. )-,4&.-:+*, *. +"
0&''*,4&.)-*./* <3("=
+"*$,&- ./ 56"4$3"0$#
hp://www.mozilla.org/en-US/styleguide/products/refox-os/
A connuacin se detallan algunas de las caracterscas bsicas
>3* )*:*. '*,4*/"',* ,-*$4'*=
!"#$%& ()*) +"*$,&- ./
.*"$01)2"&0$# (*"02"()3$#
78 !", 6&'$", )*:*. ,*' 0&.,-,/*./*,? <*&$@/'-0", 4*'& 0&.
detalles de cierta exibilidad orgnica.
98 La interfaz de usuario quiere evitar la rigidez mediante un
diseo cuidado y un adecuado uso de la pograa.
:8 El diseo debe tener una mnima presencia, ha de ser ecaz e
intuivo y proporcionar calidez y proximidad.
!"#$%& ()*) +"*$,&- ./
A")-& 5B Aplicacin de correo
!"#$%& ()*) +"*$,&- ./
A*+&C A*4'&)30/&' $3,-0"+
!"#$%& ()*) +"*$,&- ./
;3 2&3&*
Firefox establece una serie de normas de color a n de
4'&4&'0-&."' " +", "4+-0"0-&.* 63.0-&."+-)")? 0&.,-,/*.0-" %
0&D*'*.0-" 6&'$"+=
Este uso del color ene los siguientes objevos:
1. Proporcionar a las aplicaciones idendad visual.
2. Codicar mediante el color disntas funciones.
E= F&./'-:3-' " +" 63.0-&."+-)") % 3,":-+-)")=
<&3&*
!"#$%& ()*) +"*$,&- ./
<&3&*$# (*"02"()3$#
G'&4&'0-&.". 3.-)") 6&'$"+ " +", "4+-0"0-&.*, % ,&. 0&D*'*./*,
con la idendad visual de Firefox OS.
=>>))22 #4e00 =24?@9: =AB>>>> =C,BA>)
=>>>>>> =:::::: =92:B:A =AB>>>> =C,BA>)
<&3&*
!"#$%& ()*) +"*$,&- ./
<&3&*$# )4"2"&0)3$# #6(3$D$01)*"&#
Completan la gama cromca de Firefox OS y se ulizan cuando
es necesario proporcionar informacin ms completa.
#4D4D4D =C+C+C+ =ECECEC =F?F?F? =<@<@<@ =;@;@;@
=;;;;;;
=>>E;FG =>><F+9
=++++++ =>><F+9
=E9>>>> =<!?@9: #4B780A
#1C2224 =999G9!
<&3&*
!"#$%& ()*) +"*$,&- ./
5*)4"$01$#
Los degradados son sules y denen jerarquas.
<)A$2$*)
H)01)33) A3)02)
<)A$2$*)
Conguracin
Botn
inacvo
Botn dispuesto
para accin
Ejemplo de nuevo
2&3&*
Atencin. H& )*:*.
3,"',* +", ,-<3-*./*,
0&$:-."0-&.*,=
!&# 2&3&*$#
disntos
5*)4"$01$
reejado
Gradiente vercal o
diagonal
<&3&*
!"#$%& ()*) +"*$,&- ./ <&3&*
I+ 0&+&' )* 5-'*6&7 89 D" )* 0&.2-2-' 0&. +&, 0&+&'*, )* +", "4+-0"0-&.*, >3* ,* -.,/"+*.=
Cada aplicacin puede tener una norma de color diferenciada que responda a los
cdigos cromcos de su propia idendad visual.
!"#$%& ()*) +"*$,&- ./ FI63 =>>))22
F&.$3/")&'*, )* *,/")& Seleccin de acciones
!"#$%& ()*) +"*$,&- ./ Naranja #4e00
Iconos indicavos Separadores alfabcos
!"#$%& ()*) +"*$,&- ./ 5*"# &#26*&
J0&.&, )* ++"$")" 4'*,-&.")&, F":*0*'", )* "4+-0"0-&.*,
!"#$%& ()*) +"*$,&- ./ J&K&
I''&'*, !+"$")", 4*')-)",
!"#$%& ()*) +"*$,&- ./
I,/; )-,4&.-:+* 4"'" ,3 )*,0"'<" 3. "'0D-2& *. 6&'$"/& G9K 0&. +", 0&''*,4&.)-*./*,
planllas para Mac OS y Windows en hp://www.mozilla.org/en-US/styleguide/
products/refox-os/color/
!"#$%& ()*) +"*$,&- ./
+"*) /)0# ()*) +"*$,&- ./
Firefox OS uliza Fira Sans, una fuente pogrca especca en
)-6*'*./*, 03*'4&, % 4*,&,=
5-'" 9".,? &'-<-."+$*./* )*.&$-.")" 5*3'" 9".,? 63* )-,*1")" 4&' I'-L 94-*L*'$".. %
Ralph de Carois para Firefox OS. Dispone de una versin monospaciada, Fira Mono.
La pograa Fira est disponible en Open Type, True Type y Web Font en
hp://www.mozilla.org/en-US/styleguide/products/refox-os/typeface/
A B C D E F G H I J K L M N O P Q R S T U V X Y Z
a b c d e f g h i j k l m n o p q r s t u v x y z
1 2 3 4 5 6 7 8 9 0 $ & ! ? . ; : + ^= [ ] # @
A B C D E F G H I J K L M N O P Q R S T U V X Y Z
a b c d e f g h i j k l m n o p q r s t u v x y z
1 2 3 4 5 6 7 8 9 0 $ & ! ? . ; : + ^= [ ] # @
Tipograa
!"#$%& ()*) +"*$,&- ./
Unidad REM
CSS3 ha introducido algunas nuevas unidades en relacin a la
pograa. Entre ellas, la unidad REM que signica raz em
o root em que es una forma de medir la letra en valores
relavos.
La unidad REM remite al tamao de fuente que hay en la raz.
Por ejemplo, si el BODY ene un fontsize de 100% [lo que
podra corresponder con con 10 o 16 pxeles] la unidad REM
siempre ser equivalente a esos 10 o 16 pxeles.
Tipograa
!"#$%& ()*) +"*$,&- ./
Nombre Descripcin REM Peso Uso Ejemplo
h1 Heading 2.5 11 Regular / 400 Cabeceras
Firefox OS
h2 Subheading 1.6 7 Regular / 400 Subcabeceras, Ttulos de dilogo
Firefox OS
p.large Body Large 2.3 10 Light / 300 Dilogos
Firefox OS
p /ul Body 1.9 8 Regular / 400 Cuerpo de texto, listas, tamao por defecto
Firefox OS
p.alt Body Medium 1.7 7 Medium / 500 Cuerpo medio de texto e etiqueta inferior
Firefox OS
p.small Body Small 1.5 6.5 Regular / 400 Barra de estado
Firefox OS
p.mini Body Mini 1.4 6 Regular / 400 Impresin detallada, barra de estado
Firefox OS
p.micro Body Micro 1.3 5.75 Regular / 400 Etiqueta para icono de aplicacin Firefox OS
Eslos para pograa
Relacion de los eslos ms comunes y uso de cada uno de ellos
Tipograa
!"#$%& ()*) +"*$,&- ./
Aplicacin de eslos a disntos niveles de informacin
Tipograa
!"#$%& ()*) +"*$,&- ./
Diseo
Firefox OS
Estructura
!"#$%& ()*) +"*$,&- ./
Las cabeceras para aplicaciones en Firefox OS enen 5 REM de
altura y se componen de un tulo y dos reas para botones.
01 La parte izquierda se reserva para
retroceso de navegacin, cancelar y
men. Es ms oscura y separada por un
divisor vercal.
21 El tulo est siempre alineado a la
izquierda.
31 La parte derecha est reservada para
botones de accin y est dividida por un
separador vercal ms corto.
4)5$6$*)#
!"#$%& ()*) +"*$,&- ./
Hay dos pos principales de cabeceras:
Las de color claro se ulizan para aplicaciones mientras que las
de color oscuro son para mulmedia.
4)5$6$*)#
!"#$%& ()*) +"*$,&- ./
4&7&*$# ()*) 6)5$6$*)#
Puede modicarse el color. No puede centrarse el tulo.
8& (9$:$ &697;)*#$ 7) ()*;$ "<=9"$*:)1
8& (9$:$ 6&7&6)*#$ 9> 5&;?> $>6"@)1
/956)5$6$*)#
Las subcabeceras para editar son el color claro.
Las subcabeceras para congurar son en color oscuro.
4)5$6$*)#
!"#$%& ()*) +"*$,&- ./
4&7&*$# 67)*&# para aplicaciones de comunicacin:
correo electrnico, contactos, SMS, etc.
4&7&*$# &#69*&# para aplicaciones mulmedia:
cmara, fotos, msica, etc.
+&>:&#
!"#$%& ()*) +"*$,&- ./
!"#$%#&'( 8& :$5$> 9#)*#$ ,&>:&# =9$
*$:9<6)> $7 6&>;*)#;$ A 7)
7$B"5"7":):1
Edicin
+&>:&#
!"#$%& ()*) +"*$,&- ./ C"#;)#
D$B7)# B$>$*)7$#
Margen: 1,5 rem de la pantalla con el contenido.
Altura: al menos 4,5.
Segn las necesidades de contenido, las listas
en Firefox OS pueden ajustarse a los criterios del
diseador.
Disponible
Activo
Inactivo
No ledo
[sin foto]
!"#$%& ()*) +"*$,&- ./
E-6$(6"&>$# $> *$7)6"?> )7 @)*B$>
Puede haber excepciones a esta regla en funcin
de los elementos que forman parte de de la lista.
Por ejemplo, la adicin de una lista de contactos
de desplazamiento en el lado derecho, hace que el
ancho de la lista pueda acortarse.
C"#;)#
!"#$%& ()*) +"*$,&- ./
Nocaciones
Las nocaciones debern ser
breves y concisas y proporcionar
al usuario una visin rpida
del mensaje que se est
comunicando.
/9($*(&#"6"&>$#
C"#;)#
!"#$%& ()*) +"*$,&- ./
F&;&>$# :$>;*& :$ 9>) 7"#;)
Los botones se ulizan por muchas razones
dentro de una lista, incluyendo la seleccin de
los elementos y la acvacin o desacvacin de
opciones.
Algunos ejemplos de los botones que se
encuentran en las listas incluyen casillas de
vericacin. Adems, la altura de una la se puede
aumentar para para adaptarse a ciertos botones.
01 Las cajas de comprobacin van a la izquierda.
21 Interruptores y marcas alternavas van a la
derecha.
G1 Los botones comunes ocupan todo el ancho.
31 Los botones que afectan a toda la lista se
colocan en la parte inferior de la pantalla. Estn
separados por una lnea horizontal completa con
un fondo negro de un 5% de opacidad.
C"#;)#
!"#$%& ()*) +"*$,&- ./ F&;&>$#
F&;&>$# ()*) )66"&>$#
Los eslos de botones varan en funcin del po de accin que desencadenan.
Debe ulizarse la forma adecuada que asegure una interaccin consistente y visualmente coherente. Es
necesario aplicar correctamente el eslo en un fondo oscuro.
!"#$%& ()*) +"*$,&- ./ F&;&>$#
F&;&>$# ()*) )66"&>$#
Los botones para las acciones de acvacin estn diseados para fondos claros, mientras que los botones
para seleccionar valorar estn diseados para aparecer en una capa oscura.
!"#$%& ()*) +"*$,&- ./
E7$@$>;&# :$ 9>) 7"#;) :$ 5&;&>$#
01 En todos los botones de lista el texto est
alineado a la izquierda.
21 Hay un margen a la izquierda de 1.5 REM.
G1 El rea segura para para un icono es un cuadrado
de 3 REM.
31 La echa indica que se mostrar una
superposicin con un selector de valor
F&;&>$#
$#($6")7$#
F&;&>$#
!"#$%& ()*) +"*$,&- ./ F&;&>$#
!"#$%& ()*) +"*$,&- ./
F)**)# A ($#;)%)#
La barra de pestaas es un rectngulo negro de 4
REM de altura encuentra en la parte inferior de la
pantalla.
Los iconos de accin aparecen en la barra de
pestaas que permite al usuario navegar entre las
disntas secciones de ciertas aplicaciones.
El nmero mximo es 5.
F)**)# A ($#;)%)
!"#$%& ()*) +"*$,&- ./ E>;*):) :$ :);&#
Las cajas para introducir datos se presentan en
diferentes formatos dependiendo del contexto.
Cuando una de estas reas de entrada de datos
afecta a toda la pantalla, se coloca justo debajo de
la cabecera.
FH#=9$:)#
Un ejemplo de ello es el campo de bsqueda, que
aparece dentro de una variedad de aplicaciones.
Acva
E-()>:":)
!$#I)5"7";):)
!"#$%& ()*) +"*$,&- ./
Los formularios se crean al agrupar selectores de
valores, campos de entrada y botones.
Los formularios ocupan el ancho de la pantalla del
disposivo guardando los mrgenes de 1,5 rem
requeridos en ambos lados.
Cuando se necesita un nuevo elemento en la
misma lnea, como el icono de eliminacin, se
ajusta el espacio para ello.
+&*@97)*"&#
!"#$%& ()*) +"*$,&- ./
Las casillas de vericacin se ulizan
para seleccionar varios elementos en
9>) 7"#;) :9*)>;$ 7) $:"6"?>1 49)>:& #$
uliza para eliminar elementos a son
*&J&#1 /$ $>69$>;*)> >&*@)7@$>;$ $> $7
7):& "<=9"$*:& :$ 7) ()>;)77)1
C&# ">;$**9(;&*$#
6&>6K>;*"6&# #$
ulizan como
#$7$6;&*$# :$ 9>)
7"#;)1
C&# 6&>@9;):&*$#
jan el ON y el OFF
:$ 9>) ,9>6"?>1
E> 7)# @)*6)# :$
vericacin el
$#;):& .8 #$ ">:"6)
6&> 9>) @)*6)
de vericacin,
@"$>;*)# =9$ $7
$#;):& .++ $#
invisible.
Los botones deslizantes se ulizan
para controlar las funciones de valores
que aumentan o disminuyen, como el
volumen y el brillo.
!"#$%& ()*) +"*$,&- ./
L)*) 6)5$6$*)#
A 5)**)# :$
I$**)@"$>;)
Con sombra:
Color: #000000
Modo: Normal
Opacidad: 20%
ngulo: 120
Luz de usuario: No
Distancia: 1
Difusin: 0
Tamao: 0
L)*) 5&;&>$#
)#$ +,-."'
L)*) ,&>:&# 67)*&#
Con sombra:
Color: #000000
Modo: Normal
Opacidad: 20%
ngulo: 120
Luz de usuario: No
Distancia: 1
Difusin: 0
Tamao: 0
M++++++
M24GNGF
4&7&* $#;O>:)*
.#69*& #&5*$ 67)*&
M+44FPP Q ++NRPP
ME40G0G
Favorito
S)*6) T$@)"7U
V6&>&#
Un icono de Firefox OS es una imagen de 30x30
pxeles en formato PNG de 24 bits. Los iconos de
llamadas acvas son de 40x40 pxeles. Los colores
para los iconos son los indicados al margen.
V6&>&#
!"#$%& ()*) +"*$,&- ./
Los iconos deben estar
orientados a representar la
accin que representan. Deben
ser accesibles, que inviten al
usuario a usarlos.
A parr de la la forma bsica
de un cuadrado redondeado
se cruzan con lneas para
&",&,"%#,$'" (' $/%/+'"#'
coherencia formal.
Hay dos grosores de la lnea
recomendados: 1,6 REM y 2,4
REM. Aunque se permite el uso
de otros grosores, tal cosa debe
hacerse de forma excepcional.
El diseador debe aspirar a
%"/'" #%,$,+ 01/ "/&"/+/$2/$
la funcin deseada de la forma
ms sencilla y clara posible,
evitando las ideas demasiado
complejas.
V6&>&#
C&# "6&>&# ()*) +"*$,&- ./ $#;O>
disponibles en hp://www.mozilla.org/
en-US/styleguide/products/refox-os/
aconicons/
!"#$%& ()*) +"*$,&- ./ V6&>&# ()*) )(7"6)6"&>$#
Un icono para una aplicacin
Firefox OS aplicacin es una
imagen de pxeles 60x60 pxels en
formato PNG de 24 bits.
Cada uno de los iconos estndar
de aplicaciones OS est contenido
dentro de un crculo de 58 pxles
de dimetro.
Se genera automcamente
una sombrea en funcin de la
forma de la silueta del icono, por
(, 01/ $, /+ $/%/+'"#, #$%(1#"
esa sombra en la imagen que
proporciona el diseador.
C&# "6&>&# ()*) )(7"6)6"&>$# $> +"*$,&- ./
estn disponibles en hp://www.mozilla.
org/en-US/styleguide/products/refox-os/
"6&>#Q