EscoladeComunicaoeDesignDigital

CursodeGraduaoDesignGrfico
HTML&CSS
AssessmentFinaldaDisciplina

Layoutfinaldapginaindex.html:


EscoladeComunicaoeDesignDigital
CursodeGraduaoDesignGrfico
HTML&CSS
AssessmentFinaldaDisciplina

ResultadofinalArquivosobre.html


EscoladeComunicaoeDesignDigital
CursodeGraduaoDesignGrfico
HTML&CSS
AssessmentFinaldaDisciplina


EscoladeComunicaoeDesignDigital
CursodeGraduaoDesignGrfico
HTML&CSS
AssessmentFinaldaDisciplina

Etapa1:Arquivosobre.html

Nestaprimeiraetapa,voccriaraestruturaeoCSSdoarquivosobre.html

1. Crieumdocumentochamado"sobre.html"comestruturaemHTML5.
2. DefinaalnguadocontedocomoportugusbrasileironatagHTML.
3. Definindoaestruturadocontedo;
4. EstrutureolayoutcomHTML5,criandoasseguintesreas:
5. Caixaenvolvendotodoocontedo:div#container
Cabealho
reaprincipal:mainrole="main
Seosobre
Seohistoria
Seodiferenciais
Rodap
Fechadiv#container

Inserindoeestruturandootexto
1. Abraoarquivosobre.txt
2. Insiraotextoantesdottulo"Histria"naseosobre.
3. Estrutureottulo""AGKFashion"comottulodenvel2emarqueostextoscomo
pargrafos.
4. CopieecoleotextoreferenteHistriadentronaseo"historia".
5. Formateottulo"Histria"comottulodenvel2eotextocomopargrafos.
6. Abraoarquivodiferenciais.txtecoloqueotextodentrodaseodiferenciais.
7. Formateottulo"Diferenciais"comottulodenvel2eotextocomoumalistano
ordenada.

Inseridoeestruturandoasimagens
1. Depoisdosegundopargrafo(ondeterminacom"Nossocentrodedistribuio:")
insiraaimagem"centrodistribuicao.jpg".
2. Utilizeatagfigureparaenvolveraimagemecoloquecomolegendaotexto
"CentrodedistribuiodaGKFashion"
3. Coloqueoid"centrodistribuicao"nafigure.
4. Dentrodasecaodehistoria,logodepoisdottulo,insiraaimagem"familia
teles.jpg".
5. Utilizeatagfigureparaenvolveraimagemecoloquecomolegendaotexto
"FamliaTelesdeBressn".
6. Coloqueoid"familiateles"nafigure
7. Obs.:Noesqueadecolocaraltetitlenasimagens.

EscoladeComunicaoeDesignDigital
CursodeGraduaoDesignGrfico
HTML&CSS
AssessmentFinaldaDisciplina

Inserindoeestruturandolinks
1. Envolvaotexto"Cachoeirinha,nagrandePortoAlegre,noRS.",no2pargrafodo
arquivosobre.htmlcomumlinkpara
"https://maps.google.com.br/?q=Cachoeirinha"ealvonew.
2. IdentifiqueatravsdeIDottuloHistria(cuidado,nopodeseromesmoidda
seo"historia")
3. Crieumlinkinternoparaottulo"Histria"no3pargrafodoarquivosobre.html,
napalavrahistria.
4. IdentifiqueatravsdeIDottulo"Diferenciais"(cuidado,nopodeseromesmoid
daseo"diferenciais")
5. Crieumlinkinternoparaottulo"Diferenciais"no3pargrafodoarquivo
sobre.html,napalavra"diferenciais".
6. Crieumdocumentochamadoindex.html,comamesmaestruturadelayoutdeste
documentoecoloquenamesmapastadoarquivosobre.html
7. Crieumdocumentochamadocontato.html,comamesmaestruturadelayout
destedocumentoecoloquenamesmapastadoarquivosobre.html
8. Insiraumlinkparaindex.htmlnotexto"nossaloja"no3pargrafo.
9. Insiraumlinkparacontato.htmlnotexto"entreemcontato"no3pargrafo.

Estruturandoocabealho:
1. Insiraotexto:<h1>GKFashion</h1>comlinkparaindex.html
2. Obs.:AimagemdologoserinseridacomCSSeotextodoh1serremovidocom
CSS.Eleservirapenasparaindexaodasferramentasdebusca,jqueH1
considerandoocontedomaisimportanteeindexadoautomaticamente.

Estruturandoorodap:
1. Dentrodofooter,crieumadivcomclasse"caixafooter"
2. Dentrodadivcaixafooter,insiraaimagem"logo_rodape.png"
3. Insiraotexto"&copy;CopyrightGKFashion"
4. Crieumalistanoordenadacomclasse"social"
5. Cadaitemtextoapontandoparaumlink(asimagensseroinseridascomCSS):
6. Facebooklinkparahttp://www.facebook.com/gkfashion
7. Twitterlinkparahttp://www.twitter.com/gkfashion
8. Google+linkparahttp://plus.google.com/gkfashion


EscoladeComunicaoeDesignDigital
CursodeGraduaoDesignGrfico
HTML&CSS
AssessmentFinaldaDisciplina

InserindoHTML5SHIV
NoheadchameoHTML5SHIVnohead:
<![ifltIE9]>
<scriptsrc="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]>

FormatandoocontedocomCSS
1. Crieumarquivochamadoestilos.cssevinculeaodocumentosobre.html(CSS
externo)
2. Importeoarquivo"reset.css"noarquivo"estilos.css",ouentovinculeoarquivo
"reset.css"noarquivosobre.htmlantesdovnculoao"estilos.css".
3. Formateaaparnciadodocumentoconformeasseguintesrecomendaes:

tagbody:tipodefonte,cordafonteeinsiraaimagemdefundo.

div#container:
margin:auto(centralizadanahorizontal)
largura:940px

ttulodenvel1doheaderdeversumireaparecerfundodologo
formatarolink:headerh1a:
altura:134px
largura:130px
display:block
textident:9999px(fazcomqueotextosuma)
backgroundimage:logo_GK.png
margemexternaesquerda:40px

ttulodenvel2:
bordainferior:slida2pxcorlivre
margemsuperior:30px
tamdafonte:1.2em.

figure:
cordefundo:#F2EDED
borda:1pxslidacorlivre
alinhamento:centralizado
margeminterna:15px
margemexterna:30px


EscoladeComunicaoeDesignDigital
CursodeGraduaoDesignGrfico
HTML&CSS
AssessmentFinaldaDisciplina

legendadafigure:
margemsuperior:10px

pargrafos:
margemsuperior:15px
margeminternaesquerdaedireita:45px
alturadalinha:1.5em.
figurecomid"centrodistribuicao":
centralizadanahorizontal
largura:550px

figurecomid"familiateles":
flutuandodireitadotexto
margeminferioredireita:10px

listadediferenciais:
margemsuperiorexterna15px
margemdireitaexternade60px.

links:
retireosublinhado
definaumacor

linksaopassaromouse(a:hover)
voltecomosublinhado
rodape:
cordefonte:#ccc
margemexternasuperioreinferior:30px
margemexternadireitaeesquerda:0
imagemdefundo"fundorodape.png"
clearboth

imagemdorodap:
alinhamentovertical:meio
margemexternaesquerda:30px


EscoladeComunicaoeDesignDigital
CursodeGraduaoDesignGrfico
HTML&CSS
AssessmentFinaldaDisciplina

Formataoitensdesocialdorodap
Oselementosinternosdositensdesocialdorodapsotodosconesaserem
substitudosporimagensviaCSScomimagereplacement.Useseletoresdeatributo
doCSS3paraidentificarosconesdecadaredesocial.

Asimagensestodentrodeumasimagem,assimseroinseridascomCSSSprite.

Linksdaclassesocial
altura:32px
largura:32px
display:inlineblock
textindent:9999px(retiraotextodoitemeaparecesomenteaimagem)

CadaitemserchamadocomCSS3:
Exemplo:
.sociala[href*="facebook.com"]{
backgroundimage:url(../img/sociais.png)posioXeYnaimagem;

}
FaaomesmoparaositensdotwittereGoogle+mudandoaposio.

Posicionandooselementos:
Posicioneaclasse"caixafooter"dorodape
position:relativeemargeminterna:20px

Posicioneaclasse"social"composition:
absolute,top:30pxeright:20px

Posicioneositensdalistadaclassesocialcomdisplayinline.


EscoladeComunicaoeDesignDigital
CursodeGraduaoDesignGrfico
HTML&CSS
AssessmentFinaldaDisciplina

Etapa2:Arquivoindex.html

1. Oarquivoindex.htmlfoicriadocomamesmaestruturadelayoutdoarquivo
sobre.html,ouseja:
2. Caixaenvolvendotodoocontedo:div#container
Cabealho
reaprincipal:mainrole="main
Seohistoria
Seodiferenciais
Rodap
Fechadiv#container

3. Nocabealhojdeveexistiraimagemdologo_GK
4. Apsaimagem,insiraumpargrafocomclasse"sacola"eotexto:Nenhumitem
nasacoladecompras
5. Insiraummenucomaclasse"menuprincipal"(navclass="menuprincipal"),com
umalistanoordenada,ondecaraitemterlinkspara#:
SuaConta
ListadeDesejos
CartoFidelidade
Sobre(linkparasobre.html)
Contato

6. Dentrodomain,crieumadivcomclasse"caixadestaque"
7. Dentrodadiv,crieumaseocomclasse"busca"
8. Estrutureotexto"Busca"comottulodenvel2
9. Insiraumformulriocomumcampodotipobuscaeumcampotipoimagem,que
mostraaimagembusca.png
10. Crieumaseochamada"menudepartamentos"
11. Estruturaotexto"Departamentos"comottulodenvel2
12. Crieummenu(nav)eumalistanoordenada,cujositenspossuemlinkspara#:
BlusaseCamisas
Aquiinsiraumalistanoordenadacomitensqueserosubmenu:
o Mangacurta
o Mangacomprida
o Camisasocial
o Camisacasual
Calas
Saias
Vestidos
Sapatos

EscoladeComunicaoeDesignDigital
CursodeGraduaoDesignGrfico
HTML&CSS
AssessmentFinaldaDisciplina

BolsaseCarteiras
Acessrios
13. Fecheaseo"menudepartamentos"
14. Insiraaimagem"destaquehome.png"comaltetitle
15. Fecheadiv"caixadestaque".

FormatandoCSSdaestruturaanteriordoindex.htmlemestilos.css

Crieumareachamada"CSSparaindex.html"dentrodoestilos.css
/*CSSparaindex*/

Formatedaseguinteforma:

header:
positionrelative.

classesacola:
fundoimagem"sacola.png",semrepetio,posicionadonotopoeadireita
alinhamentodotextodireita
largurade140px
position:absolute
top:0
right:0

menuprincipal:
positionabsolute
bottom:0
right:0

menuprincipal:
formateomenunahorizontal
retireossublinhadosdoslinks
coloquemargeminternanositens
Formatelivrementeoslinks

Formateositenscomcoresdiferentesquandopassaromousesobreolink:a:hover

classebuscaeclassemenudepartamentos:
cordefundo:#dcdcdc
pesodafonte:negrito
fontetransformadaemmaisculo

EscoladeComunicaoeDesignDigital
CursodeGraduaoDesignGrfico
HTML&CSS
AssessmentFinaldaDisciplina

margemexternadireita:10px
largura:230px
flutuaresquerda

classemenudepartamentos:
Limpar(clear)oefeitodaflutuaodabusca
margemsuperiorexterna:10px
margeminferiorinterna:10px

titulodebusca,buscaformetitulomenudepartamentos:
margemexterna:10px

classebusca
bordaarredondadasuperioresquerda:10px
bordaarredondadasuperiordireita:10px

classebuscacampoinput:alinhamentovertical:middle

classebuscacampoinput[type='search']:
largura:170px
altura:25px
bordaarredondada:10px

classedestaque:margemsuperior:10px

itemdelistaclassemenudepartamentos(.menudepartamentosli)
cordefundo:branco
margeminferior:1px
margeminterna:5px10px

linkdemenudepartamentos(.menudepartamentosa):
corcinzaeretirarsublinhado.

Agoravocdeveocultarosubmenudalista"BlusaseCamisas":
.menudepartamentosliul:display:none

Emostrarapenasquandopassaromousesobreitem"BlusaseCamisas"

EscoladeComunicaoeDesignDigital
CursodeGraduaoDesignGrfico
HTML&CSS
AssessmentFinaldaDisciplina

.menudepartamentosli:hoverul:display:block

Alteraracordefundodositensdosubmenu:
.menudepartamentosululli:backgroundcolor:#dcdcdc


Paraajudaradiferenciaroslinksdossubmenus,
queremoscolocarumtraonafrente.Poderamos
alteraroHTMLcolocandoostraosalgovisuale
nosemntico,oupodemosgeraressetraovia
CSScompseudoelementos.
Useo:beforeparainjetarumcontedonovovia
propriedadecontentnoCSS:
.menudepartamentoslilia:before>content:''

Apropriedadecontenttemmuitasvariaes.
Umavariaosimples,mastil,usarcaracteres
unicodeparainjetarsmbolosmaisinteressantes.



Testeoutrasopescomo:
.menu-departamentos li li a:before {
content: '\272A';
padding-right: 3px;
}

Reparequeusamostambmapropriedadeopacityparadeixaresseelementomais
transparenteesutil.
MaisopesdoUnicode:ConsulteemumatabelaUnicodeoutroscaractereseseu
cdigohexcorrespondente.
http://www.alanwood.net/unicode/dingbats.html


EscoladeComunicaoeDesignDigital
CursodeGraduaoDesignGrfico
HTML&CSS
AssessmentFinaldaDisciplina

1.1EstruturandoospainisNOVIDADESeMAISVENDIDOS

Vamoscriaragoranossopaineldenovidades.

Crieumelemento"div"paraconterosdoispainisdeprodutos.Eledeverecebera
classecaixa,parasealinharaomeiodatela,eaclassepaineisqueusaremosdepoisno
CSS.

Dentrodadivcriadaacima,criaremosumanovaseoparacadapainel.Aprimeira,
receberasclasses"painelnovidades".Elaconterottuloemnvel2eumalista
ordenadadeprodutos.

Cadaprodutodeveserrepresentadocomoumitemnalistaecomumlinkparao
produtoesuaimagem(representadoporfigure,figcaptioneimg).

EscoladeComunicaoeDesignDigital
CursodeGraduaoDesignGrfico
HTML&CSS
AssessmentFinaldaDisciplina

Exemplocomumproduto,quedeveserincludodentrodasectionquevocacabou
decriar:
<section class="painel novidades">
<h2>Novidades</h2>
<ol>
<!-- primeiro produto -->
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura1.png">
<figcaption>Descrio com preo</figcaption>
</figure>
</a>
</li>
<!-- coloque mais produtos aqui! -->
</ol>
</section>

CrieoHTMLdessepaineleopreenchacomvriosprodutos(6umbomnmero).
Lembresedequecadaprodutoestnasuaprpria<li>comlinkeimagemprprios.
Napastaimg/produtosdoseuprojeto,vocencontravriasimagensminiaturaX.png
quepodemserusadasparacriarprodutosdiferentes.

Crieumsegundopainel,pararepresentarosprodutosmaisvendidos.Essepaineldeve
ficarapsofechamentodopainelanterior,masaindadentrodadivpaineis.
Onovopaineldevereceberasclasses"painelmaisvendidos".Suaestruturaidntica
aoanterior(dica:copieocdigoparaevitarrefazertudodenovo).
Exemplo:
<section class="painel mais-vendidos">
<h2>Mais Vendidos</h2>
<ol>
<!-- coloque vrios produtos aqui -->
</ol>
</section>

Recapitulandoessapartedospainis,aestruturadeveestarassim:
div:caixapaineis
section:painelnovidades
h2:ttuloNovidades
ol:listadeprodutos
vriosliscomprodutos(elinkseimagensdentrodecadaum)
section:painelmaisvendidos
h2:ttuloMaisVendidos

EscoladeComunicaoeDesignDigital
CursodeGraduaoDesignGrfico
HTML&CSS
AssessmentFinaldaDisciplina

ol:listadeprodutos
vriosliscomprodutos(elinkseimagensdentrodecadaum)

1.2Formatandoospainis.

NoCSSvamosposicionarnossospainisparaficaremdeacordocomodesign.
Opaineldenovidadesdeveflutuaresquerdaeomaisvendidos,direita.Cadaum
deveocupar445px(poucomenosdametadedos940px),assimumficaraoladodo
outro:

classepainel
margemsuperioreinferior:10px;
margensinternas:10px
largura:445px
coloquebordaarredondada
coloquesombranacaixa

ttulodenivel2dopainel
Faaasombrabrancacom80%deopacidade,comcanalAlphaparatranslucncia
usandoasintaxedoRGBA:
.painelh2:before{
content:'\2756';
paddingright:5px;
opacity:0.4;
}

classenovidades:
flutuaresquerda
cordefundo#f5dcdc
cordefundolineargradient(#f5dcdc,#bebef4)
sombrainterna

classemaisvendidos:
flutuaradireita
cordefundo#dcdcf5

EscoladeComunicaoeDesignDigital
CursodeGraduaoDesignGrfico
HTML&CSS
AssessmentFinaldaDisciplina

cordefundolineargradient(#dcdcf5,#f4bebe)
sombrainterna

Prximopasso:ositensdosprodutosdentrodalistadecadapainel.Queremosque
sejamdispostosladoaladomascomcertotamanhoeespaamentoparaalinhamento.
Conseguimosissocolocandodisplay:inlineblocknoselementosdalistae,alinhandoos
produtospelotoponavertical.

itensdopainel:
display:inlineblock
alinhamentovertical:top
largura:140px
margemexterna:2px
margeminternainferior:10px
transio0.7scomeaseout

Aopassaromousesobreositensdopainel(.painelli:hover):
sombranacaixa
Fundobrancocomopacidadede0.8
Darzoomcomtransformcomscale(1.2)erotate(5deg)
transio0.7scomeasein

Oposicionamentoemsideveestarcerto.Masfaltaumasregrasparaestilo,como
tamanhodosttulosecoresdetextoefundo.

ttulodenvel2daclassepainel
tamdafonte:1.2em
fontenegrito
textotransfomdoemmaisculas
margeminferior:10px

linksdaclassepainela(.painela)
cor:#333
alinhamentodotextocentralizado
retirasublinhadodoslinks

ComoatagfigureestherdandooCSSanteriormentecriado,precisoresetar:
.painelfigure,.painelfigcaption
margeminterna:0
margemexterna:0


EscoladeComunicaoeDesignDigital
CursodeGraduaoDesignGrfico
HTML&CSS
AssessmentFinaldaDisciplina

Parte3:Estruturadocontato.html

1. Crieumnovoarquivocontato.htmlcomamesmaestruturabsicados
arquivosindexesobreeomesmocontedonocabealhoerodap.
2. Dentrodemain,crieumasectioncomidcontato
3. Dentrodasection,umttulodenvel2:Entreemcontato
4. Insiraumformulriocomosseguintesrtulos(labels)ecampos:
Nome:(campodotipotexto)
Email:(campodotipoemail)
Motivo:(menuselectcomopesSugesto/Crtica/Elogio/Outros)
Comentrios:(caixadetexto)
BotoEnviar
5. UtilizeosnovosatributosdoHTML5parainserirtextodeorientao
Cursorsobreprimeirocampo
Validarsetodososcamposforampreenchidos
Definirpadro(pattern)depreenchimento(nomeeemail)
6. FormateoformulriodecontatocomCSS.

Parte4:Estruturadocartao_fidelidade.html

7. Crieumnovoarquivocartao_fidelidade.htmlcomamesmaestruturabsica
dosarquivosindexesobreeomesmocontedonocabealhoerodap.
8. Crieumasectioncomidfidelidade
9. Crieumttulodenvel2comtextoCartodeFidelidade
10. Insiraumatabelanoarquivocomduascolunas,contendonaprimeiracolunaos
ttulosenasegundacolunadostextos,conformeoarquivodetexto
cartao_fidelidade.txt.
11. FormateatabelacomCSS,comformataolivre.

Parte5:ConfigurandoMetatags:
Configureaspginascomasprincipaismetatags,queauxiliemnaindexaodosite
nasprincipaisferramentasdebusca


EscoladeComunicaoeDesignDigital
CursodeGraduaoDesignGrfico
HTML&CSS
AssessmentFinaldaDisciplina

Parte6:DesenvolvendooDesignresponsivo

CrieumCSSdiferenteparaavisualizaoemsmpartphoneseoutroparatablet.
Utilizeviewportemediaqueries,paramaxwidth:320pxemaxwidth:480px.

CrieumarquivoTXTeenviejuntocomositerespondendoasseguintesquestes:

1) Quandorecomendandoacriaodeumsiteseparadoparamobile?Seria
esteocasodestesitedaGKFashion?
2) NocasodeumCSSespecficoparaprint,comoeledeveserinserido?

Parte7:MultimdianaWebcomHTML5eCSS3

1) Oelementoaudiopermitecomoelementofilhooelementosource.Quaisso
osatributosqueosourcepermiteequalcontedoelessuportam?Quaisos
outrosatributosdoelementoaudioequandodevemserutilizados?
2) Oelementovideopermitecomoelementofilhooelementosource.Quaisso
osatributosqueosourcepermiteequalcontedoelessuportam?Quaisos
outrosatributosdoelementovideoequandodevemserutilizados?
3) Nocasodocanvas,HTML5nunca,emmomentoalgum,fezqualquer
animao.IssoporquoHTML5umasimpleslinguagemdemarcao.Dessa
forma,oquenecessrioparacriaranimaescomHTML5?OquesoAPIsdo
HTML5?
4) ComooCSS3podeseraplicadonaaparnciadamultimdiaHTML5.
Demonstrecomumexemplo.