SlideShare a Scribd company logo
1 of 15
Luiz Felipe F. M. Costa
http://thenets.org/phelip




 Parte 1 - O poder das aplicações Web
   Meu nome é Luiz Felipe F. M. Costa.
   Aluno de Sistemas de Informação na
    UNIFEI.
   Estudo web front-end por conta.
   Meu site: http://TheNets.org/
   Meu email: phelip@thenets.org
   Você pode aprender os princípios nesse
    pouco tempo de aula, mas vai levar a vida
    toda se especializando.
   Não pretendo ensinar a fazer sites como
    o do Google ou do Facebook.

   Objetivo
     Entender como um site funciona.
     Descobrir o poder das aplicações web.
     Descobrir qual o caminho seguir para
     aprender a desenvolver para web.
1.   Front-end e back-end.
2.   O que é HTML5?
3.   Instalando Apache+MySQL.
4.   O que é PHP?
5.   Criando meu próprio website.
6.   Onde aprender?


•    Parte 1: de 1 a 2
•    Parte 2: de 3 a 6
   P – Playgrounds
     TecMundo
     Chrome Experiments
     Mozilla Demo Studio
Tirinha
   É processador no cliente
   Interface gráfica
   Exemplos de linguagens:
     HTML
     CSS
     JS
   É processador no servidor
   É seguro (para informações importantes)
   Exemplos de linguagens:
     PHP
     Ruby on Rails
     Python
     ASP.NET
     JSP
   1991   HTML
   1994   HTML2
   1996   CSS1+JavaScript
   1997   HTML4
   1998   CSS2
   2000   XHTML1
   2002   Tableless Web Design
   2005   Ajax
   2009   HTML5
   HTML5 ~= HTML + CSS + JS

   HTML5ROCKS:
    http://slides.html5rocks.com/#formula-
    intro-slide
   https://developer.mozilla.org/media/uploads/demos/b/o/boblemarin/5cfea13ba1397f6
    96bea7b2ff62c0188/fluid_1339407870_demo_package/index.html
   xD com certeza!
   Grooveshark
   Google+
   Google Drive
   Dropbox
   AirDroid
   SlideShare
   Wordpress.org
   Joomla
   Administrador dos projetos TheNets.org
   Aluno de Sistemas de Informação na
    UNIFEI.
   Meu site:
     http://TheNets.org/
   Meu email:
     phelip@thenets.org
   Meu twitter:
     http://twitter.com/TheNets

More Related Content

What's hot

What's hot (20)

Ppt Flex Mania
Ppt Flex ManiaPpt Flex Mania
Ppt Flex Mania
 
Springpoint São Paulo 2016 - Vinícius Lourenço | WordPress for Dummies
Springpoint São Paulo 2016 - Vinícius Lourenço | WordPress for DummiesSpringpoint São Paulo 2016 - Vinícius Lourenço | WordPress for Dummies
Springpoint São Paulo 2016 - Vinícius Lourenço | WordPress for Dummies
 
CMS Livres Gestao de conhecimento para web
CMS Livres   Gestao de conhecimento para webCMS Livres   Gestao de conhecimento para web
CMS Livres Gestao de conhecimento para web
 
WordPress como CMS
WordPress como CMSWordPress como CMS
WordPress como CMS
 
Como eu aprendo WordPress?
Como eu aprendo WordPress?Como eu aprendo WordPress?
Como eu aprendo WordPress?
 
Dicas e truques para desenvolver projetos web utilizando WordPress
Dicas e truques para desenvolver projetos web utilizando WordPressDicas e truques para desenvolver projetos web utilizando WordPress
Dicas e truques para desenvolver projetos web utilizando WordPress
 
Joomla no mercado de trabalho
Joomla no mercado de trabalhoJoomla no mercado de trabalho
Joomla no mercado de trabalho
 
Instalando Drupal, Começando do Começo
Instalando Drupal, Começando do ComeçoInstalando Drupal, Começando do Começo
Instalando Drupal, Começando do Começo
 
Como instalar o WordPress no seu computador
Como instalar o WordPress no seu computadorComo instalar o WordPress no seu computador
Como instalar o WordPress no seu computador
 
Apresentação sobre Drupal
Apresentação sobre DrupalApresentação sobre Drupal
Apresentação sobre Drupal
 
Estilizando temas de WordPress
Estilizando temas de WordPressEstilizando temas de WordPress
Estilizando temas de WordPress
 
Leonardo g
Leonardo gLeonardo g
Leonardo g
 
It's Javascript Time
It's Javascript TimeIt's Javascript Time
It's Javascript Time
 
Joomla desenvolvimento
Joomla desenvolvimentoJoomla desenvolvimento
Joomla desenvolvimento
 
Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​
Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​
Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​
 
NOSQLBA 2018 - ArangoDB com python
NOSQLBA 2018 - ArangoDB com pythonNOSQLBA 2018 - ArangoDB com python
NOSQLBA 2018 - ArangoDB com python
 
Joomla
JoomlaJoomla
Joomla
 
Apresentação de defesa final de estágio
Apresentação de defesa final de estágioApresentação de defesa final de estágio
Apresentação de defesa final de estágio
 
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuaisJavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
 
Cms Livres - Não Reinventando a Roda no Desenvolvimento Web
Cms Livres - Não Reinventando a Roda no Desenvolvimento WebCms Livres - Não Reinventando a Roda no Desenvolvimento Web
Cms Livres - Não Reinventando a Roda no Desenvolvimento Web
 

Viewers also liked

Front-end Development
Front-end DevelopmentFront-end Development
Front-end Development
Edy Segura
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
Kaoru Hatake
 
Criando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroCriando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zero
Eduardo Shiota Yasuda
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
Sérgio Vilar
 

Viewers also liked (20)

Html 01
Html 01Html 01
Html 01
 
HTML
HTMLHTML
HTML
 
HTML5 Mobile Aula 1
HTML5 Mobile Aula 1HTML5 Mobile Aula 1
HTML5 Mobile Aula 1
 
Mercado Front-End no Brasil e no mundo
Mercado Front-End no Brasil e no mundoMercado Front-End no Brasil e no mundo
Mercado Front-End no Brasil e no mundo
 
Front-end Development
Front-end DevelopmentFront-end Development
Front-end Development
 
Engenharia de front end de alta performance
Engenharia de front end de alta performanceEngenharia de front end de alta performance
Engenharia de front end de alta performance
 
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
 
Html básico 4 tabelas
Html básico 4   tabelasHtml básico 4   tabelas
Html básico 4 tabelas
 
Creative Pedagogy and Mobile Education
Creative Pedagogy and Mobile EducationCreative Pedagogy and Mobile Education
Creative Pedagogy and Mobile Education
 
SASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-endSASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-end
 
Resumo html 2012 exercícios 01 21
Resumo html 2012   exercícios 01 21Resumo html 2012   exercícios 01 21
Resumo html 2012 exercícios 01 21
 
SEO para Front-End
SEO para Front-EndSEO para Front-End
SEO para Front-End
 
Os mitos do desenvolvimento front-end
Os mitos do desenvolvimento front-endOs mitos do desenvolvimento front-end
Os mitos do desenvolvimento front-end
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
 
Evoluindo a arquitetura de uma aplicação com AngularJS
Evoluindo a arquitetura de uma aplicação com AngularJSEvoluindo a arquitetura de uma aplicação com AngularJS
Evoluindo a arquitetura de uma aplicação com AngularJS
 
AngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-SideAngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-Side
 
Criando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroCriando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zero
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
 
Criando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJSCriando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJS
 

Similar to Minicurso Web. Front-end e HTML5 (parte 1)

Desenvolvimento web: PHP orientado a objetos
Desenvolvimento web: PHP orientado a objetosDesenvolvimento web: PHP orientado a objetos
Desenvolvimento web: PHP orientado a objetos
Lucas Vegi
 
Aula 01 - Programação Web - PHP
Aula 01  - Programação Web - PHPAula 01  - Programação Web - PHP
Aula 01 - Programação Web - PHP
Dalton Martins
 
PHP para aplicações Web de grande porte
PHP para aplicações Web  de grande portePHP para aplicações Web  de grande porte
PHP para aplicações Web de grande porte
Felipe Ribeiro
 
Prog web 01-php-introducao
Prog web 01-php-introducaoProg web 01-php-introducao
Prog web 01-php-introducao
Regis Magalhães
 

Similar to Minicurso Web. Front-end e HTML5 (parte 1) (20)

Desenvolvimento web: PHP orientado a objetos
Desenvolvimento web: PHP orientado a objetosDesenvolvimento web: PHP orientado a objetos
Desenvolvimento web: PHP orientado a objetos
 
PHP Moderno
PHP ModernoPHP Moderno
PHP Moderno
 
PHP 5 de Forma Correta e Segura
PHP 5 de Forma Correta e SeguraPHP 5 de Forma Correta e Segura
PHP 5 de Forma Correta e Segura
 
Oficina de PHP - Software Freedom Day Luziânia 2013
Oficina de PHP - Software Freedom Day Luziânia 2013Oficina de PHP - Software Freedom Day Luziânia 2013
Oficina de PHP - Software Freedom Day Luziânia 2013
 
Artigo de php
Artigo de phpArtigo de php
Artigo de php
 
Aula 01 - Programação Web - PHP
Aula 01  - Programação Web - PHPAula 01  - Programação Web - PHP
Aula 01 - Programação Web - PHP
 
Panorama PHP
Panorama PHPPanorama PHP
Panorama PHP
 
PHP: Evolução
PHP: EvoluçãoPHP: Evolução
PHP: Evolução
 
File3
File3File3
File3
 
File3
File3File3
File3
 
Mini Curso de PHP
Mini Curso de PHPMini Curso de PHP
Mini Curso de PHP
 
PHP, Presente e Futuro
PHP, Presente e FuturoPHP, Presente e Futuro
PHP, Presente e Futuro
 
PHP: Além do sitezinho
PHP: Além do sitezinhoPHP: Além do sitezinho
PHP: Além do sitezinho
 
PHP para aplicações Web de grande porte
PHP para aplicações Web  de grande portePHP para aplicações Web  de grande porte
PHP para aplicações Web de grande porte
 
DotNetDay novidades entityframework 4
DotNetDay novidades entityframework 4DotNetDay novidades entityframework 4
DotNetDay novidades entityframework 4
 
A Evolução do PHP - 4º Dev In Santos
A Evolução do PHP - 4º Dev In SantosA Evolução do PHP - 4º Dev In Santos
A Evolução do PHP - 4º Dev In Santos
 
PHP Presente e Futuro
PHP Presente e FuturoPHP Presente e Futuro
PHP Presente e Futuro
 
Apresentação faef
Apresentação faefApresentação faef
Apresentação faef
 
php 01 introducao
php 01 introducaophp 01 introducao
php 01 introducao
 
Prog web 01-php-introducao
Prog web 01-php-introducaoProg web 01-php-introducao
Prog web 01-php-introducao
 

Recently uploaded

Recently uploaded (6)

Boas práticas de programação com Object Calisthenics
Boas práticas de programação com Object CalisthenicsBoas práticas de programação com Object Calisthenics
Boas práticas de programação com Object Calisthenics
 
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docxATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
 
Padrões de Projeto: Proxy e Command com exemplo
Padrões de Projeto: Proxy e Command com exemploPadrões de Projeto: Proxy e Command com exemplo
Padrões de Projeto: Proxy e Command com exemplo
 
ATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docx
ATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docxATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docx
ATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docx
 
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docxATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
 
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
 

Minicurso Web. Front-end e HTML5 (parte 1)

  • 1. Luiz Felipe F. M. Costa http://thenets.org/phelip Parte 1 - O poder das aplicações Web
  • 2. Meu nome é Luiz Felipe F. M. Costa.  Aluno de Sistemas de Informação na UNIFEI.  Estudo web front-end por conta.  Meu site: http://TheNets.org/  Meu email: phelip@thenets.org
  • 3. Você pode aprender os princípios nesse pouco tempo de aula, mas vai levar a vida toda se especializando.
  • 4. Não pretendo ensinar a fazer sites como o do Google ou do Facebook.  Objetivo  Entender como um site funciona.  Descobrir o poder das aplicações web.  Descobrir qual o caminho seguir para aprender a desenvolver para web.
  • 5. 1. Front-end e back-end. 2. O que é HTML5? 3. Instalando Apache+MySQL. 4. O que é PHP? 5. Criando meu próprio website. 6. Onde aprender? • Parte 1: de 1 a 2 • Parte 2: de 3 a 6
  • 6. P – Playgrounds  TecMundo  Chrome Experiments  Mozilla Demo Studio
  • 8. É processador no cliente  Interface gráfica  Exemplos de linguagens:  HTML  CSS  JS
  • 9. É processador no servidor  É seguro (para informações importantes)  Exemplos de linguagens:  PHP  Ruby on Rails  Python  ASP.NET  JSP
  • 10. 1991 HTML  1994 HTML2  1996 CSS1+JavaScript  1997 HTML4  1998 CSS2  2000 XHTML1  2002 Tableless Web Design  2005 Ajax  2009 HTML5
  • 11. HTML5 ~= HTML + CSS + JS  HTML5ROCKS: http://slides.html5rocks.com/#formula- intro-slide
  • 12. https://developer.mozilla.org/media/uploads/demos/b/o/boblemarin/5cfea13ba1397f6 96bea7b2ff62c0188/fluid_1339407870_demo_package/index.html
  • 13. xD com certeza!
  • 14. Grooveshark  Google+  Google Drive  Dropbox  AirDroid  SlideShare  Wordpress.org  Joomla
  • 15. Administrador dos projetos TheNets.org  Aluno de Sistemas de Informação na UNIFEI.  Meu site:  http://TheNets.org/  Meu email:  phelip@thenets.org  Meu twitter:  http://twitter.com/TheNets