SlideShare uma empresa Scribd logo
1 de 16
Baixar para ler offline
Desenvolvimento Web
Modulo 1
Quem sou eu ?
- Diego Collares
- (pai, esposo da Mary e pai da Lais de 5 anos)
- Viciado em Rap e Tecnologia
- Nasci em Brasília - DF
- Criado em Lins-SP (interior de SP)
- trabalho com TI a 7 anos
- Morador do complexo a 1 ano
E Vocês quem São ?
pera ai, um de cada vez !
Vamos lá !
O que é Front-end e Back-end ?
Front-end = client-side
As linguagens client-side são linguagens onde apenas o
seu NAVEGADOR vai entender.
Quem vai processar essa linguagem não é o servidor, mas
o seu browser.
Neste Módulo 1 o foco é
Front-end = client-side
No Módulo 2 o foco vai ser server-side,
depois falamos mais disso.
O que é Browser mano ?
Browser = Navegador
Modulo 1 - client-side
Vamos aprender Linguagens client-side
1 - HTML5
2 - CSS
3 - jQuery (um conjunto de biblioteca
escrito em javascript)
( lembre-se client-side = Front-end )
Client-side = Front-end
Client-side = Front-end
Client-side = Front-end
Tem alguma coisa errada que não está
certa!
Perguntas?
Pode me explicar de novo ?
1- HTML
O acrônico HTML significa em inglês: HyperText
Marckup Language. Para gente aqui fica: Linguagem
de Marcação de Hipertexto. Bonito, né?
Por trás das palavras Hipertexto e Marcação tem
muita história e guardam a real essência da função
do HTML. Você vai saber mais nas próximas, onde
falamos sobre Semântica, que nada mais é do que
a organização da informação usando HTML.
1- HTML
Se você tiver que guardar alguma coisa sobre o que
é HTML, guarde isso: HTML serve para dar
significado e organizar a informação dos websites.
Tendo isso em mente, você já saberá muito mais do
que a maioria dos profissionais por aí.
1- HTML
Vamos colocar a mão na massa!
Estrutura básica - HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Título da página</title>
<meta charset="utf-8">
</head>
<body>
Aqui vai o código HTML que fará seu site aparecer.
</body>
</html>

Mais conteúdo relacionado

Semelhante a Desenvolvimento Web Módulo 1

Aprenda a ser um webmaster
Aprenda a ser um webmasterAprenda a ser um webmaster
Aprenda a ser um webmasterJeferson Souza
 
Vitor - O potencial didático do WordPress no ensino-aprendizagem de Programação
Vitor - O potencial didático do WordPress no ensino-aprendizagem de ProgramaçãoVitor - O potencial didático do WordPress no ensino-aprendizagem de Programação
Vitor - O potencial didático do WordPress no ensino-aprendizagem de ProgramaçãoWordPress Floripa
 
Uma perspectiva histórica e o cenário atual das ferramentas de desenvolviment...
Uma perspectiva histórica e o cenário atual das ferramentas de desenvolviment...Uma perspectiva histórica e o cenário atual das ferramentas de desenvolviment...
Uma perspectiva histórica e o cenário atual das ferramentas de desenvolviment...Mario Guedes
 
Aula 01 - Programação Web - PHP
Aula 01  - Programação Web - PHPAula 01  - Programação Web - PHP
Aula 01 - Programação Web - PHPDalton Martins
 
Aula1 - Curso Web-Design - ETECA Camargo Aranha
Aula1 - Curso Web-Design - ETECA Camargo AranhaAula1 - Curso Web-Design - ETECA Camargo Aranha
Aula1 - Curso Web-Design - ETECA Camargo Aranhafevooduck
 
Aula 01 introdução ao php
Aula 01   introdução ao phpAula 01   introdução ao php
Aula 01 introdução ao phpAdriano Castro
 
PHP Turbinado com CodeIgniter - Conisli 2011
PHP Turbinado com CodeIgniter - Conisli 2011PHP Turbinado com CodeIgniter - Conisli 2011
PHP Turbinado com CodeIgniter - Conisli 2011Evaldo Junior
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sitesthiagolima
 
Habilidades necessárias para integrar aplicativos e dados
Habilidades necessárias para integrar aplicativos e dadosHabilidades necessárias para integrar aplicativos e dados
Habilidades necessárias para integrar aplicativos e dadosJeison Barros
 
Programe na Velocidade da Luz
Programe na Velocidade da LuzPrograme na Velocidade da Luz
Programe na Velocidade da LuzDaniel Polito
 
A Evolução do PHP - A Linguagem Número 1 da Web - PHP Conference Brasil 2013
A Evolução do PHP - A Linguagem Número 1 da Web - PHP Conference Brasil 2013A Evolução do PHP - A Linguagem Número 1 da Web - PHP Conference Brasil 2013
A Evolução do PHP - A Linguagem Número 1 da Web - PHP Conference Brasil 2013Evaldo Junior
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designerRoney Sousa
 
Introdução a programação
Introdução a programaçãoIntrodução a programação
Introdução a programaçãoEdu Queiroz
 

Semelhante a Desenvolvimento Web Módulo 1 (20)

Aprenda a ser um webmaster
Aprenda a ser um webmasterAprenda a ser um webmaster
Aprenda a ser um webmaster
 
Vitor - O potencial didático do WordPress no ensino-aprendizagem de Programação
Vitor - O potencial didático do WordPress no ensino-aprendizagem de ProgramaçãoVitor - O potencial didático do WordPress no ensino-aprendizagem de Programação
Vitor - O potencial didático do WordPress no ensino-aprendizagem de Programação
 
Uma perspectiva histórica e o cenário atual das ferramentas de desenvolviment...
Uma perspectiva histórica e o cenário atual das ferramentas de desenvolviment...Uma perspectiva histórica e o cenário atual das ferramentas de desenvolviment...
Uma perspectiva histórica e o cenário atual das ferramentas de desenvolviment...
 
Souza naves
Souza navesSouza naves
Souza naves
 
Aula 01 - Programação Web - PHP
Aula 01  - Programação Web - PHPAula 01  - Programação Web - PHP
Aula 01 - Programação Web - PHP
 
Aula 02 introdução ao php
Aula 02   introdução ao phpAula 02   introdução ao php
Aula 02 introdução ao php
 
Front-end 001
Front-end 001Front-end 001
Front-end 001
 
Aula1 - Curso Web-Design - ETECA Camargo Aranha
Aula1 - Curso Web-Design - ETECA Camargo AranhaAula1 - Curso Web-Design - ETECA Camargo Aranha
Aula1 - Curso Web-Design - ETECA Camargo Aranha
 
Carreira de dev
Carreira de devCarreira de dev
Carreira de dev
 
Domain Driven Design
Domain Driven DesignDomain Driven Design
Domain Driven Design
 
Aula 01 introdução ao php
Aula 01   introdução ao phpAula 01   introdução ao php
Aula 01 introdução ao php
 
PHP Turbinado com CodeIgniter - Conisli 2011
PHP Turbinado com CodeIgniter - Conisli 2011PHP Turbinado com CodeIgniter - Conisli 2011
PHP Turbinado com CodeIgniter - Conisli 2011
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Habilidades necessárias para integrar aplicativos e dados
Habilidades necessárias para integrar aplicativos e dadosHabilidades necessárias para integrar aplicativos e dados
Habilidades necessárias para integrar aplicativos e dados
 
Programe na Velocidade da Luz
Programe na Velocidade da LuzPrograme na Velocidade da Luz
Programe na Velocidade da Luz
 
A Evolução do PHP - A Linguagem Número 1 da Web - PHP Conference Brasil 2013
A Evolução do PHP - A Linguagem Número 1 da Web - PHP Conference Brasil 2013A Evolução do PHP - A Linguagem Número 1 da Web - PHP Conference Brasil 2013
A Evolução do PHP - A Linguagem Número 1 da Web - PHP Conference Brasil 2013
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designer
 
Introdução a programação
Introdução a programaçãoIntrodução a programação
Introdução a programação
 
PHP Tools for Fast coding
PHP Tools for Fast codingPHP Tools for Fast coding
PHP Tools for Fast coding
 
Palestra institucional Interna | Meet and Greet
Palestra institucional Interna | Meet and GreetPalestra institucional Interna | Meet and Greet
Palestra institucional Interna | Meet and Greet
 

Último

Conferência SC 24 | Data Analytics e IA: o futuro do e-commerce?
Conferência SC 24 | Data Analytics e IA: o futuro do e-commerce?Conferência SC 24 | Data Analytics e IA: o futuro do e-commerce?
Conferência SC 24 | Data Analytics e IA: o futuro do e-commerce?E-Commerce Brasil
 
Ranking Brasil abril 2024 sites de notícias.pdf
Ranking Brasil abril 2024 sites de notícias.pdfRanking Brasil abril 2024 sites de notícias.pdf
Ranking Brasil abril 2024 sites de notícias.pdfRevista Sociedade Militar
 
Conferência SC 24 | Social commerce e recursos interativos: como aplicar no s...
Conferência SC 24 | Social commerce e recursos interativos: como aplicar no s...Conferência SC 24 | Social commerce e recursos interativos: como aplicar no s...
Conferência SC 24 | Social commerce e recursos interativos: como aplicar no s...E-Commerce Brasil
 
representações cartograficas - 1 ano.pptx
representações cartograficas - 1 ano.pptxrepresentações cartograficas - 1 ano.pptx
representações cartograficas - 1 ano.pptxCarladeOliveira25
 
Products Catalogue-01-Electronics thin wall heat shrink tubing wire and cable...
Products Catalogue-01-Electronics thin wall heat shrink tubing wire and cable...Products Catalogue-01-Electronics thin wall heat shrink tubing wire and cable...
Products Catalogue-01-Electronics thin wall heat shrink tubing wire and cable...Welldonelily Skype
 
EP GRUPO - Mídia Kit 2024 - conexão de marcas e personagens
EP GRUPO - Mídia Kit 2024 - conexão de marcas e personagensEP GRUPO - Mídia Kit 2024 - conexão de marcas e personagens
EP GRUPO - Mídia Kit 2024 - conexão de marcas e personagensLuizPauloFerreira11
 
Conferência SC 24 | Estratégias de precificação: loja própria e marketplace
Conferência SC 24 | Estratégias de precificação: loja própria e marketplaceConferência SC 24 | Estratégias de precificação: loja própria e marketplace
Conferência SC 24 | Estratégias de precificação: loja própria e marketplaceE-Commerce Brasil
 
Conferência SC 24 | A força da geolocalização impulsionada em ADS e Fullcomme...
Conferência SC 24 | A força da geolocalização impulsionada em ADS e Fullcomme...Conferência SC 24 | A força da geolocalização impulsionada em ADS e Fullcomme...
Conferência SC 24 | A força da geolocalização impulsionada em ADS e Fullcomme...E-Commerce Brasil
 

Último (8)

Conferência SC 24 | Data Analytics e IA: o futuro do e-commerce?
Conferência SC 24 | Data Analytics e IA: o futuro do e-commerce?Conferência SC 24 | Data Analytics e IA: o futuro do e-commerce?
Conferência SC 24 | Data Analytics e IA: o futuro do e-commerce?
 
Ranking Brasil abril 2024 sites de notícias.pdf
Ranking Brasil abril 2024 sites de notícias.pdfRanking Brasil abril 2024 sites de notícias.pdf
Ranking Brasil abril 2024 sites de notícias.pdf
 
Conferência SC 24 | Social commerce e recursos interativos: como aplicar no s...
Conferência SC 24 | Social commerce e recursos interativos: como aplicar no s...Conferência SC 24 | Social commerce e recursos interativos: como aplicar no s...
Conferência SC 24 | Social commerce e recursos interativos: como aplicar no s...
 
representações cartograficas - 1 ano.pptx
representações cartograficas - 1 ano.pptxrepresentações cartograficas - 1 ano.pptx
representações cartograficas - 1 ano.pptx
 
Products Catalogue-01-Electronics thin wall heat shrink tubing wire and cable...
Products Catalogue-01-Electronics thin wall heat shrink tubing wire and cable...Products Catalogue-01-Electronics thin wall heat shrink tubing wire and cable...
Products Catalogue-01-Electronics thin wall heat shrink tubing wire and cable...
 
EP GRUPO - Mídia Kit 2024 - conexão de marcas e personagens
EP GRUPO - Mídia Kit 2024 - conexão de marcas e personagensEP GRUPO - Mídia Kit 2024 - conexão de marcas e personagens
EP GRUPO - Mídia Kit 2024 - conexão de marcas e personagens
 
Conferência SC 24 | Estratégias de precificação: loja própria e marketplace
Conferência SC 24 | Estratégias de precificação: loja própria e marketplaceConferência SC 24 | Estratégias de precificação: loja própria e marketplace
Conferência SC 24 | Estratégias de precificação: loja própria e marketplace
 
Conferência SC 24 | A força da geolocalização impulsionada em ADS e Fullcomme...
Conferência SC 24 | A força da geolocalização impulsionada em ADS e Fullcomme...Conferência SC 24 | A força da geolocalização impulsionada em ADS e Fullcomme...
Conferência SC 24 | A força da geolocalização impulsionada em ADS e Fullcomme...
 

Desenvolvimento Web Módulo 1

  • 2. Quem sou eu ? - Diego Collares - (pai, esposo da Mary e pai da Lais de 5 anos) - Viciado em Rap e Tecnologia - Nasci em Brasília - DF - Criado em Lins-SP (interior de SP) - trabalho com TI a 7 anos - Morador do complexo a 1 ano
  • 3. E Vocês quem São ? pera ai, um de cada vez !
  • 5. O que é Front-end e Back-end ?
  • 6. Front-end = client-side As linguagens client-side são linguagens onde apenas o seu NAVEGADOR vai entender. Quem vai processar essa linguagem não é o servidor, mas o seu browser.
  • 7. Neste Módulo 1 o foco é Front-end = client-side No Módulo 2 o foco vai ser server-side, depois falamos mais disso.
  • 8. O que é Browser mano ? Browser = Navegador
  • 9. Modulo 1 - client-side Vamos aprender Linguagens client-side 1 - HTML5 2 - CSS 3 - jQuery (um conjunto de biblioteca escrito em javascript) ( lembre-se client-side = Front-end )
  • 10. Client-side = Front-end Client-side = Front-end Client-side = Front-end
  • 11. Tem alguma coisa errada que não está certa! Perguntas? Pode me explicar de novo ?
  • 12. 1- HTML O acrônico HTML significa em inglês: HyperText Marckup Language. Para gente aqui fica: Linguagem de Marcação de Hipertexto. Bonito, né?
  • 13. Por trás das palavras Hipertexto e Marcação tem muita história e guardam a real essência da função do HTML. Você vai saber mais nas próximas, onde falamos sobre Semântica, que nada mais é do que a organização da informação usando HTML. 1- HTML
  • 14. Se você tiver que guardar alguma coisa sobre o que é HTML, guarde isso: HTML serve para dar significado e organizar a informação dos websites. Tendo isso em mente, você já saberá muito mais do que a maioria dos profissionais por aí. 1- HTML
  • 15. Vamos colocar a mão na massa!
  • 16. Estrutura básica - HTML <!DOCTYPE html> <html lang="pt-br"> <head> <title>Título da página</title> <meta charset="utf-8"> </head> <body> Aqui vai o código HTML que fará seu site aparecer. </body> </html>