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

1. Luiz Felipe F. M. Costa
http://thenets.org/phelip
Parte 2 – Desenvolvendo meu próprio website

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. 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 massa
6. Onde aprender?
• Parte 1: de 1 a 2
• Parte 2: de 3 a 6

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.  Servidor HTTP.
 Voltado para servidores de pequeno e
médio porte.
 Suporta várias linguagens.

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.  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.  Acesse o link
http://www.apachefriends.org/pt_br/xampp
-windows.html
 Baixa o XAMPP Portable (exe)

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.  Clique em “Start”
para iniciar tanto o
Apache, quanto o
MySQL.
 Pronto, seu
servidor já está
funcionando! (:

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.  Controle bancos de dados MySQL
 Acesse pelo link:
http://localhost/phpmyadmin/

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. 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. 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. 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. 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. Tirinha

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. 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. 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. 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. 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. 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. Front-end
Fonte: http://www.youtube.com/watch?v=I7NXjIe9PJs

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. 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. 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. 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. Front-end
Fonte: http://slides.html5rocks.com/

31. Front-end
 Referência com todas as TAGs:
 http://www.w3schools.com/tags/default.asp

32. Front-end
 Acesse o link abaixo e mãos-a-obra.
 http://thenets.org/works
▪ Chave: minicurso

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.  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