Luiz Felipe F. M. Costa

http://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.

Meu site: http://TheNets.org/

Meu email: phelip@thenets.org

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

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

Tirinha

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? (:

Google

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:

phelip@thenets.org

Meu twitter:

http://twitter.com/TheNets