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

1.109 visualizações

Publicada em

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

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.109
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
29
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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

×