Download - Minicurso Web. Front-end e HTML5 (parte 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: [email protected]
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
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.
Extra
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.
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.
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
aplicativo “xampp-control.exe”.
Clique em “Start”
para iniciar tanto o
Apache, quanto o
MySQL.
Pronto, seu
servidor já está
funcionando! (:
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.
Controle bancos de dados MySQL
Acesse pelo link:
http://localhost/phpmyadmin/
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.
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
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
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
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
▪ ...
Back-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.
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
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.
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.
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>
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>
Front-end
Front-end
Fonte: http://www.youtube.com/watch?v=I7NXjIe9PJs
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>
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>
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>
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>
Front-end
Fonte: 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
Front-end
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? (:
O oráculo.
TUDO GRATUITO!
Administrador dos projetos TheNets.org Aluno de Sistemas de Informação na
UNIFEI. Meu site:
http://TheNets.org/
Meu email:
Meu twitter:
http://twitter.com/TheNets