SlideShare uma empresa Scribd logo
1 de 20
Introdução ao 
Front-end no 
Desenvolvimento 
Web 
Anderson Luís Furlan
Definição 
Front-end 
• O front-end é a interface, 
responsável por coletar a 
entrada em várias formas do 
usuário e processá-la para 
adequá-la a uma especificação 
em que o back-end possa 
utilizar.
Desenvolvimento Web 
Web-Design 
Back-end 
Front-end
Web-design 
Ferramentas Gráficas: 
Photoshop, Fireworks e Corel Draw
Front-end 
HTML, CSS e JavaScript
Back-end 
PHP, Java, Ruby, Pyhton, etc.
Front-end Web - Linguagens
Front-end Web - HTML 
É uma linguagem de marcação, utilizada como padrão na Internet 
responsável por definir a ESTRUTURA em uma página. Por meio dela se 
define, por exemplo, títulos, subtítulos, listas ordenadas, não ordenadas, 
blocos de códigos, links, etc. O HTML5 é a última versão da linguagem 
onde foram incluídos uma série de recursos de multimídia (áudio e vídeo), 
deixando-a também mais semântica.
Front-end Web - CSS 
É uma linguagem de folhas de estilo em cascata, do inglês Cascade Style 
Sheets, responsável por definir o ESTILO de uma página da Web. É o que 
define o layout de apresentação, as cores e todas as formas de 
apresentação de uma página, site ou sistema web. A versão 3 da linguagem 
CSS permite animações através de regras, sem a necessidade de 
programar em JavaScript ou plugins para tal.
Front-end Web - JavaScript 
Anteriormente era considerada uma linguagem de script, hoje é considerada 
uma linguagem de programação, sendo responsável pela AÇÃO em uma 
página da Web. JavaScript ou ECMAScript, realiza manipulações do DOM, 
animações, validação de formulários, em APIs do HTML5 e diversas outras 
funcionalidades no lado client (browser). Atualmente vem ganhando espaço 
no lado server.
Front-end Web - Tecnologias
Pré-processadores CSS 
Less e Sass são pré-processadores CSS, ou seja, inserem funções e 
variáveis na linguagem de estilo. Na verdade você “programa estilo” e, 
posteriormente, através de uma compilação ou interpretação, eles traduzem 
para CSS. O SASS é feito em Ruby e o Less, em JavaScript e tanto pode 
ser interpretado no navegador via JavaScript, como compilado via NodeJS 
ou Rhino, que são aplicações lado server em JavaScript.
Bibliotecas JavaScript 
Bibliotecas contém código e dados auxiliares, que provém serviços a 
programas independentes, o que permite o compartilhamento e a alteração 
de código e dados de forma modular. 
jQuery é uma biblioteca JavaScript cross-browser desenvolvida para 
simplificar os scripts client-side que interagem com o HTML. Torna mais 
simples a manipulação do DOM, de eventos e uso do AJAX. 
O AngularJS é do Google e uma das bibliotecas JS mais populares e 
inovadoras por ter “acabado” com a manipulação do DOM.
Frameworks Front-end 
Framework é uma abstração que une códigos comuns entre vários projetos 
de software provendo uma funcionalidade genérica. Os Frameworks 
Front-end provém funcionalidades como sistema de layout de grid, 
responsividade na web, cross-browsers, plug-ins entre outros recursos. No 
caso do Bootstrap e Foundation, os mais populares frameworks front-end, 
compreendem uma “compilação” de componentes CSS e JavaScript.
A importância do Front-end 
➔ O usuário valoriza cada vez mais a aparência do 
sistema, quanto mais agradável melhor. 
➔ Usabilidade é um fator chave para a popularização de 
um sistema, quanto mais fácil melhor. 
➔ Não adianta nada um sistema bem arquiteturado no 
back-end com a interface mal projetada 
➔ Interatividade é a chave
Vantagens do aprendizado Front-end 
➔ Aprende conceitos de web-design e usabilidade 
➔ Aprende sobre o negócio 
➔ É tendência cada vez mais entre empresas que 
desenvolvem para web, dividirem os desenvolvedores 
entre front-end e back-end. 
➔ Adquiri conhecimento aprofundado de JavaScript
Vantagens do aprendizado Front-end
Campo de Trabalho 
➔ Desenvovlimento de Sistemas 
➔ Agências de Publicidade e Propaganda 
➔ Freelancer 
➔ Sites e e-commerces
Obrigado! 
alsfurlan@gmail.com 
github.com/alsfurlan 
facebook.com/alsfurlan 
facebook.com/mendigoprogramador

Mais conteúdo relacionado

Mais procurados

01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação webCentro Paula Souza
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScriptCarlos Eduardo Kadu
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSSledsifes
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento WebSérgio Souza Costa
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlHTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlTiago Luiz Ribeiro da Silva
 
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
 
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignGustavo Zimmermann
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAndré Constantino da Silva
 
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
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfCesar Braz
 
Aula 1. apresentação + frameworks
Aula 1. apresentação + frameworksAula 1. apresentação + frameworks
Aula 1. apresentação + frameworksandreluizlc
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScriptBruno Catão
 
Aula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoAula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoJessyka Lage
 
Aula 3. frameworks front end
Aula 3. frameworks front endAula 3. frameworks front end
Aula 3. frameworks front endandreluizlc
 
Banco de Dados II Aula 01 - Apresentação
Banco de Dados II Aula 01 - ApresentaçãoBanco de Dados II Aula 01 - Apresentação
Banco de Dados II Aula 01 - ApresentaçãoLeinylson Fontinele
 

Mais procurados (20)

01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
 
Curso javascript básico
Curso javascript básicoCurso javascript básico
Curso javascript básico
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Html Básico
Html BásicoHtml Básico
Html Básico
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
 
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
 
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
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlHTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no html
 
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 ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
 
Plano de aula sobre HTML básico
Plano de aula sobre HTML básicoPlano de aula sobre HTML básico
Plano de aula sobre HTML básico
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
 
Aula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHPAula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHP
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
 
Aula 1. apresentação + frameworks
Aula 1. apresentação + frameworksAula 1. apresentação + frameworks
Aula 1. apresentação + frameworks
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScript
 
Aula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoAula 01 - JavaScript: Introdução
Aula 01 - JavaScript: Introdução
 
Aula 3. frameworks front end
Aula 3. frameworks front endAula 3. frameworks front end
Aula 3. frameworks front end
 
Banco de Dados II Aula 01 - Apresentação
Banco de Dados II Aula 01 - ApresentaçãoBanco de Dados II Aula 01 - Apresentação
Banco de Dados II Aula 01 - Apresentação
 

Destaque

Backbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosBackbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosHenrique Gogó
 
WPI – Pós Design de Interação IEC PUC Minas aula06
WPI – Pós Design de Interação IEC PUC Minas aula06WPI – Pós Design de Interação IEC PUC Minas aula06
WPI – Pós Design de Interação IEC PUC Minas aula06Leandro Alves
 
WPI – Pós Design de Interação IEC PUC Minas aula05
WPI – Pós Design de Interação IEC PUC Minas aula05WPI – Pós Design de Interação IEC PUC Minas aula05
WPI – Pós Design de Interação IEC PUC Minas aula05Leandro Alves
 
Front end, back end, full stack. onde vivem o que comem hoje na uni_granrio
Front end, back end, full stack.  onde vivem  o que comem   hoje na uni_granrioFront end, back end, full stack.  onde vivem  o que comem   hoje na uni_granrio
Front end, back end, full stack. onde vivem o que comem hoje na uni_granrioAnna Cruz
 
WPI – Pós Design de Interação IEC PUC Minas aula04
WPI – Pós Design de Interação IEC PUC Minas aula04WPI – Pós Design de Interação IEC PUC Minas aula04
WPI – Pós Design de Interação IEC PUC Minas aula04Leandro Alves
 
User Interface (UI) x User Experience (UX)
User Interface (UI) x User Experience (UX)User Interface (UI) x User Experience (UX)
User Interface (UI) x User Experience (UX)Gustavo Gobbi
 
Desenvolvimento de Games com Phaser
Desenvolvimento de Games com PhaserDesenvolvimento de Games com Phaser
Desenvolvimento de Games com Phaserleandroide
 
Interface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-endInterface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-endTalita Pagani
 
Processo de design digital
Processo de design digitalProcesso de design digital
Processo de design digitalMário Barros
 
Slides minicurso Web Design
Slides minicurso Web DesignSlides minicurso Web Design
Slides minicurso Web DesignAna Mendes
 
Simplificando o design digital
Simplificando o design digitalSimplificando o design digital
Simplificando o design digitalMarconi Pacheco
 
Agile UX: Projetando a User Experience no Mundo Ágil
Agile UX: Projetando a User Experience no Mundo ÁgilAgile UX: Projetando a User Experience no Mundo Ágil
Agile UX: Projetando a User Experience no Mundo ÁgilDiogo Riker
 
UI e UX no Material Design
UI e UX no Material DesignUI e UX no Material Design
UI e UX no Material DesignGustavo Gobbi
 

Destaque (20)

Aula 4 - HTML
Aula 4 - HTMLAula 4 - HTML
Aula 4 - HTML
 
WPI Aula 05
WPI Aula 05WPI Aula 05
WPI Aula 05
 
Backbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosBackbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectados
 
Hack2B Startups - UX?
Hack2B Startups - UX?Hack2B Startups - UX?
Hack2B Startups - UX?
 
WPI – Pós Design de Interação IEC PUC Minas aula06
WPI – Pós Design de Interação IEC PUC Minas aula06WPI – Pós Design de Interação IEC PUC Minas aula06
WPI – Pós Design de Interação IEC PUC Minas aula06
 
WPI Aula 01
WPI Aula 01WPI Aula 01
WPI Aula 01
 
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
 
WPI – Pós Design de Interação IEC PUC Minas aula05
WPI – Pós Design de Interação IEC PUC Minas aula05WPI – Pós Design de Interação IEC PUC Minas aula05
WPI – Pós Design de Interação IEC PUC Minas aula05
 
Front end, back end, full stack. onde vivem o que comem hoje na uni_granrio
Front end, back end, full stack.  onde vivem  o que comem   hoje na uni_granrioFront end, back end, full stack.  onde vivem  o que comem   hoje na uni_granrio
Front end, back end, full stack. onde vivem o que comem hoje na uni_granrio
 
WPI – Pós Design de Interação IEC PUC Minas aula04
WPI – Pós Design de Interação IEC PUC Minas aula04WPI – Pós Design de Interação IEC PUC Minas aula04
WPI – Pós Design de Interação IEC PUC Minas aula04
 
User Interface (UI) x User Experience (UX)
User Interface (UI) x User Experience (UX)User Interface (UI) x User Experience (UX)
User Interface (UI) x User Experience (UX)
 
Desenvolvimento de Games com Phaser
Desenvolvimento de Games com PhaserDesenvolvimento de Games com Phaser
Desenvolvimento de Games com Phaser
 
WPI Aula 04
WPI Aula 04WPI Aula 04
WPI Aula 04
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
 
Interface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-endInterface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-end
 
Processo de design digital
Processo de design digitalProcesso de design digital
Processo de design digital
 
Slides minicurso Web Design
Slides minicurso Web DesignSlides minicurso Web Design
Slides minicurso Web Design
 
Simplificando o design digital
Simplificando o design digitalSimplificando o design digital
Simplificando o design digital
 
Agile UX: Projetando a User Experience no Mundo Ágil
Agile UX: Projetando a User Experience no Mundo ÁgilAgile UX: Projetando a User Experience no Mundo Ágil
Agile UX: Projetando a User Experience no Mundo Ágil
 
UI e UX no Material Design
UI e UX no Material DesignUI e UX no Material Design
UI e UX no Material Design
 

Semelhante a Introdução ao Front-end no Desenvolvimento Web

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
 
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
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Webigorpimentel
 
T@rget trust design de aplicativos css e skinning
T@rget trust   design de aplicativos css e skinningT@rget trust   design de aplicativos css e skinning
T@rget trust design de aplicativos css e skinningTargettrust
 
T@rget trust design de aplicativos css e skinning
T@rget trust   design de aplicativos css e skinningT@rget trust   design de aplicativos css e skinning
T@rget trust design de aplicativos css e skinningTargettrust
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Valmir Justo
 
Introdução à Programação “para Web” de Carlos Bazilio
Introdução à Programação “para Web” de Carlos BazilioIntrodução à Programação “para Web” de Carlos Bazilio
Introdução à Programação “para Web” de Carlos BazilioRicardoKratz2
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sitesthiagolima
 
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
 
Tecnologia web aula 03
Tecnologia web  aula 03Tecnologia web  aula 03
Tecnologia web aula 03Manuel Ernesto
 
Service Oriented Front-End Architecture
Service Oriented Front-End ArchitectureService Oriented Front-End Architecture
Service Oriented Front-End ArchitectureCristiano Gomes
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webigorpimentel
 
Front-end: O que é necessário saber ?
Front-end: O que é necessário saber ?Front-end: O que é necessário saber ?
Front-end: O que é necessário saber ?Rafael Pazini
 
Introdução ao desenvolvimento de páginas web estáticas
Introdução ao desenvolvimento de páginas web estáticasIntrodução ao desenvolvimento de páginas web estáticas
Introdução ao desenvolvimento de páginas web estáticasSusana Oliveira
 

Semelhante a Introdução ao Front-end no Desenvolvimento Web (20)

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
 
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
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
 
T@rget trust design de aplicativos css e skinning
T@rget trust   design de aplicativos css e skinningT@rget trust   design de aplicativos css e skinning
T@rget trust design de aplicativos css e skinning
 
T@rget trust design de aplicativos css e skinning
T@rget trust   design de aplicativos css e skinningT@rget trust   design de aplicativos css e skinning
T@rget trust design de aplicativos css e skinning
 
XHTML e CSS
XHTML e CSSXHTML e CSS
XHTML e CSS
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
 
Introdução à Programação “para Web” de Carlos Bazilio
Introdução à Programação “para Web” de Carlos BazilioIntrodução à Programação “para Web” de Carlos Bazilio
Introdução à Programação “para Web” de Carlos Bazilio
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
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
 
Curso asp - basico
Curso   asp - basicoCurso   asp - basico
Curso asp - basico
 
Professor rogerio-apostila
Professor rogerio-apostilaProfessor rogerio-apostila
Professor rogerio-apostila
 
A Linguagem Php
A Linguagem PhpA Linguagem Php
A Linguagem Php
 
Palestra institucional Interna | Meet and Greet
Palestra institucional Interna | Meet and GreetPalestra institucional Interna | Meet and Greet
Palestra institucional Interna | Meet and Greet
 
Tecnologia web aula 03
Tecnologia web  aula 03Tecnologia web  aula 03
Tecnologia web aula 03
 
Service Oriented Front-End Architecture
Service Oriented Front-End ArchitectureService Oriented Front-End Architecture
Service Oriented Front-End Architecture
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
 
Front-end: O que é necessário saber ?
Front-end: O que é necessário saber ?Front-end: O que é necessário saber ?
Front-end: O que é necessário saber ?
 
Introdução ao desenvolvimento de páginas web estáticas
Introdução ao desenvolvimento de páginas web estáticasIntrodução ao desenvolvimento de páginas web estáticas
Introdução ao desenvolvimento de páginas web estáticas
 

Último

ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docxATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx2m Assessoria
 
Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiPaulo Pagliusi, PhD, CISM
 
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docxATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx2m Assessoria
 
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdfAula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdfInocencioHoracio3
 
Convergência TO e TI nas Usinas - Setor Sucroenergético
Convergência TO e TI nas Usinas - Setor SucroenergéticoConvergência TO e TI nas Usinas - Setor Sucroenergético
Convergência TO e TI nas Usinas - Setor SucroenergéticoMarcio Venturelli
 
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPaulo Pagliusi, PhD, CISM
 
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINASCOI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINASMarcio Venturelli
 
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx2m Assessoria
 

Último (8)

ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docxATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
 
Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo Pagliusi
 
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docxATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
 
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdfAula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
 
Convergência TO e TI nas Usinas - Setor Sucroenergético
Convergência TO e TI nas Usinas - Setor SucroenergéticoConvergência TO e TI nas Usinas - Setor Sucroenergético
Convergência TO e TI nas Usinas - Setor Sucroenergético
 
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
 
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINASCOI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
 
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
 

Introdução ao Front-end no Desenvolvimento Web

  • 1. Introdução ao Front-end no Desenvolvimento Web Anderson Luís Furlan
  • 2.
  • 3. Definição Front-end • O front-end é a interface, responsável por coletar a entrada em várias formas do usuário e processá-la para adequá-la a uma especificação em que o back-end possa utilizar.
  • 4. Desenvolvimento Web Web-Design Back-end Front-end
  • 5. Web-design Ferramentas Gráficas: Photoshop, Fireworks e Corel Draw
  • 6. Front-end HTML, CSS e JavaScript
  • 7. Back-end PHP, Java, Ruby, Pyhton, etc.
  • 8. Front-end Web - Linguagens
  • 9. Front-end Web - HTML É uma linguagem de marcação, utilizada como padrão na Internet responsável por definir a ESTRUTURA em uma página. Por meio dela se define, por exemplo, títulos, subtítulos, listas ordenadas, não ordenadas, blocos de códigos, links, etc. O HTML5 é a última versão da linguagem onde foram incluídos uma série de recursos de multimídia (áudio e vídeo), deixando-a também mais semântica.
  • 10. Front-end Web - CSS É uma linguagem de folhas de estilo em cascata, do inglês Cascade Style Sheets, responsável por definir o ESTILO de uma página da Web. É o que define o layout de apresentação, as cores e todas as formas de apresentação de uma página, site ou sistema web. A versão 3 da linguagem CSS permite animações através de regras, sem a necessidade de programar em JavaScript ou plugins para tal.
  • 11. Front-end Web - JavaScript Anteriormente era considerada uma linguagem de script, hoje é considerada uma linguagem de programação, sendo responsável pela AÇÃO em uma página da Web. JavaScript ou ECMAScript, realiza manipulações do DOM, animações, validação de formulários, em APIs do HTML5 e diversas outras funcionalidades no lado client (browser). Atualmente vem ganhando espaço no lado server.
  • 12. Front-end Web - Tecnologias
  • 13. Pré-processadores CSS Less e Sass são pré-processadores CSS, ou seja, inserem funções e variáveis na linguagem de estilo. Na verdade você “programa estilo” e, posteriormente, através de uma compilação ou interpretação, eles traduzem para CSS. O SASS é feito em Ruby e o Less, em JavaScript e tanto pode ser interpretado no navegador via JavaScript, como compilado via NodeJS ou Rhino, que são aplicações lado server em JavaScript.
  • 14. Bibliotecas JavaScript Bibliotecas contém código e dados auxiliares, que provém serviços a programas independentes, o que permite o compartilhamento e a alteração de código e dados de forma modular. jQuery é uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client-side que interagem com o HTML. Torna mais simples a manipulação do DOM, de eventos e uso do AJAX. O AngularJS é do Google e uma das bibliotecas JS mais populares e inovadoras por ter “acabado” com a manipulação do DOM.
  • 15. Frameworks Front-end Framework é uma abstração que une códigos comuns entre vários projetos de software provendo uma funcionalidade genérica. Os Frameworks Front-end provém funcionalidades como sistema de layout de grid, responsividade na web, cross-browsers, plug-ins entre outros recursos. No caso do Bootstrap e Foundation, os mais populares frameworks front-end, compreendem uma “compilação” de componentes CSS e JavaScript.
  • 16. A importância do Front-end ➔ O usuário valoriza cada vez mais a aparência do sistema, quanto mais agradável melhor. ➔ Usabilidade é um fator chave para a popularização de um sistema, quanto mais fácil melhor. ➔ Não adianta nada um sistema bem arquiteturado no back-end com a interface mal projetada ➔ Interatividade é a chave
  • 17. Vantagens do aprendizado Front-end ➔ Aprende conceitos de web-design e usabilidade ➔ Aprende sobre o negócio ➔ É tendência cada vez mais entre empresas que desenvolvem para web, dividirem os desenvolvedores entre front-end e back-end. ➔ Adquiri conhecimento aprofundado de JavaScript
  • 19. Campo de Trabalho ➔ Desenvovlimento de Sistemas ➔ Agências de Publicidade e Propaganda ➔ Freelancer ➔ Sites e e-commerces
  • 20. Obrigado! alsfurlan@gmail.com github.com/alsfurlan facebook.com/alsfurlan facebook.com/mendigoprogramador