0
Luiz Felipe F. M. Costahttp://thenets.org/phelip Parte 2 – Desenvolvendo meu próprio website
   Meu nome é Luiz Felipe F. M. Costa.   Aluno de Sistemas de Informação na    UNIFEI.   Estudo web front-end por conta...
1.    Front-end e back-end.2.    O que é HTML5?3.    Instalando Apache+MySQL.4.    O que é PHP?5.    Criando meu próprio w...
Extra   Dreamweaver CS6: da Adobe e é pago,    mas eu acho que é o melhor de todos.   Aptana: o único, na minha opinião,...
   Servidor HTTP.   Voltado para servidores de pequeno e    médio porte.   Suporta várias linguagens.
   Instalar ambos os aplicativos necessita de    conhecimento mais técnico sobre    servidores.   É complicado.   É um ...
   Aplicativo para pré-configuração     Apache, MySQL, PHP +     PEAR, Perl, mod_php, mod_perl, mod_ssl, O     penSSL, p...
   Acesse o link    http://www.apachefriends.org/pt_br/xampp    -windows.html   Baixa o XAMPP Portable (exe)
   Após extrair, execute e o arquivo    “setup_xampp.bat” para definir os    diretórios e, em seguida, execute o    aplic...
   Clique em “Start”    para iniciar tanto o    Apache, quanto o    MySQL.   Pronto, seu    servidor já está    funciona...
   No diretório “~/xampp/htdocs” estão    localizados os arquivos do “localhost”.   Para acessar esses arquivos pelo    ...
   Controle bancos de dados MySQL   Acesse pelo link:    http://localhost/phpmyadmin/
Back-end   Linguagem back-end voltada para o    desenvolvimento de websites dinâmicos.   Sintaxe parecida com a da lingu...
Back-end       Uma das maiores plataformas do mundo        é o Yahoo!, que utiliza PHP e chega a        receber 150 mil v...
Back-end       Web (HTML)       Web Services;       Rich Clients, cliente/servidor (PHP-GTK,        PHP-XUL, etc);    ...
Back-end     Desenvolvimento de Software: Dreamweaver,      Eclipse, PHPEdit, Zend Studio;     Otimização: APC, eAcceler...
Back-end   A web é dividida em duas camadas:     Front-end      ▪ HTML: conteúdo e estrutura      ▪ CSS: estilo/apresent...
Tirinha
Front-end   Quem criou?     A W3C.   Qual a importância?     Torna uma página acessível para qualquer     browser, sej...
Front-end   Digamos que um site muito grande, como    o site do Globo Esporte ou UOL consiga    reduzir de cada página 50...
Front-end   Um site criado seguindo os padrões da    W3C obtém melhores resultados em    buscadores, diminui o número de ...
Front-end   O termo “Tableless” ficou muito conhecido    no Brasil e se refere ao desenvolvimento    de website que subst...
Front-end   O navegador é como se fosse um leitor    de um livro e o conteúdo dele deve    possuir uma linguagem que seja...
Front-end<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"><title>Untitled Docu...
Front-endFonte: http://www.youtube.com/watch?v=I7NXjIe9PJs
Front-end   Criar tabelas     <table></table>   Títulos     <h1></h1> até <h6></h6>   Listas ordenadas     <ol></ol>...
Front-end   Cabeçalho da página     <header></header>   Rodapé da página     <footer></footer>   Informações sobre o ...
Front-end   Adiciona áudio     <audio src=“audio.ogg”      controls=“controls”></audio>   Adiciona video     <video sr...
Front-end   Menus     <menu>       <li><input type=“checkbox” />NFS Most Wanted</li>       <li><input type=“checkbox” />...
Front-endFonte: http://slides.html5rocks.com/
Front-end   Referência com todas as TAGs:     http://www.w3schools.com/tags/default.asp
Front-end   Acesse o link abaixo e mãos-a-obra.     http://thenets.org/works      ▪ Chave: minicurso
TUDO GRATUITO!   Codecademy (aulas interativas)     Web Fundamentos (HTML+CSS); JavaScript;     Python; Ruby; jQuery.  ...
   Administrador dos projetos TheNets.org   Aluno de Sistemas de Informação na    UNIFEI.   Meu site:     http://TheNe...
Upcoming SlideShare
Loading in...5
×

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

811

Published on

Minicurso Web UNIFEI: Front-end e novidades do HTML5
(parte 2)

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
811
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Minicurso Web. Front-end e HTML5 (parte 2)"

  1. 1. Luiz Felipe F. M. Costahttp://thenets.org/phelip Parte 2 – Desenvolvendo meu próprio website
  2. 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. 3. 1. Front-end e back-end.2. O que é HTML5?3. Instalando Apache+MySQL.4. O que é PHP?5. Criando meu próprio website. 1. Semântica HTML5 2. Colocando a mão na massa6. Onde aprender?• Parte 1: de 1 a 2• Parte 2: de 3 a 6
  4. 4. Extra Dreamweaver CS6: da Adobe e é pago, mas eu acho que é o melhor de todos. Aptana: o único, na minha opinião, que consegue competir com o DW. Notepad++: gratuito. Particularmente, considero bem ruim, mas tem quem goste e diga que é o melhor que existe.
  5. 5.  Servidor HTTP. Voltado para servidores de pequeno e médio porte. Suporta várias linguagens.
  6. 6.  Instalar ambos os aplicativos necessita de conhecimento mais técnico sobre servidores. É complicado. É um tanto complicado. Uma má configuração pode colocar a máquina exposta a ataques. É muito complicado.
  7. 7.  Aplicativo para pré-configuração  Apache, MySQL, PHP + PEAR, Perl, mod_php, mod_perl, mod_ssl, O penSSL, phpMyAdmin, Webalizer, Mercury Mail Transport System for Win32 and NetWare Systems v3.32, Ming, JpGraph, FileZilla FTP Server, mcrypt, eAccelerator, SQLite, e WEB- DAV + mod_auth_mysql.
  8. 8.  Acesse o link http://www.apachefriends.org/pt_br/xampp -windows.html Baixa o XAMPP Portable (exe)
  9. 9.  Após extrair, execute e o arquivo “setup_xampp.bat” para definir os diretórios e, em seguida, execute o aplicativo “xampp-control.exe”.
  10. 10.  Clique em “Start” para iniciar tanto o Apache, quanto o MySQL. Pronto, seu servidor já está funcionando! (:
  11. 11.  No diretório “~/xampp/htdocs” estão localizados os arquivos do “localhost”. Para acessar esses arquivos pelo navegador, basta acessar http://localhost/. Os arquivos que já vêm na pasta “htdocs” do XAMPP podem ser excluídos sem problema.
  12. 12.  Controle bancos de dados MySQL Acesse pelo link: http://localhost/phpmyadmin/
  13. 13. Back-end Linguagem back-end voltada para o desenvolvimento de websites dinâmicos. Sintaxe parecida com a da linguagem C. Orientado a Objetos. Muito popular, com diversos framworks. Está perdendo espaço para o Ruby on Rails. Site: http://php.net.
  14. 14. Back-end  Uma das maiores plataformas do mundo é o Yahoo!, que utiliza PHP e chega a receber 150 mil visitantes simultaneamente.  Em geral o PHP é utilizado com:  Um servidor Web: Apache ou Microsoft IIS;  Um SGDB (banco de dados): MySQL, PostgreSQL, Oracle, SQL Server, etc.Fonte: http://www.htmlstaff.org/ver.php?id=23269
  15. 15. Back-end  Web (HTML)  Web Services;  Rich Clients, cliente/servidor (PHP-GTK, PHP-XUL, etc);  Linha de Comando (CLI);  Documentos Office (Open Documents, Open XML, PDF, Flash, etc).Fonte: http://www.htmlstaff.org/ver.php?id=23269
  16. 16. Back-end  Desenvolvimento de Software: Dreamweaver, Eclipse, PHPEdit, Zend Studio;  Otimização: APC, eAccelerator, Smarty, JpCache;  Administração: phpMyAdmin, phpOracleAdmin, phpSysbaseAdmin, phpPgAdmin;  Gerenciamento de Conteúdo: Spip, eZ Publish, Joomla, Typo 3, Wordpress;  Framework: PEAR, Symphony, CakePHP, Prado, Seagull, Zend Framework, eZ Components;  ERP, webshops: Dolibarr (ERP), GeStock (Gerenciamento de estoque), osCommerce (Comércio Virtual), SugarCRM (CRM).Fonte: http://www.htmlstaff.org/ver.php?id=23269
  17. 17. Back-end A web é dividida em duas camadas:  Front-end ▪ HTML: conteúdo e estrutura ▪ CSS: estilo/apresentação ▪ JavaScript: comportamento  Back-end ▪ PHP ▪ Python ▪ Ruby ▪ ...
  18. 18. Tirinha
  19. 19. Front-end Quem criou?  A W3C. Qual a importância?  Torna uma página acessível para qualquer browser, seja de um desktop/notebook ou mobile.
  20. 20. Front-end Digamos que um site muito grande, como o site do Globo Esporte ou UOL consiga reduzir de cada página 50KB. Em portais como esses, 50KB pode representar muito:  3 Terabytes / dia  92 Terabytes / mês  1100 Terabytes / ano
  21. 21. Front-end Um site criado seguindo os padrões da W3C obtém melhores resultados em buscadores, diminui o número de falhas e é melhor renderizado pelo browser.
  22. 22. Front-end O termo “Tableless” ficou muito conhecido no Brasil e se refere ao desenvolvimento de website que substitui tabelas por “divs”, posicionadas usando CSS. Use <table> para criar tabelas, não para posicionar elementos numa página.
  23. 23. Front-end O navegador é como se fosse um leitor de um livro e o conteúdo dele deve possuir uma linguagem que seja entendível para o browser. <a> <title> <h1> <strong> <div> <p> <br>
  24. 24. Front-end<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"><title>Untitled Document</title></head><body></body></html>
  25. 25. Front-endFonte: http://www.youtube.com/watch?v=I7NXjIe9PJs
  26. 26. Front-end Criar tabelas  <table></table> Títulos  <h1></h1> até <h6></h6> Listas ordenadas  <ol></ol> Listas não-ordenadas  <ul> <li></li> <li></li> </ul> Ênfase  <em></em> Ênfase forte (negrito)  <strong></strong> Títulos de campos de formulários  <label></label>
  27. 27. Front-end Cabeçalho da página  <header></header> Rodapé da página  <footer></footer> Informações sobre o conteúdo principa  <aside></aside> Imagem com legenda  <figure> <img src=“imagem.jpg” alt=“Descrição” /> <legend>Legenda da Imagem</legend> </figure>
  28. 28. Front-end Adiciona áudio  <audio src=“audio.ogg” controls=“controls”></audio> Adiciona video  <video src=“audio.ogg” controls=“controls”></video> Sessão de navegação  <nav> <a href=“http://link”>Anterior</a> <a href=“http://link”>Home</a> <a href=“http://link”>Próximo</a> </nav>
  29. 29. Front-end Menus  <menu> <li><input type=“checkbox” />NFS Most Wanted</li> <li><input type=“checkbox” />League of Legends</li> <li><input type=“checkbox” />Torchlight 2</li> </menu>
  30. 30. Front-endFonte: http://slides.html5rocks.com/
  31. 31. Front-end Referência com todas as TAGs:  http://www.w3schools.com/tags/default.asp
  32. 32. Front-end Acesse o link abaixo e mãos-a-obra.  http://thenets.org/works ▪ Chave: minicurso
  33. 33. TUDO GRATUITO! Codecademy (aulas interativas)  Web Fundamentos (HTML+CSS); JavaScript; Python; Ruby; jQuery. Apostilando.com (PDFs / eBooks)  Qualquer tipo de conteúdo de informática. YouTube (video-aulas)  Preciso comentar? (: Google  O oráculo.
  34. 34.  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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×