Aula 3. frameworks front end

Frameworks Front-endFrameworks para Desenvolvimento WebProf. MSc. André Costa - [email protected]

SUMÁRIO• DesigndeInterfaceparaWeb• User Interface(UI)eUser Experience(UX)• FrameworksCSSparaFront-end• Bootstrap• AtividadePrática

FrameworksparaDesenvolvimentoWeb– Porf.MSc.AndréCosta

DesigndeInterfaceparaWebOqueé?

• Odesigndeinterfaceéorecursoque conduzainteração doserhumanocomumprodutofísicoouvirtual.Ainterfacevariadeumbrinquedo,aparelhoeletrodoméstico,atéumaplicativoparasmartphoneouumapáginanaweb.

• Naprática,odesigndeinterfacedizrespeitoàparte visual,àusabilidade,arquiteturadainformação,navegação,transiçãodetelas.Ouseja,todososrecursosqueincrementamemelhoramaformacomoousuáriolidacomoproduto.

• Tudodeveserconstruídoemvirtudeda satisfaçãodoelementohumano!


DesigndeInterfaceparaWebQualaimportância?

• Éoprincipalmeiodecomunicaçãoentreosoftware/dispositivoeousuário.Temquetornaroprodutoatraente.

• Umainterfacemalprojetadapodeproporcionarumamáexperiência,oqueacarretanegativamentenafunçãodosoftware,eclaro,setornaumaexperiênciacomplicadaefrustrante.

• Quandobemconstruída,ainterfacegaranteaoutilizadorqueelepossarealizartodasasaçõesetarefasdeformasimpleseeficiente.


DesigndeInterfaceparaWebQualaimportância?

• Ignoraraimportânciadodesigndeinterfacepodesero fatordecisivo narejeiçãodeumaaplicação.


DesigndeInterfaceparaWebImpactonume-commerce

• Agrandemaioriadas decisõesdecompra passapeloperíododecogitação,quefrequentementeseiniciacompesquisasnainternet.

• Umdesigndeinterfacebemprogramadofacilitaabuscadeinformaçõeseprodutosnositeeéresponsávelpelo caminhodousuárioatécompra.

• Quandousuáriosnavegamnapáginaporpoucotempopodemimpactaro posicionamentodeumsitenoGoogle.


DesigndeInterfaceparaWebResponsividade

• Construirsitesqueseadaptem aosdiversostiposdedispositivos.

• Googlepassaráaconsiderararesponsividade paraseuranqueamento.


DesigndeInterfaceparaWebUsabilidade

• Facilidadedeutilizaçãodousuário

1. Aprendizagem(Éintuitivo?)2. Eficiência(Fazoqueseespera?)3. Memorização(Fácildelembrarcomoutilizar?4. Robustez(Funcionasemerros?)5. Satisfação(causaboaexperiência?)


DesigndeInterfaceparaWebAcessibilidade

• Estardisponívelparatodos

• Mitigarbarreirasparapessoascomnecessidadesespeciais• Visual• Audição• Motora• Cognitiva


DesigndeInterfaceparaWebDesignerdeInterface

• O DesignerdeInterfaceénecessárioparamanterefidelizarusuáriosquenaveguemnossites,aplicativosesistemasdeumaempresa.Eleatuanaconstruçãodacredibilidadeatéaoconvencimentodacompra.

• Asatividadesdeumespecialistanaáreaincluemolevantamentodeinformaçõessobreoprojeto,alocalizaçãodasmesmasnainterfaceeaformadeinteraçãocomousuário.


User Interface(UI)eUser Experience(UX)User Interface(UI)

O User Interface – ouinterfacedousuário– étudoaquiloqueéperceptívelvisualmenteemalgumaplataformaelevaousuárioaumainteraçãopositiva. Podeserumbotão,ummenudiferenteouatémesmoumsom.


User Interface(UI)eUser Experience(UX)




User Interface(UI)eUser Experience(UX)User Experience(UX)

O User ExperienceDesign– oudesigndaexperiênciadousuário– sepreocupacomopontodecontatodeumproduto/serviço,comaspessoas.Esteproduto/serviçopodeserumwebsite,umaplicativo,umamáquina,umdispositivomóvel,pontodevenda,entreoutrasplataformasdeinteração.

UXDesignéaciênciaquepensaexclusivamentenarelaçãodeumprodutocomousuário,buscandotorná-lamaisnaturalesimples.






User Interface(UI)eUser Experience(UX)MobileFirst

MobileFirst éumconceitoaplicadoemprojetoswebondeofocoinicialdaarquiteturaedesenvolvimentoédirecionadoaosdispositivosmóveiseemseguidaparaosdesktops.


FrameworkCSSparaFront-endOqueé?

• Conjuntodebibliotecaspré-preparadasparafacilitarodesenvolvimentodeinterfacedesitesesistemasweb.

• EstabeleceumconjuntodeclassesemCSS

• EstruturaemGrids(Responsividade)

• Tipografia


FrameworkCSSparaFront-endVantagens

• Documentaçãodetalhada• Layoutresponsivos• Seaplicadesdesitesasistemas• Padronização• CrossBrowser


FrameworkCSSparaFront-endDesvantagens

• Projetoscomaparênciaparecida

• Engessadoaopadrãodoframework


FrameworkCSSparaFront-endMaterialize(materializecss.com)


FrameworkCSSparaFront-endFoundation(foundation.zurb.com)


FrameworkCSSparaFront-endSemantic UI(semantic-ui.com)


FrameworkCSSparaFront-endBootstrap (getbootstrap.com)


BootstrapEstruturadosArquivos


BootstrapDocumentoBase(usandoCDN)


BootstrapTemplateBase


BootstrapEntendendosuaMetaTags eDoctype


BootstrapTemplates (startbootstrap.com)


BootstrapContainer


BootstrapGrids


BootstrapGrids


BootstrapGrids


BootstrapGrids


BootstrapResponsividade








BootstrapNavbar


BootstrapTabelas


BootstrapFormularios


BootstrapBotões


BootstrapModal


BootstrapCard


AtividadePráticaDescriçãodotrabalhoemsala..


Prof. MSc. André [email protected]

Technology

Aula 3. frameworks front end