Padres de cdigo & melhores prticas em

Front-end
Viso geral
Este documento contm diretrizes para aplicaes web construdas pela Creatie
!echnolog" #engenharia $ront-end% prticas da &sobar '( e est prontamente disponel
para )ual)uer um )ue dese*a acompanhar o progresso iteratio de nossas melhores
prticas. Caso tenha algum $eedbac+ $aor dei,ar um comentrio no post de
apresenta-o do nosso blog.
.s principais motiaes deste documento s-o/ 0% consistncia de cdigo 1%melhores
prticas. 2or manter consistncia nos estilos e conenes do cdigo3 ns podemos
diminuir o $ardo de manter cdigo legado e mitigar o risco de problemas $uturos. .o
aderir 4s melhores prticas3 ns asseguramos o carregamento otimizado3 per$ormance e
cdigo de $cil manuten-o.
5iretrizes gerais6 7oltar ao topo
Pilares do desenvolvimento Front-end
Prticas Gerais
&denta-o 6
2ara todas as linguagens3 ns obrigamos o uso da identa-o por so$t tabs #usando
caracteres de espao%. .pertando Tab no seu editor de te,to dee ser e)uialente
a quatro espaos.
8egibilidade s Compacta-o 6
9s pre$erimos a legibilidade ao in:s de economizar no tamanho do ar)uio. .
abund;ncia de espaamento : encora*ada3 bem como arte em .(C&&3 )uando $or
apropriado. 9-o h necessidade nenhuma do desenoledor comprimir
o <!=8ou C((3 ou ob$uscar o >aa(cript. 9s utilizaremos processos no lado do
seridor para automaticamente mini$icar e comprimir todos os ar)uios do lado do
cliente.
=arca-o6 7oltar ao topo
? primeiro componente de )ual)uer pgina web : a linguagem de marca-o<!=8. .
8inguagem de =arca-o de <iper !e,to #do ingls <!=8% tem uma histria srdida3
mas iniciou uma noa nos @ltimos anos. .ps uma longa e,perimenta-o de uma
ariante baseada em A=8 #A<!=8%3 a ind@stria aceitou )ue <!=8 : o $uturo da web.
. marca-o de$ine a estrutura e os elementos do documento3 o$erecendo um conte@do
estruturado. . marca-o n-o tem inten-o de de$inir o isual do conte@do da pgina3
al:m dos conceitos rudimentares3 como cabealhos3 pargra$os e listas. ?s atributos de
apresenta-o do <!=8 $oram dados obsoletos e o estilo dee estar contido nas $olhas
de estilo.
HTM!
<!=8B : uma noa ers-o do <!=8 e do A<!=8. ? rascunho das especi$icaes do
<!=8B de$inem uma @nica linguagem )ue pode ser escrita em <!=8 e A=8.Esta
procura resoler problemas encontrados em iteraes anteriores do <!=83 )ue
endeream as necessidades de uma aplicao web3 uma rea preiamente n-o coberta
pelo <!=8.
9s utilizaremos o doctypedo <!=8B bem como seus recursos )uando apropriado.
9s testaremos nossa marca-o com a $erramenta de alida-o da CDC 3 para assegurar
sua boa $orma-o. Cdigo 0EEF lido n-o : $undamental3 mas a alida-o certamente
a*uda na manuten-o do cdigo3 bem como na sua depura-o. "so#ar no garante
c$digo %&&' vlido( em contrapartida investe numa e)peri*cia entre navegadores
mais consistente.
=odelo 6
2ara documentos <!=8B ns utilizamos o modelo <BG2 modi$icado para as
necessidades do pro*eto. Hepsitorio no Iit<ub .
+oct,pe
'm doctypeapropriado )ue atia o modo de renderiza-o padr-o do seu naegador
sempre dee ser usado.
'm timo aspecto do <!=8B : )ue ele dinamiza a )uantidade de de cdigo
necessrio. .tributos incoerentes $oram dei,ados e a declara-o de doctype$oi
simplicada. .l:m disso3 n-o h necessidade do uso de CDATApara interpolar >aa(cript3
antes um re)uisito do A<!=8.
<!=8B 5oct"pe
1.<-doctype html>
Codi$ica-o de caracteres 6
!odo marca-o dee ser codi$icada em '!F-J3 por ser o mais amigel para
internacionaliza-o3 e isto3 dee estar tanto no cabealho da pgina )uanto no cabealho
de resposta da re)uisi-o <!!2.
.*ustando a codi$ica-o de caracteres usando o elemento <meta>.
1.<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/>
Em <!=8B3 apenas use/
1.<metacharset="utf-8">
+iretri.es Gerais de Marcao
.bai,o est-o as regras gerais de estrutura-o do <!=8. 2ro$issionais deem ser
lembrados de usar marca-o sem;ntica3 )ue representa o signi$icado do conte@do a ser
criado.
'se o elemento <p>para pargra$os ao in:s de duplo <br>.
Faa o uso de <dl>#lista de de$ini-o% e <blockquote>3 )uando apropriado.
8istas deem ser sempre representadas por uma <ul>3 <ol>3 ou <dl>3 nunca um
con*unto de <div>ou <p>.
'se a tag <label>para rotular cada campo de um $ormulrio3 o atributo fordee
associar o rtulo ao campo3 para )ue os usurios possam clicar no rtulo e assim dar
$oco no campo associado. cursor:pointer;no rtulo : dese*el.nota 0

nota 1
9-o use o atributo sizenos seus campos. ? atributo size: relatio ao tamanho
da $onte do campo de te,to. .o in:s disso3 use a propriedade widthdo C((.
Escrea comentrios no $echamento de <div>indicando )ual : o elemento )ue
est sendo $echado #id ou class%. &sso a*udar )uando e,istir muitos elementos
aninhados e muita identa-o.
!abelas n-o deem ser utilizadas para la"outs de pgina.
'se micro$ormats e ou =icrodata )uando $or apropriado3
especialmentehCard e adr .
Faa o uso dos elementos <thead>3 <tbody>e <th>#e o atributo scope% )uando
apropriado.=arca-o de tabela com a sinta,e ade)uada #<thead>3 <tbody>3 <th>3 scope%.
01.<tablesummary="Este o sumrio desta tabela">
02.<thead>
03.<tr>
04.<thscope="col">Tabela cabealho 1</th>
05.<thscope="col">Tabela cabealho 2</th>
06.</tr>
07.</thead>
08.<tbody>
09.<tr>
10.<td>Dados da tabela 1</td>
11.<td>Dados da tabela 2</td>
12.</tr>
13.</tbody>
14.</table>
'tilize iniciais mai@sculas para cabealhos e ttulos. 9unca use apenas cai,a alta
ou bai,a na marca-o de ttulos3 utilize a propriedade C(( text-
transform:uppercase/lowercasepara isso.
9ota-o de atributos 6
.pesar da especi$ica-o do <!=8B de$inir aspas em olta de atributos como opcional3
para manter a consistncia3 todos os atributos deem utilizar aspas.
1.<pclass="line note"data-attribute="106">Este o meu pargrafo de um texto
especial.</p>
C((6 7oltar ao topo
? segundo componente de uma pgina web : a in$orma-o de apresenta-o contida na
Folha de Estilo em Cascata #do ingls C((%. . implementa-o bem sucedida de C((
nos naegadores deu um controle abrangente sobre o aspecto isual de seus sites a uma
gera-o inteira de pro$issionais web.
.ssim como a in$orma-o da pgina : sem;nticamente descrita pela marca-o <!=83
o C(( de$ine todos os aspectos de apresenta-o atres da descri-o de suas
propriedades isuais. C(( : poderoso3 pois suas propriedades s-o misturadas e
combinadas por identi$icadores )ue controlam o la"out e as caractersticas isuais da
pgina3 $ormando camadas de regras de estilo #a KcascataK%.
2rincipios Ierais de Codi$ica-o 6
Carregue seu C(( atra:s de ar)uios e,ternos3 utilizando o menor n@mero de
ar)uios possel3 e sempre de dentro do elemento <head>da pgina.
'se o elemento <link>3 nunca Limport .
&ncluindo a $olha de estilo
1.<linkrel="stylesheet"type="text/css"href="style.css"/>
9unca utilize estilo em lin/a 0inline1
1.<pstyle="font-size: 12px; color: #fff">Isso ruim, eu digo</p>
9-o inclua estilos em linha #inline% no documento3 nem elementos <style>.Fica
mais di$cil rastrear as regrasM
'se um C(( reset #como o presente no <BG2 ou o Eric =e"ers reset % para
e)ualizar as di$erenas entre os naegadores.
'se um ar)uio de normaliza-o de $onte como o N'& $ontsMcss .
Elementos )ue ocorrem uma @nica ez dentro de um documento deem utilizar
&53 os demais deem utilizam classes.
Entenda cascata e especi$icidade de seletores para )ue oc possa escreer um
cdigo mais conciso e e$etio.
Escrea seletores )ue s-o otimizados para per$ormance. ?nde possel3 eite
seletores caros3 como por e,emplo o seletor curinga - *. Eite tamb:m )uali$icar
seletores de &5 - div#myid3 ou seletores de classe table.results. &sso : especialmente
importante em aplicaes web onde per$ormance : soberana e pode haer milhares ou
at: mesmo dezenas de milhares de elementos 5?=.8eia mais em escreendo C((
e$iciente no =5C.
=odelo C(( das cai,as 6
Conhecimento ntimo3 compreens-o do C(( e ter uma boa base no modelo de cai,a do
naegador3 s-o necessrios para con)uistar os $undamentos sobre os la"outs C((.
=odelo C(( de cai,a em D5 diagrama por >on <ic+s .
C(( 7alida-o 6
Ieralmente n-o utilizamos o alidador da CDC .
Formata-o do C(( 6
=antenha a $ormata-o dos seletores C(( em uma mesma linha e cada propriedade em
sua prpria linha. .s declaraes deem ser identadasM
&nsira um re$oro com 1 ou O espaos para estilos relacionados ou $ilhos. &sso permite
uma organiza-o isual hierr)uica e torna mais $cil #para algumas pessoas% a leitura
da $olha de estilos.
01..post-list li a{
02.color:#A8A8A8;
03.}
04..post-list li a:hover{
05.color:#000;
06.text-decoration:none;
07.}
08..post-list li .author a, .post-list li .author a:hover{
09.color:#F30;
10.text-transform:uppercase;
11.}
9o caso de um ambiente com rios desenoledores3 C(( em uma @nica linha dee ser
eitado por causar problemas com o controle de ers-o do ar)uio.
2l3a#eti.ar
(e oc $or um obcecado por per$ormance3 al$abetize as propriedades do C((3 assim
oc aumenta as chances de maiores padres repetitios estarem presentes para au,iliar
na compress-o IP&2 .
Classes sM &5s 6
7oc s dee dar atributos &5 para um elemento se ele $or @nico. Eles deem ser
aplicados apenas para este elemento e mais nenhum outro. Classes podem ser aplicadas
em m@ltiplos elementos )uando estes compartilham as mesmas propriedades de
estilo. Elementos )ue deem parecer e $uncionar da mesma $orma podem ter o mesmo
nome de classe.
1.<ulid="categories">
2.<liclass="item">Categoria 1</li>
3.<liclass="item">Categoria 2</li>
4.<liclass="item">Categoria 3</li>
5.</ul>
Conen-o de nomenclatura para seletores 6
2re$ira sempre dar nome a algo pela natureza do que 43 ao in:s do que ele parece3 se*a
ele um &5 ou uma classe. 2or e,emplo3 um nome de classebigBlueTextpara uma nota
especial em uma pgina : algo totalmente sem sentido se tier sido alterado para ter um
te,to menor com a cor ermelha.'sando uma conen-o mais inteligente
como noteText: bem melhor3 por)ue )uando ocorrerem mudanas isuais3 o nome
continuar a $azer sentido.
(eletores 6
?s (eletores C(( 9el D apresentam um noo con*unto de seletores C(( )ue s-o
e,tremamente @teis para atingir um determinado elemento.
Pseudo-classes
2seudo-classes possibilitam )ue oc estilize dinamicamente um conte@do..lgumas
pseudo-classes e,istem desde o C((0 #:visited, :hover3 etc.% e no C((1 #:first-
child, :lang%M 9o C((D3 0Q noas pseudo-classes $oram adicionadas a lista e s-o
especialmente @teis para estilar dinamicamente um conte@do.
5om#inadores 6 2tri#utos 7eletores
Combinadores $ornecem atalhos para a sele-o de elementos )ue s-o descendentes3
$ilhos3 ou irm-os.
.tributos (eletores s-o timos para localizar elementos )ue possuam um atributo
espec$ico eRou um alor espec$ico. Conhecimento de e,presses regulares a*udam com
os atributos seletores.
8speci3icidade
9aegadores calculam a especi$icidade para determinar )uais regras do C(( deem ser
aplicadas. (e dois seletores aplicam uma regra para o mesmo elemento3 o )ue tier
com maior especi3icidade vence.
&5s tem uma especi$icidade maior do )ue os de seletores de atributo3 e seletores de
classe tm maior especi$icidade do )ue )ual)uer n@mero de elementos de
sele-o. (empre tente usar &5s para aumentar a especi$icidade3 h momentos em )ue
podemos tentar aplicar uma regra C(( a um elemento e ela n-o $unciona3 n-o importa o
)ue tentamos. &sso acontece proaelmente por)ue a especi$icidade do seletor usado :
in$erior ao outro e as propriedades do mais alto est-o tomando precedncia sobre
a)ueles )ue oc dese*a aplicar. &sto : mais comum )uando se trabalha com uma $olha
de estilos maior e comple,a3 e geralmente n-o : um grande problema )uando se trata de
pro*etos menores.
5alculando especi3icidade
.o trabalhar com uma larga e comple,a $olha de estilos3 sempre : @til saber como
calcular o alor de especi$icidade de um seletor para salar o seu tempo e tornar os seus
seletores mais e$icientes.
Especi$icidade : calculada contando rios componentes do seu C(( e s-o e,pressos
nesta $orma #a3b3c3d%/
Elemento3 2seudo Elemento/ d S 0 T #E3E3E30%
Classe3 2seudo-classe3 .ttributo/ c S 0 T #E3E303E%
&5/ b S 0 T #E303E3E%
Estilo em linha #inline%/ a S 0 T #03E3E3E%
9o entanto3 pode ser melhor usar uma calculadora de especi$icidade/
'sando -importantoc substitui todas as especi$icidades3 n-o importa o )u-o alto
$or. 9s eitamos us-lo por este motioM 9a maioria das ezes n-o : necessrio3
mesmo se oc precisar substituir um seletor em uma $olha de estilo )ue n-o tem
acesso. 9ormalmente e,istem outras $ormas de substituir um seletor sem usar -
importantM (e possel3 eite-oM
2i,els s. Ems 6
9s usamos pxcomo unidade de medida para de$inir o font-size3 por)ue o$erece o
controle absoluto sobre o te,to. 9s percebemos )ue a unidade de medida emse tornou
popular para acomodar o &nternet E,plorer Q3 * )ue n-o redimensiona pi,el com base
em te,to. 9o entanto3 agora todos os principais naegadores #incluindo &EU e &EJ%
suportam te,to redimensionado com unidade baseada em pi,el eRou zoom na pgina
inteira. 5esde )ue o &EQ $oi considerado obsoleto3 : pre$erel usar tamanho em
pi,els. . unidade line-heighttamb:m dee ser usada3 por)ue n-o herda um alor
percentual do seu elemento pai3 mas : baseado no multiplicador do font-size.
Correto
1.#selector {
2.font-size: 13px;
3.line-height: 1.5; /* 13 * 1.5 = 19.5 ~ Arredonde para 20px. */
4.}
&ncorreto
1./* Equivalente a um font-size de 13px e 20px de line-height, mas apenas se o
tamanho padro de texto do navegador for 16px. */
2.#selector {
3.font-size: 0.813em;
4.line-height: 1.25em;
5.}
&nternet E,plorer Gugs 6
&neitaelmente3 )uando todos os outros naegadores parecem $uncionar corretamente3
)ual)uer ers-o do &nternet E,plorer ir apresentar algum bug absurdo3 retardando o
tempo de desenolimento. En)uanto ns encora*amos a solu-o de problemas e a
constru-o de um cdigo )ue ir $uncionar em todos naegadores sem modi$icaes
especiais3 4s ezes : necessrio usar comentrios condicionais if IEcomo ganchos em
nossas $olhas de estilos. 8eia mais em paulirishMcom
Corrigindo o &E
1.<!--[if lt IE 7 ]> <body class="ie6"> <-[endif]-->
2.<---[if IE 7 ]> <body class="ie7"> <![endif]-->
3.<!--[if IE 8 ]> <body class="ie8"> <-[endif]-->
4.<---[if IE 9 ]> <body class="ie9"> <![endif]-->
5.<!--[if !IE]><!--><body> <---<![endif]-->
1..box { float: left; margin-left: 20px; }
2..ie6.box { margin-left: 10px; }
(e oc estier usando <!=8B #e o <!=8B Goilerplate% ns encora*amos o uso da
biblioteca >aa(cript =odernizer e este padr-o/
1.<!--[if lt IE 7]> <html class="no-js ie ie6" lang="en"> <-[endif]-->
2.<!--[if IE 7]> <html class="no-js ie ie7" lang="en"> <-[endif]-->
3.<---[if IE 8]> <html class="no-js ie8" lang="en"> <-[endif]-->
4.<!--[if IE 9]> <html class="no-js ie9" lang="en"> <-[endif]-->
5.<---[if gt IE 9]><!--><htmlclass="no-js"lang="en"><---<![endif]-->
.breia-o 6
Em geral3 : pre$erel a abreia-o do C(( por causa da sua concis-o e possibilidade de
mais tarde oltar e adicionar em alores )ue * est-o presentes3 como : o caso
do margine padding. 5esenoledores deem estar cientes do acrnimo !HG83
denotando a ordem em )ue os lados de um elemento s-o de$inidas3 em sentido horrio/
topo3 para direita3 abai,o e para a es)uerda. (ebottom n-o estier de$inido3 ele herda o
alor do top. 5a mesma maneira3 se leftn-o $or de$inido3 ele herdar o alor do right. (e
apenas o alor de top $or de$inido3 todos os outros lados herdam o mesmo alor
declarado.
2ara mais in$ormaes sobre como reduzir a redund;ncia de cdigo na $olha de estilo3 e
como usar abreia-o em geral/
&magens 6
2ara repetir imagens3 use algo maior do )ue 0,0 pi,els .
7oc nunca dee usar imagens para criar espaos em branco.
'se C(( (prites generosamente. Eles tornam o e$eito hoer mais $cil3
melhoram o tempo carregamento da pgina e reduzem as emisses de di,ido de
carbono.
9ormalmente3 todas as imagens deem ser cortadas em um $undo transparente
#29IJ%. Elas deem ser cortadas bem nos limites da imagemM
9o entanto3 o logo sempre dee ter um bac+ground matte e padding
antes do corte #para )ue outras pessoas possam criar um hotlin+ para o ar)uio%.
Estilos gerais de $onte e te,to 6
T9tulos
5e$inir um estilo padr-o para ttulos h1-h63 incluindo cabealhos com lin+s. V
@til declarar estes no topo do seu documento C((( e modi$ic-los con$orme $or
necessrio para manter a consistncia em todo o site.
Cabealhos deem ter uma hierar)uia )ue indicam di$erentes neis de
import;ncia de cima para bai,o3 comeando com h1tendo o maior tamanho de $onte
(E?/ 2ara se ter uma ideia apro,imada de como a hierar)uia da pgina est
organizada e legel3 use a barra de $erramentas de desenoledor #5eeloper !oolbar%
do naegador para desabilitar o C((. 7oc ai acabar endo apenas o seu site com os
te,tos de todas as suas tags h1-h63 strong3 emetc.
in:s
Estilos padres para lin+s deem ser declarados e ser di$erentes do estilo de
te,to principal3 e com di$erentes estilos para o estado hoer.
Wuando estilamos lin+s com sublinhados usamos border-bottom3 algum padding
e text-decoration: none;. 7isualmente $ica melhorM
Tipogra3ia ;e#
? uso de $ontes customizadas e caracteres tipogr$icos na web tem se tornado muito
popular nos @ltimos anos. Com o suporte natio do browser em ascens-o3 rios
serios de apoio e .2&s disponeis3 agora e,iste real impulso neste cenrio. Cada uma
dessas abordagens abai,o tem suas antagens e desantagens. .ntes de comear um
pro*eto3 : melhor $azer uma pes)uisa para saber as limitaes tecnolgicas e de
licenciamento ao escolher a abordagem apropriada para o seu pro*eto em espec$ico.
!odas as opes abai,o tem incoenientes com sobrecarga de cdigo3 tempo de
desenolimento e per$ormance #cronometrada e percepteis%. Familiarizar-se com
estes problemas3 comunic-los aos outros membros de sua e)uipe e ao cliente3 ir sal-
lo mais tarde de signi$icantes problemas no pro*eto.
.bai,o alguns m:todos populares de incorporar $ontes customizadas3 listadas em ordem
de nossa pre$erncia de implementa-o/
L$ont-$ace 6
. regra L$ont-$ace permite )ue oc de$ina $ontes customizadas. Ela $oi primeiramente
lanada nas especi$icaes do C((13 mas $oi remoida do C((1.0M .tualmente3 : um
pro*eto de recomenda-o para o C((D.
9ossa primeira e mais pre$erel escolha para customizar $ontes na web : a@font-face3
simplesmente por)ue ele : parte do pro*eto de trabalho C(( =dulo Fontes3 o )ue
signi$ica )ue continuar a crescer em popularidade com a medida )ue cresce o suporte
ao naegador3 e ir melhorar a $acilidade de uso3 tornando se mais estel.
2ara agora3 )uando usar @font-face3 : recomendado declarar o cdigo $onte para cada
$ormato de $onte. &sso : importante se oc precisa trabalhar com um n@mero maior de
naegadores3 embora n-o se*a obrigatrio.
?s $ormatos de $onte incluem as especi$icaes abai,o/
<o33/ C?FF #Fonte Ceb de Formato .berto%
tt3/ !rue!"pe
tt3/ !rue!"pe
tt33 ot3/ ?pen!"pe
eot/ incorporados ?pen!"pe
svg3 svg./ Fonte (7I
=3ont-3ace > prova de #ala
2ara uma compatibilidade com todos os browsers use a noa sinta,e do
FontspringsX3 L$ont-$ace 4 proa de bala #ltima verso de 21/02/11%.
01.@font-face {
02.font-family: 'MyFontFamily';
03.src: url('myfont-webfont.eot'); /* IE9 Modos de
Compatibilidade */
04.src: url('myfont-webfont.eot?iefix') format('eot'), /* IE6-IE8 */
05.url('myfont-webfont.woff') format('woff'), /* Navegadores Modernos */
06.url('myfont-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
07.url('myfont-webfont.svg#svgFontName') format('svg'); /* Legado iOS */
08.font-weight: <font-weight>;
09.font-style: <font-style>;
10.// etc.
11.}
.)ui uma demo $uncional usando a @ltima ers-o.
5ompati#ilidade 5ross-@ro<ser
(a$ari3 &E Q-Y3 &E Y =odo de Compatibilidade3 Fire$o,3 Chrome3 i?(3 .ndroid3 ?pera.
Prevenindo o Modo de 5ompati#ilidade
.lguns &E podem ter ontade prpria e mudar para o modo de compatibilidade sem
oc saber. &ncluir o seguinte cdigo no cabealho do seu site <head>pode eitar )ue ele
use o modo de compatibilidade como padr-o/
1.<metahttp-equiv="X-UA-Compatible"content="IE=edge">
+icas para o =3ont-3ace
&E QTJ apenas ser aceito com uma $onte !rue!"pe empacotada como uma
E?!.
font-weighte font-styletem di$erentes signi$icados com o @font-face. 'ma
declara-o como font-weight: bold;signi$ica )ue esta : a ers-o em negrito da $onte3
ao in:s de aplicar o negrito a este te,to.
5icas para L$ont-$ace
Pr$s
Fcil de implementar
8arga ariedade de .2&s
Customizel
Fcil para adicionar aos elementos
9ada re)uerido al:m do prprio C((
.tualmente $az parte do pro*eto de trabalho de Fontes da CDC - C(( =dulo D
5ontras
(uporte limitado aos naegadores3 se usado indeidamente
.lguns erses antigas dos naegadores modernos #Chrome3 ?pera% nem
sempre renderizam bem. !e,tos pode ter arestas. **Eu no fui capa de confirmar se
isto ! ainda ! um problema ou no.
Ioogle CebFonts .2& & Ceb$ont 8oader 6
< duas opes disponeis no Ioogle Ceb$onts . .mbas as opes tm suas
desantagens3 claro3 mas eles podem ser t-o boas como o @font-face3 e isso depende da
necessidade do seu pro*eto.
;e#3onts 2P"
IoogleXs Ceb$onts .2& essencialmente $az a mesma coisa )ue o @font-face3 ele apenas
$az todo o trabalho chato para oc3 proendo suporte mais amplo aos naegadores. .
principal desantagem deste m:todo : a pe)uena biblioteca de $ontes )ue ele
possu. 2ara $az-los $uncionar tudo )ue oc precisa $azer : incluir a $olha de estilo Z o
nome da $onte.
1.<linkrel="stylesheet"type="text/css"href="http://fonts.googleapis.com/css?
family=Font+Name">
Em seguida3 de$ina um estilo para o seletor )ue oc precisa aplicar a $onte/
1.seletor CSS {
2.font-family: 'Nome da Fonte', serif;
3.}
Ceb$ont 8oader 6
?utra op-o )ue o Ioogle o$erece : o Ceb$ont 8oader 3 )ue : uma biblioteca
>aa(cript )ue permite maior controle do )ue a .2& Fonte $az. 7oc tamb:m pode usar
rios proedores web$onts como !"pe+it. 2ara us-la3 inclua o seguinte script na sua
pgina/
01.<script type="text/javascript">
02.WebFontConfig = { google: { families: [ 'Tangerine', 'Cantarell']} };
03.(function() {
04.varwf = document.createElement('script');
05.wf.src = ('https:'== document.location.protocol ? 'https': 'http') +
06.'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
07.wf.type = 'text/javascript';
08.wf.async = 'true';
09.vars = document.getElementsByTagName('script')[0];
10.s.parentNode.insertBefore(wf, s);
11.})();
12.</script>
. maneira mais rpida se oc n-o estier usando a .2&s .*a, : incluir o ar)uio
web$ont.*sM Caso ao contrrio3 oc dee usar isto/
1.<script type="text/javascript"src="https://www.google.com/jsapi"></script>
2.<script type="text/javascript">
3.google.load("webfont", "1");
4.google.setOnLoadCallback(function() {
5.WebFont.load({ google: { families: [ 'Tangerine', 'Cantarell']} });
6.});
7.</script>
Com o uso do Ceb$ont 8oader oc tem maior capacidade para customiza-o3
incluindo o uso de mais $ontes3 n-o apenas as encontradas na biblioteca Ioogle
Ceb$ont3 )ue n-o : muito asta. Entretanto3 e,ige )ue oc carregue >aa(cript3
sacri$icando uma coisa pela outra.
Pr$s
=uito $cil de se implementar
.lto suporte dos naegadores
2ode ser combinada com o !"pe+it
Customizel )uando usada com o Font 8oader
.2& $az a mesma coisa )ue o @font-face
5ontras
Giblioteca pe)uena de $ontes )uando se usa a .2& Fonte
'sando o Ceb$ont 8oader : necessrio o uso de >aa(cript para )ue ele
$uncione
. maioria dos naegadores carregam primeiro o restante da pgina3 dei,ando
um espao em branco onde o te,to deeria aparecer3 ou se houer3 d-o algum recurso
alternatio s )uando a pgina termina de carregar.
.lgumas $ontes da biblioteca web$onts renderizam pobremente no Cindows
Cu$on 6
(e oc escolher usar o Cu$on3 : altamente recomendado )ue oc utilize aers-o
comprimida . 7oc precisar conerter sua $onte usando o gerador .
1.<script src="cufon-yui.js"type="text/javascript"></script>
2.<script src="YourFont.font.js"type="text/javascript"></script>
3.<script type="text/javascript">
4.Cufon.replace('h1'); // Funciona sem um motor seletor
5.Cufon.replace('#sub1'); // Requer um motor seletor para IE 6-7
6.</script>
9s recomendamos o uso do Cu$on com modera-o3 pois pode causar problemas de
desempenho se aplicado a uma grande )uantidade de te,to. 2ara maiores in$ormaes
isite o Ci+i do Cu$on .
Pr$s
8argo suporte dos naegadores
Henderiza bem nos naegadores suportados
Customizel
Fcil de implementar
5ontras
He)uer o uso de >aa(cript para $uncionar
? te,to n-o pode ser selecionado )uando o usamos
9em todos caracteres podem ser usados
. customiza-o pode ser dolorosa
9em sempre : $cil de se aplicar a m@ltiplos elementos3 especialmente )uando
adicionamos e$eitos como hoers
!"pe+it 6
'sar o !"pe+it tem suas antagens e n-o dee ser totalmente descartado )uando $or
escolher o m:todo a utilizar para adi-o de $ontes personalizadas a um site. V uma $orte
plata$orma integrada3 escalel e popular. Ela pode ser usada com o Ioogle Ceb$onts e
: $cil adicionar ao Cordpress3 2osterous3 !"pepad3 e outros C=( similares.
9o entanto3 o uso completo do !"pe+it n-o em sem um custo . (e oc precisa us-lo
em um ou mais 1 sites3 ou o site tem um alto olume de pageiews3 oc ter )ue pagar
um alor anual de [OY.YY3 e se seu site tier mais de um milh-o de pageiews3 o custo
ser o dobro. 2or:m3 oc proaelmente tem a grana para cobrir o custo se oc tier
mais de um milh-o de pageiews. (en-o3 oc precisar repensar seu modelo de
negcio.
Pr$s
7asta biblioteca de $ontes3 incluindo $ontes .dobe
Fcil implementa-o
Ioogle Ceb$ont .2& e integra-o com plata$orma de blogs
2lano gratuito tem um limite3 mas n-o e,pira
5ontras
He)uer >aa(cript para $uncionar
8imitado acesso a biblioteca de $ontes n-o pagas
2lanos gratuitos e baratos s permitem usar 0-1 sites e 1-B $ontes por site
7oc tem )ue pagar para us-los em mais de 0 site
(calable &nman Flash Heplacement #s&FH %6
9s n-o recomendamos )ue oc utilize este m:todo. Como * $oi amplamente usado3
se sentiu )ue ele n-o : mais necessrio como op-o nas escolhas de )uais m:todos usar
para implementar $ontes personalizadas.
.pesar de ser popular entre Ceb 5esigners3 e ter um bom suporte na maioria dos
naegadores3 as desantagens dele n-o compensam o uso. . grande e mais bia raz-o
de se n-o usar s&FH : por)ue ela utiliza Flash. E mais3 para o Flash $uncionar
corretamente ele necessita de >aa(cript3 os scripts deem ser carregados antes do te,to
)ue oc usou e isto $ica isel na pgina. (em contar )ue ele aumenta o tempo de
carregamento da pgina e pode dei,ar um site lento ainda mais lento.
9s amos dei,ar oc $azer a matemtica a)ui/
Pr$s
!e,to pode ser selecionado
(uporte na maioria dos naegadores
. renderiza-o $unciona razoaelmente nos naegadores suportados
5ontras
Ele usa Flash
He)uer >aa(cript para )ue o Flash $uncione
V em Flash-
!e,to n-o aparece at: )ue se carregue os scripts
MM.e : FlashMM.
8icenciamento de Fontes 6
=esmo )ue oc possa praticamente trans$ormar )ual)uer $onte em um ar)uio $onte
web3 oc dee se certi$icar de )ue est legalmente de acordo para $az-lo.=uitas
$undies tem atualizado suas condies para especi$icar como suas $ontes podem ser
usadas na web. 7e*a 8icenciamento de Fonte e detalhes relatios a sua prote-o 3 para
mais in$ormaes.
Especi$icaes & Formato de ar)uios de Fontes 6
'sando C((D 6
7oc pode $azer um monte de coisas com as noas caractersticas adicionadas na
especi$ica-o do C((D3 muitas das )uais ainda n-o s-o totalmente suportadas por todos
os principais naegadores. &sto n-o )uer dizer )ue oc n-o pode us-las ho*e. 2ara as
coisas )ue ainda n-o h suporte3 e,istem bibliotecas $allbac+ ou outros Xpol"$illsX para
preencher os buracos onde os naegadores n-o suportam o noo recurso.
E,istem tamb:m algumas propriedades espec$icas do naegador ou pre$i,os3 )ue
deem ser usados para estilar elementos tamb:m. 9s recomendamos usar
o 2re$i,rMcom para ter certeza )ue oc incluiu todos os di$erentes pre$i,os e
propriedades para suporte em todos os naegadores.
>aa(cript6 7oltar ao topo
>aa(cript : o terceiro componente principal de uma pgina web. Cdigo >aa(cript
)uando deidamente aplicado3 melhora consideraelmente a e,perincia do usurio3
atra:s do controle de eentos e da camada de comportamento geral.
>aa(cript tem isto uma e,plos-o em sua popularidade nos @ltimos anos.Ianhou
poderosas implementaes no naegador )ue agora possibilitam a cria-o de aplicaes
web completas. ? uso cuidadoso de >aa(cript permite a manipula-o e controle total
sobre outros dois componentes de cria-o de pginas web3 o <!=8 e C((. <o*e3 a
estrutura das pginas e o isual podem ser manipulados em tempo real3 sem )ue se*a
necessrio atualizar a pgina completamente.
@i#liotecas Aava7cript
9s essencialmente desenolemos as noas aplicaes usando *Wuer" 3 embora
tenhamos conhecimento em puro >aa(cript3 assim como todas as grandes bibliotecas
modernas em >aa(cript.
Princ9pios Gerais de 5$digo
YYF do cdigo dee $icar em ar)uios e,ternos. Eles deem ser includos no
F&= da tag bodypara melhor per$ormance.
9-o con$ie na string user-agent. Faa a detec-o usando o recurso ade)uadoM
#=ais em 5ie &nto <!=8B/ 5etec-o & *Wuer"Msupport docs %
9-o utilize document.write().
!odas as arieis boleanas deem comear com KisK.!este para condies
positias
1.isValid = (test.value >= 4 && test.success);
9omeie arieis e $unes de $orma lgica. 2or e,emplo/ popUpWindowForAd3 ao
in:s myWindow.
9-o $aa redues ao nomear arieis. Com e,ce-o dos tradicionais ietc.2ara
loops for3 arieis deem ter nomes longos o su$iciente para ter signi$icado.
. documenta-o dee seguir a estrutura do 9atural5ocs .
Constantes ou arieis de con$igura-o #como dura-o de animaes etc.%
deem $icam no comeo do ar)uioM
Es$orce-se para criar $unes )ue possam ser generalizadas3 ter par;metros e
alores de retorno. &sto permite a reutiliza-o substancial do cdigo e3 )uando
combinada com includes ou scripts e,ternos3 podem reduzir a sobrecarga )uando os
scripts tem necessidade de mudar. 2or e,emplo3 em ez da di$cil codi$ica-o de uma
*anela pop-up com tamanho de *anela3 opes3 urls3 considere apenas criar uma $un-o
)ue tenha tamanho3 url e opes como arieis.
Comente o seu cdigo\ &sso a*uda a reduzir o tempo gasto com solues de
problemas em $unes >aa(cript.
9-o perca seu tempo com <--- -->3 comentrios )ue cercam sua linha *aascript3
a menos )ue oc se preocupe com o 9etscape O. /%
?rganize seu cdigo com o ?b*ect 8iteralR(ingleton 3 com o =odule 2attern 3 ou
com o ?b*ect with constructors .
Heduza arieis globais - )uanto menos oc as criar3 melhor. Ieralmente uma
para o espao de sua aplica-o : um bom n@mero..o especi$icar )ual)uer ariel
global3 identi$i)ue-a de $orma clara.
1.window.globalVar = { ... }
Espaos em branco 6
Em geral3 o uso de espaos em branco deem seguir conenes de leitura inglesa de
longa data. !al )ue3 haer um espao aps cada rgula e depois dois-pontos #e ponto e
rgula3 se $or o caso%3 mas sem espaos dentre os lados direito e o es)uerdo do
parnteses. Hesumindo3 ns de$endemos a leitura dentro da raz-o. .dicionalmente3
chaes deem sempre aparecer na mesma linha como seu argumento precedente.
Considere os seguintes e,emplos $or-loop de >aa(criptMM.
Correto
1.for(vari = 0, j = arr.length; i < j; i++) {
2.// Do Something.
3.}
Errado
1.for( vari = 0, j = arr.length; i < j; i++ )
2.{
3.// Do Something.
4.}
Errado tamb:m
1.for(vari=0,j=arr.length;i<j;i++){
2.// Do Something.
3.}
plugins.*s e scriptM*s 6
Comeando com o <BG2 )ue : nos apresentado com dois ar)uios3 plugins.*s e
scriptM*s. Essa se-o descree o uso bsico destes dois ar)uios/
plugins.Bs
? plugin.*s sere para conter todos os cdigos de plugins utilizados no seu site.Em ez
de lin+ar para di$erentes ar)uios3 ns podemos melhorar o desempenho incluindo todo
o cdigo em apenas um ar)uio. Embora e,ista e,cees para este uso3 um plug-in
e,tremamente grande )ue : somente usado em uma @nica pgina raramente isitada3
dee $icar em um ar)uio separado e s lin+ado na pgina )ue : usado. Embora3 na
maioria das ezes : seguro colocar erses comprimidas de todos os seus plugins num
ar)uio s para $cil acesso.
.)ui um e,emplo de como um ar)uio dee se parecer3 incluindo uma pe)uena tabela
de conte@do. &sso pode serir como um guia prtico para os plugins )ue est-o em uso3
incluindo 'H8s para documenta-o3 raz-o para o uso e assim por diante/
01./* PLUGIN DIRECTORY
02.What you can find in this file [listed in order they appear]
03.
04.1.) Animate Background Position -
http://plugins.jquery.com/project/backgroundPosition-Effect
05.2.) jQuery Easing Plugin - http://gsgd.co.uk/sandbox/jquery/easing/
06.3.) jQuery Ajax Form plugin -
http://jquery.malsup.com/form/#download
07.4.) jQuery validation plugin (form validation) -
http://docs.jquery.com/Plugins/Validation
08.-password strength
09.5.) Styled Selects (lightweight) -
http://code.google.com/p/lnet/wiki/jQueryStyledSelectOverview
10.*/
11.
12./**
13.* 1.) Animate Background Position -
http://plugins.jquery.com/project/backgroundPosition-Effect
14.* @author Alexander Farkas
15.* v. 1.21
16.*/
17.(function($) {
18.if(!document.defaultView || -document.defaultView.getComputedStyle){ // IE6-
IE8
19.//SNIPPED
20.};
21.})(jQuery);
22.
23.
24./**
25.* 2.) jQuery Easing Plugin (we're not using jQuery UI as of yet) -
http://gsgd.co.uk/sandbox/jquery/easing/
26.*/
27.
28.// t: current time, b: begInnIng value, c: change In value, d: duration
29.jQuery.easing['jswing'] = jQuery.easing['swing'];
30.
31.jQuery.extend( jQuery.easing,
32.{
33.//SNIPPED
34.
35.});
36.;(function($) {
37.$.fn.ajaxSubmit = function(options) {
38.//SNIPPED
39.}
40.})(jQuery);
41.
42./*
43.* jQuery Styled Select Boxes
44.* version: 1.1 (2009/03/24)
45.* @requires jQuery v1.2.6 or later
46.*
47.* Examples and documentation at:
http://code.google.com/p/lnet/wiki/jQueryStyledSelectOverview
48.*
49.* Copyright (c) 2008 Lasar Liepins, liepins.org, liepins@gmail.com
50.*
51.* Permission is hereby granted, free of charge, to any person obtaining a copy
52.* of this software and associated documentation files (the "Software"), to
deal
53.* in the Software without restriction, including without limitation the rights
54.* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
55.* copies of the Software, and to permit persons to whom the Software is
56.* furnished to do so, subject to the following conditions:
57.*
58.* The above copyright notice and this permission notice shall be included in
59.* all copies or substantial portions of the Software.
60.*
61.* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
62.* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
63.* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
64.* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
65.* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM,
66.* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
67.* THE SOFTWARE.
68.*
69.*/
70.
71.jQuery.fn.styledSelect = function(settings) {
72.//SNIPPED
73.returnthis;
74.};
7cript.Bs
(criptM*s sere para conter o cdigo da sua aplica-o ou site. 9oamente3 esta n-o :
sempre a melhor solu-o em uma grande e)uipe. 2ro*etos grandes e ricos em recursos
podem acabar diidindo o cdigo do aplicatio em mdulos ou recursos em ar)uios
espec$icos. 2ara sites pe)uenos3 aplicaes simples ou prottipo inicial3 dei,e seu
trabalho no scripts.*s para $azer mais sentido.
'm e,emplo simpli$icado3 usando o padr-o da marca-o discreta abrangente baseada
em 5?=3 pronta pra e,ecu-o 3 poderia ser algo como segue abai,o/
01./* Name: Demo
02.Author: Demo King */
03./*demo namespace*/
04.demo = {
05.common : {
06.init : function(){
07.//initialize
08.},
09.finalize : function(){
10.//finalize
11.},
12.config : {
13.prop : "my value",
14.constant : "42"
15.}
16.},
17.mapping : {
18.init : function(){
19.//create a map
20.},
21.geolocate : function(){
22.//geolocation is cool
23.},
24.geocode : function(){
25.//look up an address or landmark
26.},
27.drawPolylines : function(){
28.//draw some lines on a map
29.},
30.placeMarker : function(){
31.//place markers on the map
32.}
33.}
34.}
Variveis( "+ 6 5lasses
!odas as arieis >aa(cript deem ser escritas apenas com min@sculas ou
camelCase. . @nica e,ce-o para este caso : se estier criando Constructor Functions3
)uais comeam com mai@sculas por tradi-o. !odo ide declaraesclassem C((3
deem ser escritas usando apenas min@sculas. 9-o use traos3 nem sublinhados.
5elega-o de Eentos 6
.o atribuir ouintes de eentos discretos3 normalmente : aceitel atribuir diretamente
para os elementos )ue ir-o disparar alguma a-o resultante. 9o entanto3 ocasionalmente
pode e,istir rios elementos )ue correspondam aos crit:rios para o )ual oc est
eri$icando3 e ane,ando ouintes de eentos para cada um deles3 isso pode a$etar
negatiamente o desempenho3 nestes casos3 ao in:s disso oc dee usar a delega-o
de eento/
*Wuer"Xs delegate#% : pre$erel ao lie#% 3 por )uestes de per$ormance.
5ebugando 6
=esmo com os melhores alidadores3 ineitaelmente certas peculiaridades do
naegador ir-o lhe causar problemas. .bai,o algumas $erramentas @teis )ue ir-o lhe
au,iliar a re$inar a integridade do seu cdigo ou a*udar na elocidade de
carregamento. V importante )ue oc tenha todas essas $erramentas disponeis com
oc3 apesar do naegador primrio )ue oc usa para desenolimento.9s
recomendamos primeiramente codi$icar para o Fire$o, e (a$ari3 ent-o Ioogle Chrome e
?pera e adicionando twea+s com comentrios condicionais apenas para o &nternet
E,plorer. . lista a seguir possu rios depuradores @teis e analisadores de elocidade/
2adres para um melhor >aa(cript 6
Escrea um cdigo de $cil manuten-o
2adr-o @nico para ar
Elea-o/ 'm problema com ars dispersas
#9ot% .ugmenting Guilt-in 2rotot"pes
Eite Coners-o de !ipo &mplcita
Eite eal#%
Conerta n@mero com parse&nt#%
8ocaliza-o de chae de abertura
Capitalize Constructors
Escrea comentrios
Eite oid
Eite with (tatement
Eite continue (tatement
Eite Gitwise ?perators3 se possel
(to"an (te$ano $ala mais sobre estes e outros detalhes a)ui .
.cessibilidade6 7oltar ao topo
Este : um assunto bastante amplo3 )ue : separado de tudo se passa dentro de um
site. .cessibilidade tem haer com tudo3 de como o conte@do : escrito para a
estrutura-o da marca-o <!=83 aparncia e estilo3 a melhoria progressia e a
degrada-o suae3 como o signi$icado sem;ntico do seu cdigo e como ele : lido pelos
naegadores.
9s trazemos pessoas e marcas em con*unto3 como nunca isto antes. E mais
importante )ue alcanar tantas pessoas3 $ornecemos noas e emocionantes e,perincias
Knunca istas antesK. .lgumas reas para se considerar uma boa acesssibilidade durante
o desenolimento de )ual)uer pro*eto s-o/
=arca-o e sem;ntica
'sabilidade da inter$ace3 pelo teclado e com o >aa(cript desabilitado
Correto uso das tags3 atributos e descries
Conte@do em te,to para todo conte@do n-o-te,to
Hesumo do conte@do para leitores de tela #screen-readers%
Estas reas s-o todas estreitamente relacionadas para )ue possa ser mais $cil
discrimin-las com base em tipos de pro*eto. .)ui algumas coisas )ue deem ser $eitas
para alcanar uma pgina web acessel/
2ular 9aega-o 6
(e o seu site possu elementos de naega-o antes do conte@do principal3 proidencie
um lin+ para os leitores de tela para K2ular para o conte@do principalK. Esse : um lin+
)ue normalmente : escondido com o uso de C((3 mas ser e,ibido no leitor de tela para
pular a naega-o e indo direto pro conte@do.
01..skipnav { text-align: left; }
02..skipnav a {
03.position: absolute;
04.left: -10000px;
05.width: 1px;
06.height: 1px;
07.overflow: hidden;
08.}
09..skipnav a:focus, .skipnav a:active {
10.position: static;
11.left: 0;
12.width: auto;
13.height: auto;
14.overflow: visible;
15.text-decoration: underline;
16.}
1.<divclass="skipnav">
2.<ahref="#maincontent">Pular para o contedo principal</a>
3.<ahref="#sitemap">Pular para o mapa do site do rodap</a>
4.</div>
!ab &nde, 6
? ndice-guia de um documento comea com o primeiro lin+ do documento e $unciona
atra:s de todos eles do incio at: o $im. Este : $re)uentemente inutilizel e n-o
intuitio na $orma )ue os elementos aparecem na tela. (e assegure )ue a ordem de
tabula-o dos lin+s e elementos atios : lgica3 usando o atributo tabindex. Elementos
de $ormulrio deem ser tabulados atra:s da ordem )ue um usurio espera conclu-lo3
n-o necessariamente na ordem das tags em <!=8.
(iglasR.breiaes 6
(e o seu conte@do usa abreiaes ou siglas3 elas deem ser e,pandidas usando as
tags abbre acronym.
&magens 6
!odas as imagens deem ter o atributo alt. .tributos altd-o signi$icado e descreem o
conte@do da imagem. (e a imagem : puramente decoratia3 atributos altdeem ser
marcados em branco usando alt="". 9-o colo)ue algo como alt="Esta imagem
apenas decorativa"3 isso ser irritante para o usurio )ue utiliza leitores de tela.
9-o use imagens para criar espaos ou outros e$eitos similares3 isso pode ser $eito
apenas usando C((.
Flash e (ubstitui-o de &magem 6
(empre use um conte@do <!=8 de bac+up para o $lash. !odas as promo imagens
deem usar C(( baseado em substitui-o de imagem em ez de tags alt.
Fallbac+ para erses sem $lash/
1.<ahref="/nike/morethanagame/"id="morethan">
2.<h4>Nike: Mais que um jogo</h4>
3.<h5>Experimentar o movimento e viso de vesturio</h5>
4.</a>
1.a#morethan {
2.background:url(/promos/nikegame.jpg) no-repeat;
3.width: 200px;
4.height: 100px;
5.text-indent: -999px;
6.overflow:hidden;
7.display:block;
8.}
!er um $allbac+ para $lash e imagens tamb:m ir a*udar o (E?.
!abelas 6
!abelas deem ser usadas apenas para dados tabulares. Ela n-o dee ser usada com
propsitos de apresetna-o ou de la"out. Wuando usar tabelas/
'se o elemento thpara o cabealho da tabela. (e o cabealho tier abreiaes3
use o atributo abbrpara e,pandi-las.
2ara tabelas comple,as3 use o atributo scopenos cabealhos da tabela para
indicar a )uem elas dizem a respeito.
Cores 6
'so de cores dee cumprir o seguinte/
!e,to dee dar leitura com alto contraste. ?u use um $undo claro com um te,to
escuro ou ice-ersa. 'm te,to muito claro com um $undo claro : praticamente
impossel de se ler para a maioria das pessoas3 e pode ser ainda pior para )uem :
dalt]nico.
9-o use ermelho e erde *untos para $azer distines entre $uncionalidades
chaes - uma porcentagem de pessoas n-o ser-o capazes de distinguir-los.
? site C.& contm uma lista de $erramentas $ocadas para usurios com daltonismo 3
algumas )ue lhe permitem er o site como as pessoas com di$erentes tipos de
daltonismo em.
>aa(cript 6
2ginas deem continuar a ser $uncionais mesmo desabilitando o >aa(cript..plicaes
deem degradar normalmente3 ou )uando possel $azer uso dospol"$ills 3 para
adicionar aos naegadores mais antigos as $uncionalidades )ue eles n-o suportam.
(e-o BEJ 6
&nter$aces desenolidas pela &sobar deem ter conhecimento sobre os 2adres da (e-o
BEJ.
(e-o BEJ 2adres para intranet3 in$ormaes da internet e aplicaes para
internet.
.cessibilidade Chec+list 6
.)ui o chec+list da CDC sobre os pontos de eri$ica-o para acessibilidade.&nte$aces
desenolidas pela &sobar deem conhecer as diretrizes - 2rioridade 0 -5iretrizes
CC.I 0 .E .
2er$ormance6 7oltar ao topo
En)uanto ns continuamos a ultrapassar os limites do )ue : possel $azer na web3
continua sendo importante )ue uma pgina tenha )ue ser usada com o mnimo de
es$oro ou tempo de espera possel. . seguir algumas e,plicaes sobre como pginas
web podem ser otimizadas para continuar a dei,ar todos os p@blicos $elizes.
?timizar a entrega do C(( e do >aa(cript 6
(egue algumas otimizaes )ue deem ser $eitas para serir C(( e >aa(cript em
produ-o/
(eguir as diretrizes de per$ormances do Nahoo
Heduza imagens usando o smush .it . !amb:m use o N(low 3 )ue reduz
automaticamente todas as imagens para oc.
Con$igure apropriadamente o cache dos cabealhos.
Considere um subdomnio sem coo+ies para static assets
Eite blocos em linha de ^codeM^script_^_.^RcodeM^script_^_
C(( dee estar localizado no <head>do documento3 >aa(cript dee estar logo
antes da tag </body>.
X
C(( e >aa(cript deem estar mini$icados no lado do seridor. . maioria das
pessoas usam o N'& Compressor para isso.
.mbos deem ser seridos usando gzip
C(( deem ser concatenados *untos. ?biamente s pode ser $eito com ar)uios
)ue compartilham o mesmo tipo de mdia #e.gM screen ou print%M ? ob*etio principal :
reduzir o n@mero de cone,es <!!2 com dependncias durante o carregamento da
pgina.
>aa(cript dee ser concatenado. En)uanto um gerenciador de script a*a, seria o
ideal #similar ao N'& D 8oader%3 : mais complicado de se implementar.9o seu lugar3 eu
recomendo um download singular da maior parte do script usado no site. #Claro3 cache
apropriado dee ser usado para reter o ar)uio3 se possel.%
Concatena-o e mini$ication normalmente ocorrem durante um processo de
build automatizado3 ao empacotar o cdigo para implanta-o no palco ou de
produ-o. =uitos usam $erramentas como .nt ou =aen .
Eite blocos <script>em linha com o <!=8. Eles blo)ueiam a renderiza-o e
s-o bastante deastadores com o tempo de carregamento de pgina.
?timize a e,ecuc-o do >aa(cript 6
5urante o carregamento da pgina3 : comum alguns scripts esperarem para e,ecutar3
mas oc pode priorizar isso. Esta ordem prioriza com base na resposta do usurio/
0M (cripts )ue mudam isielmente a natureza da pgina precisam ser carregadas
primeiro. &sso inclu )ual)uer a*uste de $onte3 la"out de cai,a3 ou &EQ png$i,es.
1M &nicializa-o do conte@do da pgina
DM Cabealho da pgina3 naega-o superior e inicializa-o do rodap:
OM .ne,ar manipuladores de eentos
BM ?mniture3 5oubleclic+3 e outros scripts de terceiros
.laancagem dos C(( (prites 6
C(( (prites normalmente tem uma por-o de imagens mescladas *untas em um ar)uio
@nico de imagem. Cada parte : reelada usando C(( background-position..lguns
normalmente seriam assim/
1.a.expandbox {
2.display: block;
3.width: 75px;
4.height: 15px;
5.text-indent: -999px;
6.overflow: hidden;
7.background: url(../img/sprite.png) no-repeat-50px-5px;
8.}
V muito comum o uso de sprites para estados de :hover. 9o caso3 ser algo assim/
1.a.expandbox:hover { background-position: -50px-20px; }
'sando C(( sprites oc reduz o peso total da pgina e tamb:m o n@mero de cone,es
<!!23 acelerando o carregamento da pgina. =ais sobre t:cnicas gerais e uma is-o
sobre sprites . &sto : apenas uma melhor prtica para se $azer3 mas sempre )ue puder3
$aa o uso de C(( (prites.
=uitos desenoledores usam um sprite erticalmente-orientado para o sprite
primrio. Este sprite ertical dee ter menos do que ou igual a %&&p) de largura #e
alto%3 conter cones )ue normalmente s-o colocadas *unto ao te,to3 tais como balas de
tem de lista ou ligue para lin+s e botes de a-o. Nahoo usapoucos como este M
. @nica considera-o : )ue n-o $azer sprites muitos largos3 algo entre 0EEEp, em
)ual)uer dire-o ai acabar usando uma )uantidade considerel de memria. 8eia mais
em )uando usar sprites e o uso de memria 3 e para mais dicas gerais e t:cnicas na
cria-o de sprites3 e*a o =ozilla 5e Glog .
Formato de imagens 6
.)ui os )uatros principais $ormatos de imagens )ue deem ser usados3 detalhes abai,o/
>2EI
Ele ser responsel por todas as imagens $otogr$icas3 tal como imagens
promocionais da homepage e categoria3 ou )ual)uer imagem com um n@mero muito
alto de cores.
29I1O
Este $ormato : $acilmente acessel em 2hotoshop3 gera imagens de alta contagem
de cores e apoia suporte a opacidade graduada por pi,el.Helatiamente3 : um
$ormato pesado3 medindo em +ilob"tes. Este : apenas o @nico $ormato )ue o &EQ
precisa e,ecutar um png$i, para $uncionar. Wuando pro*etos precisam dar suporte ao
&EQ3 ns usamos o script 55`belated29I #'m png$i, )ue corrige o problema
)uando 29I1OXs aparece com um cinza ou um azul claro $undo no &EQ. Eles nem
sempre s-o compateis com bac+ground-position%.
Em muitos casos oc pode usar um $allbac+ em I&F para o &EQ no lugar do
29I1O. &sso ser mais eidente se )uais)uer sprites precisam ser $eitas em
29I1O. !odos os png$i,es s-o muitos lentos e caros3 por isso : melhor eit-lo.
29IJ
. surpreendente diersidade de cores pode ser capturada dentro das 1BQ cores3 por
isso ale a pena tentar 29I antes de >2I. 29I tamb:m : muito mais compacto )ue
o I&FM Este $ormato permite opacidade graduada em )uase todos os naegadores3
mas no &EQ os pi,els semi-opacos s-o apenas mostrado com transparncia
0EEF. Em muitos casos isso : su$icienteM Ele tamb:m n-o e,ige um png$i, para ser
e,ecutado3 por isso : @til para melhor per$ormance.
2hotoshop n-o pode produzir esses ar)uios semi-opacas corretamente3 mas o
Firewor+s pode.http/RRwwwMsitepointMcomRblogsR1EEUREYR0JRpngJ-the-clear-winnerR
!ransparent I&F JYa
I&F JYa o$erece a $le,ibilidade da transparncia e amplo suporte dos naegadores3
mas com as restries de nenhuma opacidade graduada3 nem uma pro$undidade
acima de 1BQ cores. Em nossa e,perincia3 pro$undidade de QO cores $ornecem boa
)ualidade em miniaturas3 e mantem o tamanho do ar)uio comparatiamente muito
pe)ueno.
!odas bai,a contagens de cores em imagens como cones ou gr$icos temticos
deem ser $eitos em 29IJ3 como : mais e$iciente em termos de tamanho deste
)uatro. 29IJ : a nossa principal recomenda-o para a maioria dos gr$icos em
sites.
5etalhes sobre o $ormato 29I3 suporte dos naegadores3 e os prs e contras s-o
abordados neste artigo .
2ara mais otimiza-o destes $ormatos3 use o NahooXs (mush .&t 3 ele ir reelar como
eles podem ser menores.
Cache 6
2ara conte@do esttico3 o naegador dee se possel cachear o ar)uio localmente. ?
conte@do )ue dee ter o cache com a data em um $uturo distante inclui/
ar)uios C(( e >aa(cript
imagens de produtos
gr$icos temticos
$aiconMico
$lash Msw$Xs e deos
imagens promocionais #lee cache%
2ara um melhor cache3 alaan)ue o Expires http header. .)ui um e,emplo de $uturo
distante de E,pires header3 dizendo ao naegador )ue esta resposta n-o ser considerada
obsoleta at: 0B de abril de 1E0B.
Expires: Thu, 15 Apr 2015 20:00:00 GMT
(e o seu seridor : .pache3 use a diretia ExpiresDefaultpara con$igurar uma data de
e,pira-o relatia a data atual. Este : um e,emplo usando oExpiresDefault3
con$igurando o E,pires date para 0 ano depois da data de re)uisi-o.
ExpiresDefault "access plus 1 year"
Expires http headerdee ser con$igurado para um alor entre um ms a partir do
presente a um ano #$uturo distante% do presente. Cacheamento aplicado em apenas uma
e,ata 'H83 para uma mudana no nome do ar)uio de )ual)uer atio ai comear uma
noa cpia. =uitos desenoledores usam um processo de constru-o para adicionar
um n@mero de ers-o ou carimbo de tempo3 um e,emplo disso : o <!=8B
Goilerplate. Cada compila-o subse)uente ai comear uma noa ers-o em cache3
permitindo )ue oc use datas de cache de $uturo distante sem se preocupar. Ioogle
tem bastante detalhes sobre cache do naegador.
Hecursos compartilhados em rios domnios 6
Conte@do esttico dee certamente ser serido de um domnio di$erente da)uele )ue
sere o <!=8. &sto : o ideal e n-o h )ue ter e,tra coo+ies headers em toda re)uisi-o
de conte@do esttico . V tamb:m muito $cil de se escreer regras de cache para todo o
domnio. #!amb:m )ual)uer subdomnio do domnio atual ir-o herdar os coo+ies3 por
isso ale a pena usar um domnio completamente noo%.
Embora com su$icientes acertos #especialmente em imagens% o n@mero de re)uisies
cresce o su$iciente para dei,ar lento o carregamento da pgina.=uitos naegadores tm
uma restri-o bai,a de )uantas coisas )ue ir-o bai,ar simultaneamente por
domnio. #9o &EQ e U3 : apenas dois%M Em todo o caso3 podemos serir m@ltiplos
domnios dessa $orma/
static0MotherdomainMcom
static1MotherdomainMcom
staticDMotherdomainMcom
=ais in$ormaes sobre sharding de domnio no Ioogle (peed
Eite &FH.=Es 6
&$rames s-o o elemento mais caro para adicionar a uma determinada pgina. Eles
blo)ueiam a pgina de disparar o eento onloadat: )ue eles est-o completos. as ezes3
s-o @teis para permitir )ue outra agncia possa lidar com scripts de rastreamento. 2or
e,emplo3 a tag do 5oubleclic+ : um i$rame3 e o administrador pode adicionar
rastreamento de pi,els em seu painel. Em )ual)uer caso em )ue um i$rame :
adicionado3 dee ser ane,ado ao 5?= dinamicamente aps a *anela de onload$oi
disparada. =ais detalhes no site sobre 2er$ormance do Nahoo .
&ntera-o com serios de terceiros 6
Cmniture
9s recomendamos )ue adicione o cdigo do ?mniture >aa(cript para o 5?= usando
>aa(cript aps a pgina ter sido carregada #se*a um eento 5?= read" ou windowXs
load eent%. 'sando esta t:cnica3 n-o ter dependncias de scripts partindo de domnios
e,ternos3 )ue pode dei,ar o site lento #e bem lento%.
Flas/
Conte@do de bac+up dee estar no mesmo lugar do Flash em todos os casos para
ma,imizar o trabalho do (E?. 2ara A=8-drien3 o bac+up do conte@do dee ser
alaancando com o mesmo ar)uio A=83 para garantir a consistncia dos dados.
!odas as substituies deem ser $eitas usando (CF?b*ect3 mas sem tags em
linha script. &nicializa-o SWFObjectdee e,ecutar aps o eento 5?= Head".7erses
do pla"er deem estar a*ustadas para no mnimo Y3 para garantir compatibilidade com
.(D.
8strat4gia de Per3ormance 5ross-@ro<ser
< duas importantes erdades )uando se trata de e,perincia de naegador/
0M (empre procure a e,perincia mais responsia possel.
1M !udo adicionado a pgina desacelera.
.ssim com estes dois $atos da ida3 )uais os passos )ue precisamos para dei,ar todos
$elizes?
Crie m:tricas de sucesso com o cliente 6
Estas deem ser customizadas para o seu cliente e pro*eto3 deem tamb:m ser
terminadas antes da $ase de wire$raming. Estes ob*etios deem ser razoeis a partir de
um 2?7 t:cnico3 bem como testeis.
2lguns o#Betivos que seriam apropriadosD
0M ? naegador mais lento suportado dee carregar totalmente a pgina com o
cache azio em B segundos.
2. Estados hover#e outras mudanas Xinstant;neasX% deem responder com 0EEmsM
DM .nimaes deem surgir suaemente3 com *umpiness ocorrendo ^ 0BF do
tempo #em todos os naegadores%.
2ara metas de carregamento de pgina3 : importante de$inir o benchmar+ do
sistema. 'ma boa op-o : o 2age!est M .dicionalmente3 metas podem ser de$inidas para
m@ltiplas pginas3 por e,emplo/ as duas maiores pginas de destino #e,/ homepage e
suporte%.
(e o cliente tier metas mais agressias )ue s-o razoeis com o )ue : pretendido3 as
e,pectatias deem ser de$inidas atra:s de reunies do conselho3 aisar a e)uipe das
metas de desempenho do pro*eto : $undamental.
Comunicando o impacto de per$ormance durante o processo de
design 6
"nternalmente
5urante &.3 &,53 e o a cria-o do design3 : o papel do $ront-end comunicar o impacto de
per$ormance das caractersticas interatias ou certas t:cnicas isuais dos naegadores
alos. 5 aos designers as restries/ K(e ns usarmos Cu$on3 n-o podemos ter mais de
0E elementos de $ontes customizadas por pgina.
8)ternamente
E,pectatias precisam ser de$inidas3 todos os navegadores no tero a mesma
e)peri*ncia. Eles n-o -o e,ecutar bem como uns aos outros3 n-o $ar-o sentido eles
terem semelhanas. (eria sensato dei,ar de suportar algumas caractersticas para a
e,perincia com &EU. Catactersticas )ue podem ser descartadas/ shadows" transitions"
rounded corners" opacit#" gradients.
Euando comunicamos o impacto de algoD
5ei,e claro o impacto com os maiores detalhes possel/ Kisso ir $erir o
carregamento da pginaK s Kisso somar mais 1 segundos de carregamentos do site no
&EK
Fornecer um 2?C rpido #proa de conceito%3 se possel/ KV uma pgina
semelhante sem siFH carrega em 1 segundos3 com siFH ela carrega em J com um atraso
para isualizar )uando h rolagemK
5esenoler de acordo com as melhores prticas 6
Escolha bibliotecas e plugins )ue tem otimiza-o na per$ormance. !ome decises sbias
na ar)uitetura baseado nas metas de per$ormance. !amb:m minimize manipula-o do
5?= )uando possel3 e escrea estilos para eitar mudanas isuais )uando a pgina
carrega e inicializa.
=edir a per$ormance durante o W. 6
E)uipes W. #em portugus3 Iarantia da )ualidade% deem tamb:m priorizar
desempenho3 relacionados ao lado do isual e )uestes de
usabilidade.5esenoledoress e W. deem determinar como esta prioridade ser
atribuda.5urante o W.3 as m:tricas de sucesso deem ser testadas regularmente.
Ferramentas para teste Euando as metas de per3ormance no so cumpridas( /
tr*s opFesD
0M $econstrua o c%digo - o per$il3 descubra os gargalos3 re$atore o cdigo3 otimize
para atingir uma e,ecu-o mais rpida no naegador
1M &argue o recurso - deslig-lo apenas para os naegadores mais lentos
DM $edesenho da abordagem do '( - talez o pro*eto poderia usar um a*uste )ue
seria ignorar totalmente o problema
Com esta abordagem3 ns achamos )ue todas as partes deem ter uma melhor chance de
ter as e,pectatias alinhadas3 bem como um $lu,o de trabalho mais sensel ao lidar
com os desa$ios de desempenho.
!este com 9aegadores e (uporte6 7oltar ao
topo
. audincia de ho*e pode escolher entre uma grande ariedade de naegadores web3
cada um $ornecendo uma ligeira #ou dramtica% di$erena na e,perincia do
usurio. Como desenoledores3 a nossa responsabilidade : escolher apenas como as
pginas ser-o construdas e e,ibidas para a)ueles usurios. Este captulo descree como
ns da &sobar tomamos algumas dessas decises-chae.
? )ue damos suporte 6
. "so#ar d suporte a qualquer navegador com Grade-2 no Ga/ooHs Graded
@ro<ser 7upport ( com e)ceo do Cpera. Pode /aver e)ceFes a este( em 3uno
dos mercados regionais e suas m4tricas espec93icas.
Faremos o possel para dar suporte a )ual)uer outros naegadores de miss-o crtica
solicitados pelo cliente #&E B.B3 ?pera3 bon)ueror3 (a$ari D no 2C etc%3 embora n-o
possamos garantir todas as $uncionalidades.
Como ns testamos 6
!estes abrangentes em naegadores : uma necessidade em todos os pro*etos web da
&sobar. 'm es$oro considerel dee ser $eito para testar em rios naegadores e
plata$ormas para garantir a )ualidade e e,perincia consistente do usurio. Con$igurar
um ambiente de teste pode ser um desa$io3 mas pode aler a pena.
Io Microso3t ;indo<s
Teste com "8
5esde )ue se tornou impossel ter mais de uma @nica cpia do =icroso$t &nternet
E,plorer instalada no 2C3 testar para o &E se tornou um desa$io.Felizmente3 a =icroso$t
$inalmente tornou disponel para download3 erses antigas de desenolimento do
&nternet E,plorer. Esses 5iscos 7irtuais #7<Xs% rodam erses antigas do =icroso$t
Cindows )ue e,piram #tempo limite% ao longo do tempo. Con$igur-lo noamente
depois de alguns meses se torna comum. Cpias de desenolimento do =icroso$t
Cindows de sua licena =(59 #se estier disponel% tamb:m pode ser uma op-o3
dependendo do )ue oc tem acesso.
7irtual 2C - 7irtual 2C dee ser instalado no seu computador3 e se oc estier
no Cindows U3 oc dee usar o K=odo A2K.
=icroso$t Cindows 72C &mages - 5iersas ariedades de imagens de discos
irtuais est-o disponeis. 5ependendo do seu pro*eto3 oc pode necessitar instalar
diersos para ter um con*unto abrangente de testes.
E,istem outras opes menos e$icazes de testar o &E #normalmente n-o recomendado%
incluem &E!ester 3 o )ue ainda : melhor do )ue =ultiple`&E e &EU standalone .
Fire3o)
Fire$o, D .QZ deem ser instalados natiamente - com erses D.E disponeis
atra:s de erses portat:is .
(e oc estier apto3 instale o Fire$o, D3 D .B3 eRou DMQ lado-a-lado com FFO M ?
Fire$o, 2ro$ile =anager permite )ue oc instale di$erentes diretrios emantenha
di$erentes per$is para cada .
7a3ari para P5
'se a mais noa ers-o do (a$ari no 2C . Ela : YJF consistente com o (a$ari no
?( A3 mas n-o completamente3 ent-o teste este se $or um alo de suas plata$ormas.
Cpera
7oc pode bai,ar erses antigas destes ar)uios . &nstale em di$erentes pastas
para rodar m@ltiplas erses.
Google 5/rome e suas versFes
Ioogle Chrome se atualiza automaticamnete e para nossa sorte3 a maioria dos usurios
tem a erses mais recente deles. Com ele : mais $cil3 ent-o3 n-o se preocupe com
erses antigas do Ioogle Chrome.
Io Mac C7 J
? core dos naegadores =ac ?( A3 =ozilla Fire$o,3 Ioogle Chrome e .pple (a$ari
o$erecem e,perincias de naegador praticamente idnticas aos do Cindows. .lgumas
di$erenas de nel de sistema operacional pode estar presente e sites deem ser testados
em ambas as plata$ormas. 5i$erenas tpicas ocorrem em torno de renderiza-o de
$ontes e por ezes surgem )uestes de espaamento.
Teste para ;indo<s em um Mac
E,iste um n@mero de opes para testes em naegadores no Cindows no =ac
?(. 2rimeiro3 o =ac o$erece uma parti-o Kboot camp K3 )ue permite )ue oc
inicialize uma parti-o =icroso$t Cindows. Este : um ambiente de teste comple,o3 mas
completo. 5epois de iniciar no Cindows3 o normal : ter as todas opes )ue e,istem
nele.
?utras opes incluem irtualiza-o do Cindows dentro do =ac ?( A3 )ue permite )ue
oc literalmente rode o Cindows dentro do =ac ?(.
.s =icroso$t 7<5Xs podem ser abertas e conertidas na maioria dessas opes3
portanto3 permitindo o mesmo grau de destreza nos testes )ue os usurios do Cindows
tm 4 sua disposi-o. Embora desde )ue oc tamb:m pode testar no =ac ao mesmo
tempo3 alguns podem argumentar )ue oc tem mais $le,ibilidadeMM.
2arallels - 2arallels est disponel e * pode ser instalado pelo departamento de
!& &sobar no seu =ac.
7=Care Fusion - 7=Care Fusion o$erece o mesmo nel de irtualiza-o do
Cindows atra:s do seu produto Fusion.
Mo.illa Fire3o)
.ssim como no Cindows3 oc pode instalar e rodar rias cpias do =ozilla Fire$o,
no seu =ac3 embora se*a um pouco mais complicado de con$igurar rios per$is atra:s
do 2ro$ile =anager. .)ui algumas dicas )ue oc pode usar com o.utomator3 para
$azer per$is separados e e,ecut-los bem .
Gugs nas erses standalone do &E 6
9ota/ ? &EQ standalone tem um bug de implementa-o de opacidade em alguns
casos. &sto ir resultar em $alhas em )ual)uer opacidade aplicada com um $iltro de C((3
como al$a opacidade ou um 29I de 1O-bit. 9o caso de opacidade dee ser testado3 oc
ai precisar de uma instala-o natia &EQ.
Foi noticiado )ue o &EU usando a plata$orma do 7ista n-o tem di$erena das erses do
Cindows A23 portanto3 oc pode )uerer ter certeza de )ue algu:m em sua e)uipe tem
esta con$igura-o tamb:m. &E!ester sabe-se )ue corrigir uma s:rie destas )uestes3
assim como os naegadores Aenocode.
Kesoluo do Iavegador
>unto com a restaura-o de browsers3 os desenoledores deem $icar consciente das
resolues de tela de seu p@blico. Como as telas dos monitores $icaram maiores3 a
amplitude das resolues cresce tamb:m. .bai,o est-o algumas diretrizes para a*ud-lo
a trabalhar com resolues.
Kesoluo %&LMp)
.ltura de rolagem isel estimada em BUEp,.
&deal largura com/ YQEp, - !em espaamento con$ortel nos dois lados3 :
diidido por muitos n@meros3 e tamb:m se sai bem com o padr-o &.G
=aior largura/ YUEp, - Continua com alguns espaamentos nos dois lados na
maioria dos naegadores. . matemtica3 *oga bem com o Iolden Hatio
=,ima largura/ YYQp, - (em incluir barras de rolagens horizontais na maioria
dos naegadores. Gaseado nesta pes)uisa 3 o m,imo : de 0EEDp, de largura3 se oc
n-o )uer uma barra de rolagem horizontal.
8stat9sticas atuais so#re taman/os de Banela
Kesoluo do sistema no 4( contudo( o mesmo que o taman/o do navegador
?timiza-o para =otores de Gusca6 7oltar ao
topo
'ma parte essencial de um bom web design e o desenolimento : o (E? #em ingls3
(earch Engine ?ptimization%. 'm bom e estruturado cdigo : a chae para assegurar
)ue uma pgina web n-o : s corretamente inde,ada por motores de busca3 mas
tamb:m : acessel para as pessoas com capacidades limitadas.
8steBa ciente de mel/ores prticas de 78C
&mprimir prticas recomendadas para C(( .
(iteRapp dee ser a*ustado de acordo com as 5iretrizes de Hesolu-o do
9aegador.
(iteRapp dee ser compatel com os re)uisitos descritos em !este em
9aegadores e (uporte.
Este*a ciente das melhores prticas de .cessibilidade3 tais como o padr-o BEJ e
os padres CC.I/
"nde)ao
9s deemos sempre usar a marca-o sem;ntica por)ue : legel e lgica )uando o
>aa(cript e o C(( est-o desligados. !odo o conte@do de uma pgina dee ser estar em
<!=8. 9s n-o deemos usar i$rames ou >aa(cript para carregar conte@do inde,el.
!odas as ligaes deem ser para destinos <!=8.
1.<ahref="/shelf/jordan/page/2">
Em ez de
1.<ahref="javascript:loadPage(2);">
Este permite )ue a pgina inde,e corretamente pelos motores de busca e tamb:m
permite )ue os usurios abram-os em noas abas e *anelas.
Ctimi.ao
. tag titledee possuir palaras-chaes para uma pgina @nica. ?s ttulos deem ser
@nicos para cada pgina. Cabealhos #h13 h2etc% deem $ormar um contorno do
documento e representar as mais importantes palaras-chae para a pgina. 'H8s
deem ser legeis com palaras-chae alo presentes nelas/
http://domain.com/mens-shoes/basketball/jordan/jordan-mens-ajf-6-basketball-
shoe/
vs
http:// domain.com/ecomm.cfm?view=prod&prodId=23425
IoogleXs (E? Heport Card 6
IoogleXs (E? Heport Card : um es$oro para $ornecer ideias 4s e)uipes de produtos do
Ioogle sobre como eles podem melhorar a pginas de seus produtos usando
otimizaes simples e aceiteis. Essas otimizaes s-o destinadas n-o apenas a*udar
)ue os motores de busca entendam melhor o conte@do da sua pgina3 mas tamb:m como
melhorar a e,perincia destes usurios.
Wuando isitamos estes sites medidas simples como $i,a-o de ligaes OEOs e lin+s
)uebrados3 simpli$icando a escolha da 'H83 e proporcionando meios mais $ceis de
entender ttulos e trechos de suas pginas3 podem bene$iciar os usurios e os motores de
busca.
Heises de cdigo6 7oltar ao topo
'ma reis-o de cdigo : a pedra angular do processo $ormal para garantir a )ualidade
da e,perincia do usurio desenolido pela e)uipe de tecnologia criatia. !rata-se de
uma reuni-o entre os autores de marca-o3 reisores e outros interessados3 com reises
de cdigo subse)centes. (impli$icando3 ns incentiamos a realiza-o de reises de
cdigo para manter as nossas $erramentas a$iadas e limpas.
Por que eu deveria 3a.er uma reviso de c$digo?
.s reises de cdigo s-o um inestimento estrat:gico de tempo para mitigar o risco em
um pro*eto.
=uitas ezes3 pede-se aos desenoledores de inter$ace )ue $aam composies isuais
atra:s do wire$rame. 9o entanto3 : possel )ue essas telas desenhadas n-o possam ser
traduzidas com $acilidade para a marca-o sem comprometer a )ualidade. .s reises
de cdigo $ornecem uma oportunidade para tratar o risco e de serem resolidas antes
)ue a produ-o total das pginas comee.
KevisFes de c$digo aumentam o n9vel glo#al de con/ecimento entre os proBetos
5esde )ue a reis-o de cdigo enola membros de $ora e de dentro da e)uipe3 t:cnicas
e melhores prticas s-o $acilmente compartilhadas ao longo de toda a e)uipe de
tecnologia criatia.
KevisFes de c$digo eliminam #ugs antes deles serem reprodu.idos em alguns
modelos e multiplicado em vrias pginas
9ormalmente3 reises de cdigo s-o conduzidas no incio do processo de
desenolimento3 antes da plena produ-o das pginas comearem. Wuando os modelos
s-o reisados pela e)uipe e e,ecutados atra:s de $erramentas de alida-o de m@ltiplos
naegadores3 bugs comeam a aparecer. Este : o momento ideal de serem corrigidosM
KevisFes de c$digo do uma re3rescada nos seus ol/os e uma oportunidade de
detectar os pro#lemas com o c$digo
Heises de $ora da e)uipe do pro*eto podem identi$icar mais $acilmente problemas com
o cdigo )ue os autores da marca-o3 )ue * tem trabalhado com o mesmo cdigo por
um longo perodo de tempo.
Euem deve participar da reviso de c$digo?
Em @ltima anlise3 : necessrio a presena do desenoledor lder para garantir )ue
$oram seguidos os prodecimentos ade)uados de reis-o.
9ormalmente3 um lder dee agir como $acilitador para uma sess-o de reis-o de
cdigo3 a menos )ue o lder : tamb:m o desenoledor de inter$ace3 cu*o cdigo est
em anlise. 9essa situa-o3 um gerente de pro*etos pode ser trazido como um
$acilitador.
. e)uipe de reis-o dee incluir pelo menos dois membros snior da e)uipe de
tecnologia de inter$ace e,perientes em prticas recomendadas de desenolimento.
C que 4 necessrio para uma reviso de c$digo?
.ntes da reis-o de cdigo ser conduzida3 modelos para serem reisados deem estar
completamente desenolidos3 alidados e testados em naegadores e plata$ormas
suportados pelo pro*eto.
? lder na prtica eRou desenoledor de inter$ace dee distribuir em OJ horas anteriores
4 data da reis-o de cdigo/
Cdigo para todas as pginas3 includes associados do lado do seridor3 C(( e
>aa(cript. Estes deem estar completamente comentados3 impresso com os n@meros de
linha no lado es)uerdo3 e o nome do ar)uioRpgina no rodap: de cada pgina impressa.
&magens #screenshots% de cada modelo
'H8s dos modelos3 se $or o caso
'ma lista com os naegadores e plata$ormas suportados por este pro*eto
'ma lista com conhecidos
'ma lista de problemas conhecidos e zonas de interesse
V comum para o cdigo ser mudado constantemente at: chegar a data de reis-o do
cdigo. &n$elizmente3 isto n-o dei,a tempo su$iciente para alida-o e testes.(e $or o
caso3 : recomendado )ue a reis-o do cdigo se*a remarcada para uma data )ue garante
uma reis-o de cdigo ade)uada.
.l:m disso3 o lder na prtica eRou o desenoledor da inter$ace dee reserar uma sala
de con$erncia e chamada em n@mero para todos os participantes3 * )ue : possel )ue
os membros do pro*eto ou e)uipe de reis-o do cdigo s-o de $ora. 'ma hora dee
preer tempo su$iciente para reis-o de dois ou trs modelos3 embora3 tempo ir ariar
dependendo do olume e comple,idade dos modelos.
5urante a reis-o do cdigo3 o lder na prtica eRou desenoledor da inter$ace dee
$acilitar o encontro3 en)uanto o lder ou o gerenciador de pro*eto toma notas e atribui
itens de a-o. ?s comentadores deem reer o cdigo e chegarem preparados para
realizar perguntas ou $ornecerem comentrios.
9otas e tens de a-o #incluindo proprietrios% deem ser distribudos a todos os
participantes aps a reis-o de cdigo. (e mudanas substanciais acabarem saindo de
uma reis-o3 ou todo o cdigo n-o $oi reisado3 ser necessrio agendar uma segunda
reis-o dele. 9o entanto3 isso dee ser discutido entre a e)uipe do pro*eto para
determinar a iabilidade.
.pndices6 7oltar ao topo
.)ui algumas re$erncias3 $erramentas e outras coisas )ue se relacionam com este
documento.
2p*ndice 2D Validadores
CDC C(( - (erio de 7alida-o
<!=8 7alidador - E,tens-o de Fire$o,
C(( 7alidador
.cessibilidade - Gobb" 7alidador
!esta pginas indiiduais para acessibilidade3 contra problemas com os
padres da CDC e (e-o BEJ
.cessibilidade - 2ortal C"nthia (a"s
2arecido com o Gobb"3 testa pginas indiiduais para acessibilidade
contra problemas com os padres da CDC e (e-o BEJ
2p*ndice @D Ferramentas
GrowserCam - =ostra como o seu site aparece na maioria dos naegadores
#incluindo erses% e sistemas operacionais.
.cessibilidade - Hepara-o3 aalia-o e trans$orma-o - Ferramentas para
.cessibilidade do Conte@do Ceb - relaciona as $erramentas de alida-o para testar3
alidar3 corrigir o conte@do da web e torn-lo mais acessel.
Editores de cdigo 6
'm bom editor de cdigo pode acender a produtiidade de $ormas e,cepcionais.=uitos
desenoledores pre$erem editores de te,to rudimentares3 en)uanto outros pre$erem
poderesos ambientes integrados de desenolimento #&5Es%.(egue uma lista geral com
algumas das mais bem conhecidas $erramentasd * )ue seria impossel enumerar todas
)ue e,istem.
.ptana
.ptana (tudio : um poderoso3 gratuito e open-source ambiente de desenolimento
.*a, )ue roda em stand-alone ou com Eclipse. .ptana (tudio o$erece $erramentas
para .*a,3 incluindo <!=83 C((3 5?= e edi-o e debug de >aa(cript3 com
suporte para adicionais e gratuitos plugins para desenolimento em 2<23 Hub" on
Hails e .dobe .&H. Ele tamb:m possui integra-o total com repositrios (79 para
commiting3 branching3 tagging3 merging e naega-o em repositrios. .ptana M
e8inu,3 =ac3 Cindowsf
Iean"
Iean" : um editor de te,to usando o +it de $erramentas I!b1 com caractersticas
bsicas de um ambiente integrado de desenolimento. Foi desenolido para ser
uma pe)uena e rpida &5E3 )ue tem apenas algumas dependncias de outros
pacotes. Ele suporta muitos tipos de ar)uios e tem algumas caractersticas
interessantes. Iean" M e8inu,3 =ac3 Cindowsf
9otepad ZZ
9otepadZZ : gratuito #lire como Kliberdade de e,press-oK3 mas tamb:m3 como
Kcere*a grtisK% editor de cdigo e substituto do Gloco de 9otas3 )ue suporta rias
linguagens de programa-o. Hoda apenas em ambiente CindowsM9otepad Z
Z . eCindowsf
e !e,tEditor
E : um noo editor de te,to para Cindows3 com poderosas caractersticas e com
algumas habilidades @nicas. Ele $az manipula-o de te,to de $orma rpida e $cil3 e
permite )ue oc $o)ue no )ue oc est codi$icando3 automatizando todo o trabalho
manual. (uporta rias linguagens e : apoiado pelo !e,t=ate3 permitindo )ue oc
to)ue em uma larga e atia comunidade. e !e,tEditor .eCindowsf
Edit 2lus
Edit2lus : um editor de te,to3 <!=8 e editor dos programadores para
Cindows.En)uanto ele sere como um bom substituto do Gloco de 9otas3 ele
tamb:m o$erece muitas caractersticas poderosas para autores de pginas web e
programadores. Edit2lus M eCindowsf
<omesite
<ome(ite B.B $ornece um $ino editor apenas para desenolimento
web.Caractersticas aanadas possibilitam )ue oc instantaneamente crie e
modi$i)ue <!=83 CF=83 >(2 e tags A<!=83 en)uanto as $erramentas de
produtiidade aprimoradas permitem-lhe alidar3 reutilizar3 naegar e $ormate seu
cdigo $acilmente. Con$igure o .dobe #antiga =acromedia% <ome(ite para atender
4s suas necessidades3 aumentando a sua $uncionalidade e personaliza-o da
inter$ace. <omesite M eCindowsf
!e,t=ate
!e,t=ate diz ser o KEditor 2erdidoK para =ac ?( AM 'm editor de propsito geral
com uma inter$ace esparsa3 o erdadeiro poder est em sua
e,tensibilidade.Caractersticas de selees de coluna3 macros graeis3 trechos3
auto-emparelhamento de colchetes e outros caracteres3 histrico de clipboard3
dobramento de cdigo3 guia-triggers3 espaos reserados com guias e mirror
t"ping. E isso : s o comeoM Wual)uer coisa )ue pode ser $eito atra:s de scripts de
linha de comando atra:s do =ac pode ser $eito atra:s de comandos
personalizados3 permitindo um alto grau de personaliza-o e e,pans-o do con*unto
de recursos. !e,t=ate do $ormato KbundleK $oi adaptado por muitos outros editores
de cdigo3 incluindo o !e,tEditor acima mencionado. !e,t=ate .e=acf
Espresso
Espresso $oi criado pelo mesmo companheiro )ue criou o inoador editor C((3
C((Edit. .s caractersticas do Espresso s-o destacamento da sinta,e3 dobramento
do cdigo3 conclus-o de cdigo3 naegadores de documento3 pro*etos3 poderoso
pes)uisador de cdigo3 e recursos internos de publica-o de ar)uios de
trans$erncia. E $inalmente3 um KdoceK poderoso con*unto de recursos )ue permitem
a cria-o de comandos personalizados e plugins.Espresso . e=acf
GGEdit
GGEdit : um grande-pai dos editores de cdigo do =ac para desenolimento
web. 2ossui destacamento de sinta,e3 $erramentas de manipula-o de te,to
e,cepcionais3 busca em rios ar)uios3 uma .2& programel3 recortes de te,to e
e,tensas $uncionalidades do =ac .utomator. GGEdit M e=acf
!e,tCrangler
? Kpe)ueno irm-oK gratuito do GGEdit3 : o poderoso cru editor de te,to com um
massio con*unto de caractersticas de manipula-o te,to. 2es)uisas3 e,presses
regulares3 trans$ormaes de te,to3 destacamento de sinta,e e $erramentas de
naega-o de cdigo para uma ariedade de ambientes com di$erentes
linguagens. !e,tCrangler M e=acf
Coda
Coda3 da empresa 2anic so$tware : uma poderosa &5E com edi-o de cdigo3
terminal3 gerenciamento remoto de ar)uios e documenta-o de a*uda3 todas
construdas em apenas uma inter$ace de usurio. Com o ob*etio de ser um balc-o
@nico para o $lu,o de trabalho de desenolimento web3 ela tamb:m tem integra-o
com (79 e um noo construtor de plug-in com poderoso suporte programel e
pacote de importa-o com !e,t=ate. Finalmente3 clips de cdigo e edi-o em tempo
real de multi-usurio tamb:m s-o suportados. Coda M e=acf
'ltraEdit
?utro editor )ue tem sido durante os anos3 um dos mais robustos e poderosos
editores te,to3 capaz de abrir ar)uios limitados apenas pela )uantidade de memria
no seu computador. (ua lista de capacidades : praticamente impossel de se listar3
mas inclui uma grande capacidade de se manipular te,to3 suporte a pro*etos3
poderosa pes)uisa e substitui-o3 edi-o he,adecimal3 lista de $unes e uma grande
suporte de linguagens #mais de QEE%3 F!2 remoto3 telnet3 ((<3 compara-o de
ar)uios e macros programeis3 $erramentas e suporte a compiladores3 e muito3
muito mais. 'ltraEdit M e8inu,3 =ac3 Cindowsf
(ublime !e,t
'm editor relatiamente noo3 (ublime !e,t : uma noa abordagem nos
editores. K.bre )ual)uer coisaK3 $az pes)uisas atra:s de nomes de ar)uios e
conte@dos de ar)uios3 com notel e$icincia. &ncrel e poderoso controle de
sele-o permite editar o te,to em rios locais imediatamente e o K=inimapK lhe d
uma isualiza-o ao estilo olho de pssaro do ar)uio aberto e oc pode achar algo
$acilmente. (endo atiamente desenolido e melhorado3 noas caractersticas est-o
sendo adicionadas e a comunidade em olta do editor est rapidamente se
e,pandindo. =acros3 auto conclus-o3 snippets3 build tools3 e a lista de caractersticas
ai crescendo. (uporta 8inu, e =ac comeando da ers-o 1M (ublime !e,t . e8inu,3
=ac3 Cindowsf
7im
(e oc tem )ue perguntar3 n-o : proaelmente para oc. 7im e8inu,3 =ac3
Cindowsf
E,tenses do Ioogle Chrome 6
Ferramentas de 5esenolimento
9-o : realmente uma e,tens-o para o Chrome3 mas construdo dentro dele
#compartilha com o inspetor do (a$ari Ceb3 ambos deriados de Cebbit.% Esta sute
de $erramentas possu um inspetor 5?=3 um bsico depurador >aa(cript3
$erramentas de per$il3 eri$icador de carregamento na rede com linha do tempo3
eri$icadores de recursos da pgina e muito mais. 5eeloper !ools M
code cola
'm painel pop-up com $erramentas de edi-o C(( para e,aminar e modi$icar estilos
em uma determinada pgina. code cola M
Firebug 8ite para Ioogle Chrome
7oc realmente n-o precisa instalar uma e,tens-o para usar o Firebug 8ite com o
Chrome3 embora a e,tens-o : @til3 por)ue permite )ue um oc acione o aplicatio
do script Firebug 8ite para )ual)uer pgina )ue oc estier trabalhando. 9-o : o
Firebug completo3 mas chega pertoM Firebug 8ite M
<!=8B ?utliner
? <!=8B ?utliner adiciona um pop-up com um contorno de <!=8B gerado da
hierar)uia de cabealho da pgina atual. .*uda para eri$icar a organiza-o de suas
pginas contra o noo cabealho <!=8B algoritmos de estrutura de
tpicos. <!=8B ?utliner .
2endule
Gom con*unto de $erramentas para isualizar dados e interagir com a pgina web
atual. =uito parecido com o a barra de $erramentas de desenoledores original do
Fire$o, . 2endule M
Ceb 5eeloper $or Chrome
Chris 2ederic+3 o desenoledor original da barra de $erramentas para
desenoledores do Fire$o,3 tm migrado a maioria deles para o Chrome. 8 oc
temM Ceb 5eeloper .
Fire$o, 2lugins 6
FireF!2
FireF!2 : um gratuito e seguro cliente F!2 multi-plata$orma para =ozilla Fire$o,3
)ue $ornece um acesso $cil e intuitio a seridores F!2. FireF!2 .
Firebug
Firebug integrado com Fire$o, te coloca um con*unto de $erramentas de
desenolimento nas suas m-os en)uanto oc naega. 7oc pode editar3 debugar e
monitorar C((3 <!=8 e >aa(cript em tempo real em )ual)uer pgina
web. Firebug M
Fire)uer"
FireWuer" : um con*unto de melhorias para Firebug integrado com
*Wuer".Fire)uer" M
Firecoo+ie
Firecoo+ie acrescenta isualiza-o de coo+ies3 edi-o e e,clus-o para
Firebug.Firecoo+ie M
C(( 'sage
C(( Coerage : uma e,tens-o para Firebug )ue lhe permite digitalizar rias
pginas do seu site para er )uais as regras C(( )ue s-o realmente utilizadas por
ele. C(( 'sage M
Ireasemon+e"
2ermite personalizar a maneira como uma pgina da Ceb e,ibe usando pe)uenos
pedaos de >aa(cript.Irease=on+e" M
Ceb 5eeloper !oolbar
.diciona um menu e uma barra de $erramentas com diersas $erramentas para
desenoledor web. Ceb 5eeloper !oolbar M
>(7iew
.diciona um item na barra de status )ue e,ibe todas os ar)uios e,ternos >aa(cript
e C(( carregados em uma determinada pgina. 2ermite )ue oc cli)ue e isualize
os ar)uios e coisas como suas 'H8s. gtima maneira de pu,ar as 'H8s dos
ar)uios para colocar em Charles para a depura-o remota. >(7iew M
8ie <!!2 headers
Wuando e,ecutado3 captura todo o tr$ego <!!2 a partir do naegador3 )ue permite
er )uais ar)uios est-o sendo solicitados3 bem como in$ormaes sobre os pedidos
e respostas do seridor. 8ie <!!2 <eaders M
Wuic+ 8ocale (witcher
'ma grande a*uda )uando se $az a internacionaliza-o3 o Wuic+ 8ocale (witcher
permite )ue oc altere a localidade eniada *unto no cabealho do naegador <!!2
user-agent3 dizendo seridores para e,ibir conte@do para oc em outras
localidades. Wuic+ 8ocale (witcher M
(creengrab
(creengrab $ica na barra de status do Fire$o,3 permitindo-lhe capturar e copiar ou
salar imagens das telas de tudo3 desde as selees de uma pgina web para a pgina
inteira3 mesmo as peas e,ibidas Kabai,o da tela de primeira rolagemK.(creengrab M
!otal 7alidator
2ermite acesso de um cli)ue para eniar sua pgina atra:s de um alidador de
marca-o. 9-o h melhor maneira de eri$icar rapidamente para eti)uetas ausentes
ou incompateis. !amb:m disponel como um aplicatio independente. !otal
7alidator M
E,tenses do ?pera 6
5ragon$l" : a $erramenta de desenolimetno similar ao Firebug.
&E 2lugins 6
5ompanionA7( +e#ug@ar( "8N +ev tools.
Charles 2ro," 6
Charles assiste todas as re)uisies e lhe traz um monte de in$ormaes sobre ela. Map
ocal tamb:m : e,tremamente @til3 ele permite )ue oc use um ar)uio local no lugar
de uma determinada 'H8 #bom para a substitui-o de um *s mini$ied por uma
completa%.
Fiddler 6
5o site/ Fiddler 5ebugging 2ro," : um Ceb 5ebugging 2ro," )ue registra toda a
tr$ego <!!2#(% entre o computador e a &nternet . Fiddler permite )ue oc inspecione o
tr$ego3 de$ina pontos de interrup-o3 e $aa K$iddleK3 com dados de entrada ou sada
Fiddler inclui um poderoso eento . Gaseado subsistema de script3 e pode ser estendido
usando )ual)uer linguagem M9E! .
(peedlimit 6
(peedlimit : um painel de pre$erncias #obras no (now 8eopard% para limitar a largura
de banda de rede para um de um casal di$erente elocidades-UQJ+ 5(83 Edge3 DI e
5ialup. Gom para testar suas mais bai,as elocidades3 ou )uando oc )uer saber como
seu aplicatio ir $uncionar em elocidades do mundo real.
!utoriais & Ferramentas /6
hcones 6
2p*ndice 5D Kecursos
EC=. 1Q1 - Bi Edi-o de 5ezembro de 1EEY
?peraXs - ? Ceb Currculo dos 2adres - artigos bsicos sobre a constru-o com
padres web.
Ioogle 5oct"pe - tutoriais mais aanados em *aascript e C((.
0E 2rincpios dos =estres em C(( - tudo isso : um conselho inteligente.
Ioogle - )uando em d@ida3 googleit.
=uita 2reguiaj - dei,e )ue o Ioogle $aa para oc3 ent-oMM.
NahooXs E,ceptional 2er$ormance - a e)uipe tem mantido uma das melhores
snteses dos pareceres de desempenho.
Ioogle tem agora um site sobre elocidade com e,celente detalhe. #Cli)ue em
todas as prticas recomendadas%M
E,istem muitas mais e,celentes recursos em otimiza-o de pgina e
per$ormance >aa(cript .
=ozilla - 2adres de cdigo .
9o+iaXs 2er$ormance de >aa(cript - =elhores prticas .
EuestFes?
Tweet para a e)uipe (*E+ (sobar,
>ared Cilliams #L*aredwilli%
.nnette .rabasz #Lannettish%
Hob Chern" #Lrchern"%
<istrico de Heis-o
1E00 5ezembro/ .tualizado captulo sobre .cessibilidade.
1E00 =aioR>unho/ !oda pgina de padres $oi redesenhada. Codi$icada com
htmlBboilerplateM
1E00 .bril/ !ipogra$ia Ceb $oi criada.
1E00 =aro/ 1+00 limpadoM .dicionado in$ormaes de contato etcM
1E0E .bril/ 2repara-o para lanamento p@blico.
1E0E =aro/ =esclado com outros documentos e padres web. Formato <!=8.
1EEY .gosto/ Criado documento sobre Hecomenda-o de 2er$ormance criado.
1EEJ >ulho/ Heduzido o tamanho do documento
1EEJ >ulho/ =isturado com os noos padres .
1EEB .bril/ 5ocumento original Kcomo escreer uma boa
marca-oK.'&5`coding`standardsMdoc .

Iotas relacionadas
/tml! 7&(k? IEH.8 5? <!=8B 5e acordo com o CDC a Ceb : baseada em D pilares/ 'm es)uema de nomes
para localiza-o de $ontes de in$orma-o na Ceb3 esse es)uema chama-se 'H&M 'm 2rotocolo de acesso para acessMMM
<<<.si.lopesga..ani.com.#rOTF5Omonogra3iasOMonogra3iaP8ricaPKaquel.pd3