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

Curso de PHP Básico ao Avançado
Curso de PHP Básico ao AvançadoCurso de PHP Básico ao Avançado
Curso de PHP Básico ao AvançadoLuiz Junior
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSSledsifes
 
Curso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptCurso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptPablo Sanches
 
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
 
Engenharia dos cargos de UI, UX, PM
Engenharia dos cargos de UI, UX, PMEngenharia dos cargos de UI, UX, PM
Engenharia dos cargos de UI, UX, PMMarcello Cardoso
 
Aula 1. apresentação + frameworks
Aula 1. apresentação + frameworksAula 1. apresentação + frameworks
Aula 1. apresentação + frameworksandreluizlc
 
UX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOSUX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOSDiego Moraes
 
web development.pptx
web development.pptxweb development.pptx
web development.pptxMohdArbazraza
 
Introdução à Arquitetura de Informação
Introdução à Arquitetura de InformaçãoIntrodução à Arquitetura de Informação
Introdução à Arquitetura de InformaçãoInstituto Faber-Ludens
 
UX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do UsuárioUX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do UsuárioRenato Melo
 
Prototipação de software
Prototipação de softwarePrototipação de software
Prototipação de softwareMarcio Costa
 
Conceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidadeConceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidadeNécio de Lima Veras
 
Introdução ao Desenvolvimento Android
Introdução ao Desenvolvimento AndroidIntrodução ao Desenvolvimento Android
Introdução ao Desenvolvimento AndroidJosé Alexandre Macedo
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01 Léo Dias
 
Aula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHPAula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHPDaniel Brandão
 

Mais procurados (20)

Curso de PHP Básico ao Avançado
Curso de PHP Básico ao AvançadoCurso de PHP Básico ao Avançado
Curso de PHP Básico ao Avançado
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
 
Curso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptCurso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScript
 
Aula01-JavaScript
Aula01-JavaScriptAula01-JavaScript
Aula01-JavaScript
 
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?
 
Engenharia dos cargos de UI, UX, PM
Engenharia dos cargos de UI, UX, PMEngenharia dos cargos de UI, UX, PM
Engenharia dos cargos de UI, UX, PM
 
Introdução CSS
Introdução CSSIntrodução CSS
Introdução CSS
 
Aula 1. apresentação + frameworks
Aula 1. apresentação + frameworksAula 1. apresentação + frameworks
Aula 1. apresentação + frameworks
 
UX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOSUX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOS
 
web development.pptx
web development.pptxweb development.pptx
web development.pptx
 
Introdução à Arquitetura de Informação
Introdução à Arquitetura de InformaçãoIntrodução à Arquitetura de Informação
Introdução à Arquitetura de Informação
 
UX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do UsuárioUX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do Usuário
 
Programacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de EnsinodocProgramacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de Ensinodoc
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
 
Prototipação de software
Prototipação de softwarePrototipação de software
Prototipação de software
 
Conceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidadeConceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidade
 
Introdução ao Desenvolvimento Android
Introdução ao Desenvolvimento AndroidIntrodução ao Desenvolvimento Android
Introdução ao Desenvolvimento Android
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 
Aula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHPAula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHP
 
MVC
MVCMVC
MVC
 

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.pptxGelvazioCamargo
 
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
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento webRodrigo Rodrigues
 
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
 
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
 
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
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
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
 

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
 
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 (19)

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
 
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.