SlideShare uma empresa Scribd logo
1 de 12
Baixar para ler offline
Front-End
Profissão Front-End
Front-End
O que é front-end?
Front-end é a parte visível do site é a montagem do layout em estruturas
compatíveis para o uso em browsers (programa de navegação da internet
como o Firefox, Chrome, Internet Explorer, etc), tornando sua interface inte-
rativa com o usuário através de clique, campos de textos ou toque na tela.
Também é responsável pelo comportamento do site em diversos nave-
gadores e plataformas como desktop, notebooks, tablets e celulares.
Front-End
- - - - - - - - - - - -
O que o profissional front-end faz?
O profissional front-end é quem dá vida ao layout (no formato
de imagem), para códigos que serão interpretados por nave-
gadores, tornando interativo e usual. Também é responsável
pela otimização das interfaces e:
- Assegurar compatibilidade em vários navegadores;
- Produzir código limpo, bem documentado e estruturado;
- Criar páginas web rápidas;
- Seguir os padrões e tendências da web;
- Aplicar técnicas de SEO (Search Engine Optimization),
otimização de busca.
Front-End
- - - - - - - - - - - -
Principais ferramentas e tecnologias
usadas pelo front-end
As principais ferramentas usadas pelo front-end são programas editores
de códigos e textos, estes são alguns dos programas que facilitam a edi-
ção de texto: Dreamweaver, Notepad++, Sublime entre outros.
As principais tecnologias são: HTML, CSS e JavaScript sendo que existem
muitos profissionais front-end que não fazem o uso do JavaScript, apenas
formata o site preparado-o para a programação.
Front-End
< HTML >
O que é HTML?
É a abreviatura de HyperText Markup Language, que significa
Linguagem de Marcação de Hipertexto. São códigos marcado-
res que dizem ao navegador como deve ser apresentado. É a
arquitetura e o corpo da aplicação.
No HTML encontramos tags como: div, table, form entre outras,
para que o CSS e a programação seja aplicada conforme está
estruturado.
Front-End
HTML - Modo de visualização
Front-End
- - - - - - - - - - - -
{ CSS }
O que é CSS?
Cascading Style Sheets que significa Folhas de Estilo em Cas-
cata. São códigos de estilização usados na parte visual do
site como: cores, formas, fontes, botões, campos de textos
entre outras.
O CSS lê as marcações do HTML e altera a forma de exibição
do conteúdo apresentado no navegador.
Front-End
CSS - Modo de visualização
Front-End
( JavaScript )
O que é JavaScript?
Trata-se de uma linguagem de programação do lado do cliente
(client-side), e interage com o usuário sem a necessidade deste script
passar pelo servidor.
Com Javascript podemos criar efeitos especiais nas páginas e definir
interatividades com o usuário. Tem como as principais ações: efeitos
dinâmicos e ações interativas.
Front-End
JavaScript - Modo de visualização
Front-End
Modelo conceitual das etapas do front-end
HTML = Marcação CSS = Estilo JavaScript = Comportamento
Front-End
Marconi A. Pacheco
Bacharel em Design - FUCAPI - AM.
Coordenação de Graduação em Design de Interface Digital.
Experiência Profissional:
Desenvolvimento em projetos web sites, arquitetura de informação,
wireframes, layouts e front-end.
Projetos gráficos e comunicação visual para mídias impressas de
pequeno e grande formato.

Mais conteúdo relacionado

Mais procurados

Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)admecindia1
 
Aula 1. apresentação + frameworks
Aula 1. apresentação + frameworksAula 1. apresentação + frameworks
Aula 1. apresentação + frameworksandreluizlc
 
html, css e java script - renato araujo
html, css e java script - renato araujohtml, css e java script - renato araujo
html, css e java script - renato araujoorenatoaraujo
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSSledsifes
 
Web Development In 2018
Web Development In 2018Web Development In 2018
Web Development In 2018Traversy Media
 
Curso Java Básico - Aula 01
Curso Java Básico - Aula 01Curso Java Básico - Aula 01
Curso Java Básico - Aula 01Natanael Fonseca
 
Use Node.js to create a REST API
Use Node.js to create a REST APIUse Node.js to create a REST API
Use Node.js to create a REST APIFabien Vauchelles
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a InternetLeonardo Soares
 
Murach: An introduction to web programming with ASP.NET Core MVC
Murach: An introduction to web programming with ASP.NET Core MVCMurach: An introduction to web programming with ASP.NET Core MVC
Murach: An introduction to web programming with ASP.NET Core MVCMahmoudOHassouna
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento WebSérgio Souza Costa
 
Documentação de Arquitetura de Software Aplicando o C4 Model
Documentação de Arquitetura  de Software Aplicando o C4 ModelDocumentação de Arquitetura  de Software Aplicando o C4 Model
Documentação de Arquitetura de Software Aplicando o C4 ModelDouglas Alonso
 
Aula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoAula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoJessyka Lage
 

Mais procurados (20)

Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
 
Aula 1. apresentação + frameworks
Aula 1. apresentação + frameworksAula 1. apresentação + frameworks
Aula 1. apresentação + frameworks
 
html, css e java script - renato araujo
html, css e java script - renato araujohtml, css e java script - renato araujo
html, css e java script - renato araujo
 
Introdução APIs RESTful
Introdução APIs RESTfulIntrodução APIs RESTful
Introdução APIs RESTful
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
 
Aula02 - JavaScript
Aula02 - JavaScriptAula02 - JavaScript
Aula02 - JavaScript
 
Introdução CSS
Introdução CSSIntrodução CSS
Introdução CSS
 
Web Designing
Web Designing Web Designing
Web Designing
 
Web Development In 2018
Web Development In 2018Web Development In 2018
Web Development In 2018
 
Curso Java Básico - Aula 01
Curso Java Básico - Aula 01Curso Java Básico - Aula 01
Curso Java Básico - Aula 01
 
Use Node.js to create a REST API
Use Node.js to create a REST APIUse Node.js to create a REST API
Use Node.js to create a REST API
 
Backend Programming
Backend ProgrammingBackend Programming
Backend Programming
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
 
An Overview on Nuxt.js
An Overview on Nuxt.jsAn Overview on Nuxt.js
An Overview on Nuxt.js
 
Murach: An introduction to web programming with ASP.NET Core MVC
Murach: An introduction to web programming with ASP.NET Core MVCMurach: An introduction to web programming with ASP.NET Core MVC
Murach: An introduction to web programming with ASP.NET Core MVC
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
 
Documentação de Arquitetura de Software Aplicando o C4 Model
Documentação de Arquitetura  de Software Aplicando o C4 ModelDocumentação de Arquitetura  de Software Aplicando o C4 Model
Documentação de Arquitetura de Software Aplicando o C4 Model
 
Aula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoAula 01 - JavaScript: Introdução
Aula 01 - JavaScript: Introdução
 

Semelhante a Profissão Front-end

Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptxBack-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptxSENAC SC
 
Web design e Programação front-end
Web design e Programação front-endWeb design e Programação front-end
Web design e Programação front-endAnderson Luís Furlan
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxLuiz Antonio
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sitesthiagolima
 
Desenvolvimento web com software livre
Desenvolvimento web com software livreDesenvolvimento web com software livre
Desenvolvimento web com software livreRuan Carvalho
 
Desenvolvimento web com Software Livre
Desenvolvimento web com Software LivreDesenvolvimento web com Software Livre
Desenvolvimento web com Software LivreRuan Carvalho
 
TDC2016POA | Trilha Arquetetura - Revitalizando aplicações desktop usando Ce...
TDC2016POA | Trilha Arquetetura -  Revitalizando aplicações desktop usando Ce...TDC2016POA | Trilha Arquetetura -  Revitalizando aplicações desktop usando Ce...
TDC2016POA | Trilha Arquetetura - Revitalizando aplicações desktop usando Ce...tdc-globalcode
 
TDC2016SP Trilha Arquitetura.NET - Revitalizando aplicações desktop usando C...
TDC2016SP  Trilha Arquitetura.NET - Revitalizando aplicações desktop usando C...TDC2016SP  Trilha Arquitetura.NET - Revitalizando aplicações desktop usando C...
TDC2016SP Trilha Arquitetura.NET - Revitalizando aplicações desktop usando C...Marcelo Palladino
 
Responsive web design_CPRecife2 - Felipe de Albuquerque
Responsive web design_CPRecife2 -  Felipe de AlbuquerqueResponsive web design_CPRecife2 -  Felipe de Albuquerque
Responsive web design_CPRecife2 - Felipe de AlbuquerqueFelipe de Albuquerque
 
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor FranciosneyRevisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosneyfranciosney
 
Fundamentos do asp.net
Fundamentos do asp.netFundamentos do asp.net
Fundamentos do asp.netleojr_0
 
Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1michellobo
 
DHTML - Dynamic HyperText Markup Language
DHTML - Dynamic HyperText Markup LanguageDHTML - Dynamic HyperText Markup Language
DHTML - Dynamic HyperText Markup LanguageDenilson Sousa
 

Semelhante a Profissão Front-end (20)

Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptxBack-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
 
Web design e Programação front-end
Web design e Programação front-endWeb design e Programação front-end
Web design e Programação front-end
 
XHTML e CSS
XHTML e CSSXHTML e CSS
XHTML e CSS
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Desenvolvimento web com software livre
Desenvolvimento web com software livreDesenvolvimento web com software livre
Desenvolvimento web com software livre
 
Desenvolvimento web com Software Livre
Desenvolvimento web com Software LivreDesenvolvimento web com Software Livre
Desenvolvimento web com Software Livre
 
Ap iii
Ap iiiAp iii
Ap iii
 
TDC2016POA | Trilha Arquetetura - Revitalizando aplicações desktop usando Ce...
TDC2016POA | Trilha Arquetetura -  Revitalizando aplicações desktop usando Ce...TDC2016POA | Trilha Arquetetura -  Revitalizando aplicações desktop usando Ce...
TDC2016POA | Trilha Arquetetura - Revitalizando aplicações desktop usando Ce...
 
TDC2016SP Trilha Arquitetura.NET - Revitalizando aplicações desktop usando C...
TDC2016SP  Trilha Arquitetura.NET - Revitalizando aplicações desktop usando C...TDC2016SP  Trilha Arquitetura.NET - Revitalizando aplicações desktop usando C...
TDC2016SP Trilha Arquitetura.NET - Revitalizando aplicações desktop usando C...
 
Responsive web design_CPRecife2 - Felipe de Albuquerque
Responsive web design_CPRecife2 -  Felipe de AlbuquerqueResponsive web design_CPRecife2 -  Felipe de Albuquerque
Responsive web design_CPRecife2 - Felipe de Albuquerque
 
Tcc
TccTcc
Tcc
 
Cv alexandre rezendedecastro
Cv alexandre rezendedecastroCv alexandre rezendedecastro
Cv alexandre rezendedecastro
 
Modulo3_Aula_1-2.ppt
Modulo3_Aula_1-2.pptModulo3_Aula_1-2.ppt
Modulo3_Aula_1-2.ppt
 
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor FranciosneyRevisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
 
Fundamentos do asp.net
Fundamentos do asp.netFundamentos do asp.net
Fundamentos do asp.net
 
Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1
 
DHTML - Dynamic HyperText Markup Language
DHTML - Dynamic HyperText Markup LanguageDHTML - Dynamic HyperText Markup Language
DHTML - Dynamic HyperText Markup Language
 
Professor rogerio-apostila
Professor rogerio-apostilaProfessor rogerio-apostila
Professor rogerio-apostila
 
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
 

Mais de Marconi Pacheco

Teste de Usabilidade Como planejar e executar
Teste de Usabilidade Como planejar e executarTeste de Usabilidade Como planejar e executar
Teste de Usabilidade Como planejar e executarMarconi Pacheco
 
7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPressMarconi Pacheco
 
Apresentação TCC - Marconi Pacheco 2010
Apresentação TCC - Marconi Pacheco 2010Apresentação TCC - Marconi Pacheco 2010
Apresentação TCC - Marconi Pacheco 2010Marconi Pacheco
 
Maturidade UX nas Empresas
Maturidade UX nas EmpresasMaturidade UX nas Empresas
Maturidade UX nas EmpresasMarconi Pacheco
 
Bootstrap praticas mais usadas
Bootstrap praticas mais usadas Bootstrap praticas mais usadas
Bootstrap praticas mais usadas Marconi Pacheco
 
UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?Marconi Pacheco
 
A obra do espirito santo na igreja
A obra do espirito santo na igrejaA obra do espirito santo na igreja
A obra do espirito santo na igrejaMarconi Pacheco
 
Simplificando o design digital
Simplificando o design digitalSimplificando o design digital
Simplificando o design digitalMarconi Pacheco
 
Qual a importância de ir à igreja
Qual a importância de ir à igrejaQual a importância de ir à igreja
Qual a importância de ir à igrejaMarconi Pacheco
 
Design Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalDesign Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalMarconi Pacheco
 
Evolução do design digital
Evolução do design digitalEvolução do design digital
Evolução do design digitalMarconi Pacheco
 
Profissão Desenhista / Ilustrador
Profissão Desenhista / IlustradorProfissão Desenhista / Ilustrador
Profissão Desenhista / IlustradorMarconi Pacheco
 
Apresentando SEO Otimização de Sites
Apresentando SEO Otimização de SitesApresentando SEO Otimização de Sites
Apresentando SEO Otimização de SitesMarconi Pacheco
 
Usabilidade para Websites
Usabilidade para WebsitesUsabilidade para Websites
Usabilidade para WebsitesMarconi Pacheco
 
Arquitetura de informação para Interface Digital
Arquitetura de informação para Interface DigitalArquitetura de informação para Interface Digital
Arquitetura de informação para Interface DigitalMarconi Pacheco
 
Site responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagensSite responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagensMarconi Pacheco
 
Restaurando a Qualidade de Vida - Filipenses 4:4-8
Restaurando a Qualidade de Vida - Filipenses 4:4-8Restaurando a Qualidade de Vida - Filipenses 4:4-8
Restaurando a Qualidade de Vida - Filipenses 4:4-8Marconi Pacheco
 
O Poder da Língua - Tiago 3.1-12
O Poder da Língua - Tiago 3.1-12O Poder da Língua - Tiago 3.1-12
O Poder da Língua - Tiago 3.1-12Marconi Pacheco
 
Web Designer - Principais Conhecimentos Principais Funções
Web Designer - Principais Conhecimentos Principais FunçõesWeb Designer - Principais Conhecimentos Principais Funções
Web Designer - Principais Conhecimentos Principais FunçõesMarconi Pacheco
 

Mais de Marconi Pacheco (20)

Teste de Usabilidade Como planejar e executar
Teste de Usabilidade Como planejar e executarTeste de Usabilidade Como planejar e executar
Teste de Usabilidade Como planejar e executar
 
7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress
 
Apresentação TCC - Marconi Pacheco 2010
Apresentação TCC - Marconi Pacheco 2010Apresentação TCC - Marconi Pacheco 2010
Apresentação TCC - Marconi Pacheco 2010
 
Maturidade UX nas Empresas
Maturidade UX nas EmpresasMaturidade UX nas Empresas
Maturidade UX nas Empresas
 
style guide ui
style guide uistyle guide ui
style guide ui
 
Bootstrap praticas mais usadas
Bootstrap praticas mais usadas Bootstrap praticas mais usadas
Bootstrap praticas mais usadas
 
UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?
 
A obra do espirito santo na igreja
A obra do espirito santo na igrejaA obra do espirito santo na igreja
A obra do espirito santo na igreja
 
Simplificando o design digital
Simplificando o design digitalSimplificando o design digital
Simplificando o design digital
 
Qual a importância de ir à igreja
Qual a importância de ir à igrejaQual a importância de ir à igreja
Qual a importância de ir à igreja
 
Design Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalDesign Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface Digital
 
Evolução do design digital
Evolução do design digitalEvolução do design digital
Evolução do design digital
 
Profissão Desenhista / Ilustrador
Profissão Desenhista / IlustradorProfissão Desenhista / Ilustrador
Profissão Desenhista / Ilustrador
 
Apresentando SEO Otimização de Sites
Apresentando SEO Otimização de SitesApresentando SEO Otimização de Sites
Apresentando SEO Otimização de Sites
 
Usabilidade para Websites
Usabilidade para WebsitesUsabilidade para Websites
Usabilidade para Websites
 
Arquitetura de informação para Interface Digital
Arquitetura de informação para Interface DigitalArquitetura de informação para Interface Digital
Arquitetura de informação para Interface Digital
 
Site responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagensSite responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagens
 
Restaurando a Qualidade de Vida - Filipenses 4:4-8
Restaurando a Qualidade de Vida - Filipenses 4:4-8Restaurando a Qualidade de Vida - Filipenses 4:4-8
Restaurando a Qualidade de Vida - Filipenses 4:4-8
 
O Poder da Língua - Tiago 3.1-12
O Poder da Língua - Tiago 3.1-12O Poder da Língua - Tiago 3.1-12
O Poder da Língua - Tiago 3.1-12
 
Web Designer - Principais Conhecimentos Principais Funções
Web Designer - Principais Conhecimentos Principais FunçõesWeb Designer - Principais Conhecimentos Principais Funções
Web Designer - Principais Conhecimentos Principais Funções
 

Profissão Front-end

  • 2. Front-End O que é front-end? Front-end é a parte visível do site é a montagem do layout em estruturas compatíveis para o uso em browsers (programa de navegação da internet como o Firefox, Chrome, Internet Explorer, etc), tornando sua interface inte- rativa com o usuário através de clique, campos de textos ou toque na tela. Também é responsável pelo comportamento do site em diversos nave- gadores e plataformas como desktop, notebooks, tablets e celulares.
  • 3. Front-End - - - - - - - - - - - - O que o profissional front-end faz? O profissional front-end é quem dá vida ao layout (no formato de imagem), para códigos que serão interpretados por nave- gadores, tornando interativo e usual. Também é responsável pela otimização das interfaces e: - Assegurar compatibilidade em vários navegadores; - Produzir código limpo, bem documentado e estruturado; - Criar páginas web rápidas; - Seguir os padrões e tendências da web; - Aplicar técnicas de SEO (Search Engine Optimization), otimização de busca.
  • 4. Front-End - - - - - - - - - - - - Principais ferramentas e tecnologias usadas pelo front-end As principais ferramentas usadas pelo front-end são programas editores de códigos e textos, estes são alguns dos programas que facilitam a edi- ção de texto: Dreamweaver, Notepad++, Sublime entre outros. As principais tecnologias são: HTML, CSS e JavaScript sendo que existem muitos profissionais front-end que não fazem o uso do JavaScript, apenas formata o site preparado-o para a programação.
  • 5. Front-End < HTML > O que é HTML? É a abreviatura de HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto. São códigos marcado- res que dizem ao navegador como deve ser apresentado. É a arquitetura e o corpo da aplicação. No HTML encontramos tags como: div, table, form entre outras, para que o CSS e a programação seja aplicada conforme está estruturado.
  • 6. Front-End HTML - Modo de visualização
  • 7. Front-End - - - - - - - - - - - - { CSS } O que é CSS? Cascading Style Sheets que significa Folhas de Estilo em Cas- cata. São códigos de estilização usados na parte visual do site como: cores, formas, fontes, botões, campos de textos entre outras. O CSS lê as marcações do HTML e altera a forma de exibição do conteúdo apresentado no navegador.
  • 8. Front-End CSS - Modo de visualização
  • 9. Front-End ( JavaScript ) O que é JavaScript? Trata-se de uma linguagem de programação do lado do cliente (client-side), e interage com o usuário sem a necessidade deste script passar pelo servidor. Com Javascript podemos criar efeitos especiais nas páginas e definir interatividades com o usuário. Tem como as principais ações: efeitos dinâmicos e ações interativas.
  • 10. Front-End JavaScript - Modo de visualização
  • 11. Front-End Modelo conceitual das etapas do front-end HTML = Marcação CSS = Estilo JavaScript = Comportamento
  • 12. Front-End Marconi A. Pacheco Bacharel em Design - FUCAPI - AM. Coordenação de Graduação em Design de Interface Digital. Experiência Profissional: Desenvolvimento em projetos web sites, arquitetura de informação, wireframes, layouts e front-end. Projetos gráficos e comunicação visual para mídias impressas de pequeno e grande formato.