Série de apresentações do curso Wordpress 3: Criando sites e blogs de sucesso realizado pela VillaDois

2. Módulo I
Internet: Um Pouco de História
• Propósitos Militares
• Novos meios de comunicação
• Guerra Fria
• Meio de Comunicação Simples (para a atualidade, mínima segurança)
• Redes de Computadores Exército Americano
• Expansão para o Meio Acadêmico
• Estrutura (LAN – Local Area Network)
• Máquina
• Roteadores
• Switches
• Máquina
• Estrutura (WAN – Wide Area Network)
• Servidor
• Backbones/Satélite
• Rede Banda Larga (Telefônica) e Subredes
• ISP (Internet Service Provider) // DNS Service
• Cliente

3. Internet: Aprofundamento
• Comunicações diferentes, protocolos diferentes
• Para a carta, os correios, para a ligação, o celular
• As “5 camadas” de Kurose e Forouzan (ou as “4 camadas mais uma” de Comer e Kozierok)
Aplicação, Transporte, Rede, Link e Hardware (Físico)
• HTTP, FTP, HTTPS, SMTP (Simple Mail), POP3 (Post Office), IMAP (Internet Message Access)
• TCP, UDP, Wi-Fi, Bluetooth
• IP (v4 e v6), ICMP, ECN
• Tunnels (L2TP), PPPoE (Point-to-Point Protocol over Ethernet), Media Access Control (Ethernet, DSL, ISDN)
• A WWW (World Wide Web) é uma “Ilusão”
• A origem da internet como conhecemos hoje
• A internet como meio de comunicação simples - e desorganizada
• Linguagens unilaterais
• HTML, apenas
• Netscape e Internet Explorer
• AOL se funde a Time Warner
• Expansão da Internet
• AOL compra o Netscape
• Nasce a Fundação Mozilla (ex-Netscape)
• Gigantes da primeira era da internet: Yahoo, MSN (Microsoft e NBC: MSNBC), CJB.NET, Geocities
• No Brasil: BOL, UOL/Folha (UOL compra BOL - Grupo Abril), Terra (Portugal), iG

4. Internet: Organizando, padronizando e socializando
• Surge a W3C
• Tim Berners-Lee fundou (no MIT, depois de largar o CERN - Pesquisas Nucleares)
• Padronização da Web (Standards)
• Google, Apple, Microsoft, Opera + 318 organizações
• HTML + CSS, JAVASCRIPT e XML
• Apadrinha PHP (Israelense ZEND; Criada por Rasmus Lerdorf)
• Documenta, aprova, testa e aprimora
• Responsável pela documentação do HTML5 e CSS3
• W3C Schools
• 11 Milhões de visitas anuais em 2008
• Social Web
• Web 2.0 (Tim O’Really)
• Tim Berners-Lee diz: Web 2.0 é um pedaço de jargão
• Compartilhamento e interação
• Web 1.0: Netscape + Britannica OnLine < Web 2.0: Safari + Wikipedia
• E-mail: meio “meio” lento
• mIRC (1995 por Khaled Mardam-Bey)
• Blogs (Comentários), Podcasts, Vlogs
• Redes sociais (Classmates.com)
• Conteúdo colaborativo
• Salas de Bate-Papo
• Bookmarks e Interesses
• Serviços de Chat On Demand

5. Internet: As redes socias (fonte www.socialmediasa.com.br)
‘95 ‘03 ‘05 ‘08
Classmates.com Skyblog Youtube Kaixin001 (China)
Craigslist Couchsurfing Xanga Yammer
MySpace Yahoo! 360 Plurk
‘97 Tribe.net Cyworld (China) ‘09
Six Degrees.com Last.FM Ning Foursquare
AsianAvenue Hi5 Bebo Gowalla
‘98 LinkedIn Gather.com ‘10
Care2 Open BC/Xing Loopt Google Buzz
Xanga Netlog (Europa) Renren (China) ‘11
‘99 MyHeritage ‘06 Google Plus
LiveJournal ‘04 MyChurch Peeper
BlackPlanet Flickr QQ
‘00 Piczo Windows Live
MiGente mixi Mixi Spaces
‘01 Facebook Twitter
Cyworld Dodgeball Cafe Mom
Ryze Orkut Nasza – Klasa
StumbleUpon Dogster (Polônia)
Meetup.com Multiply Odnoklassniki
‘02 aSmallWorld (Rússia)
Friendster Catster Vkontakte
Fotolog Hyves (Rússia)
Plaxo Yelp ‘07
MyLife (Reunion.com) Vimeo Tumblr
Taringa Raverly
Basecamp

6. Internet: A Web 3.0
• Novos padrões, novas necessidades
• Cloud Computing
IaaS (Infraestrutura)
PaaS (Plataforma)
SaaS (Software)
• A coisificação do mundo real (IPv6) + Open Graph
• Web Semântica (Automatização da Web) + HTML5
• Microformats, Microdata
• Novo tagueamento
• A Web tem muito mais
• O que conhecemos é apenas a ponta do iceberg
• O que está além da superfície poucos chegam
• Sem Google index
• Compartilhamento de conteúdo sem segurança
• Livre
• Deep Web, DarkNet, Invisible Net

7. Módulo II
Ambiente Web: Noções básicas
• Servidores
• Estrutura (Sistema Operacional, Servidor Protocolo + Interpretadores + Bancos, Arquivos)
• eg. Windows + IIS + ASP + SQL ou Linux + Apache + PHP + MySQL
• Uma das pontas de uma rede cheia de “nós”
• Linguagens
• HTML
• CSS
• JS
• PHP
• Mas do que se tratam os CMS
• Internet paleozóica: Site escrito página à página com HTML
• Era atual: Páginas geradas dinâmicamente através de Bancos de Dados através de marcações
• CMS
• Joomla
• Drupal
• Wordpress

8. Ambiente Web: O HTML
• Noções
• Não é uma linguagem de programação
• Linguagem de marcação: Sim!
• Saber de HTML não faz de você um programador, mas um marcador, digo, um webdesigner
• HTML é estruturado em tags (estrutura/esqueleto do site)
• CSS é a academia do HTML
• Bloco de Notas do Windows são ótimos editores de HTML
• A estrutura visual, não tabular, não identada, não interfere na sua interpretação
• Tags
• Uma tag sempre estará representada entre < e > (Tipografia: Chevrons)
• A delimitação dela dentro de um documento se dá em pares ao estilo <tag> </tag>
• Em tags de extensão pontual (imagens, quebras de linhas) a tag se encerra em si mesma, como <img src=“” />,
não havendo par lógico para esta tag (Imagem)
• A estrutura básica e primitiva de um arquivo padrão escrito em HTML é composta por
<html><head><title></title></head><body></body></html>

9. Ambiente Web: O HTML
• Tags (Possuem propriedades=‘valores’)
• <!-- ... -->: Comentário
• <a>: Link (ancora)
• <b> e <strong>: Negrito (bold)
• <br />: Quebra de linha (break)
• <button>: Butão
• <center>: Centralizar
• <code>: Código de computador
• <div>: Seção abstrata de um documento
• <dl>, <ol>, <ul>: Listas de Definições, Lista Ordenadas ou Não-ordenadas (Menus, Ítens, Sequências)
• <dt>, <li>: Ítens de uma lista
• <i> e <em>: Itálico (Emphasis)
• <font>: Formatação de font (Deprecated, fora de uso)
• <form>: Formulários
• <frame />: Frame de um <frameset> (Análogo a uma tabela (Frameset) e suas célula (Frames) inseridos
• <h1> to <h6>: Títulos (Headers)
• <hr />: Linha Horizontal
• <iframe>: Frame
• <img />: Imagem
• <input />: Campos de inserção de dados
• <p>: Paragrafo
• <pre>: Preformatados (Mantém quebra de linhas e espaçamentos)
• <q>: Citações (Quotes)

10. Ambiente Web: O CSS
• Folhas de Estilos em Cascata
• Designação recebida pela estrutura visual de hierarquia em que a linguagem é concebida
• Formata visualmente o HTML
• Um documento em CSS recebe extensão .css, diferindo de um documento HTML com extensão .html
• Um HTML pode conter fragmentos de CSS, a premissa contrária não é verdadeira
• Por permitir estar presente DENTRO do HTML, chegamos à três formatos em que o CSS pode se apresentar
Ora como Documento em formato .css, independente do HTML
Ora como Conteúdo de um HTML em formato .html, dentro de <head> no formato
<style type="text/css“ media=“screen”></style>
Ora como Propriedade de uma tag HTML no formato <taghtml style=“color: #000000”></taghtml>

11. Ambiente Web: Escrevendo
• HTML • CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 html, body, div, span, applet, object, iframe,
Transitional//EN" h1, (...) ,menu, nav, output, ruby, section,
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- summary, time, mark, audio, video {
transitional.dtd"> margin: 0;
<html xmlns="http://www.w3.org/1999/xhtml"> padding: 0;
border: 0;
<head> font-size: 100%;
<meta http-equiv="Content-Type" font: inherit;
content="text/html; charset=utf-8" /> vertical-align: baseline;
}
<title>Untitled Document</title> body {
line-height: 1;
</head> }
ol, ul {
<body> list-style: none;
</body> }
table {
</html> border-collapse: collapse;
border-spacing: 0;
}

12. Ambiente Web: Chamando CSS como Documento em HTML
• HTML (C:/Desktop) • CSS (C:/Desktop/Estilo.css)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 html, body, div, span, applet, object, iframe,
Transitional//EN" h1, (...) ,menu, nav, output, ruby, section,
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- summary, time, mark, audio, video {
transitional.dtd"> margin: 0;
<html xmlns="http://www.w3.org/1999/xhtml"> padding: 0;
border: 0;
<head> font-size: 100%;
<meta http-equiv="Content-Type" font: inherit;
content="text/html; charset=utf-8" /> vertical-align: baseline;
}
<title>Untitled Document</title> body {
line-height: 1;
<link rel=stylesheet href=“Estilo.css" }
type="text/css" media=“screen”> ol, ul {
list-style: none;
</head> }
table {
<body> border-collapse: collapse;
</body> border-spacing: 0;
}
</html>

13. Ambiente Web: Chamando CSS como Conteúdo
• HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 body {
Transitional//EN" line-height: 1;
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- }
transitional.dtd"> ol, ul {
<html xmlns="http://www.w3.org/1999/xhtml"> list-style: none;
}
<head> table {
<meta http-equiv="Content-Type" border-collapse: collapse;
content="text/html; charset=utf-8" /> border-spacing: 0;
}
<title>Untitled Document</title>
</style>
<style>
html, body, div, span, applet, object, iframe, </head>
h1, (...) ,menu, nav, output, ruby, section,
summary, time, mark, audio, video { <body>
margin: 0; </body>
padding: 0;
border: 0; </html>
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

14. Ambiente Web: Chamando CSS como Propriedade
• HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body style=“line-height: 1;”>
</body>
</html>

15. Ambiente Web: Editando
• Editores
• Windows: Adobe Dreamweaver, Notepad++, Aptana IDE, Komodo IDE, NetBeans IDE, Eclipse IDE
• Mac: Coda e TextMate
• Comparativo (por nível de configuração)
• Adobe Dreamweaver
• Notepad++
• Coda e Textmate > Aptana IDE
• Komodo IDE
• NetBeans IDE e Eclipse IDE

16. Ambiente Web: Gerenciando Arquivos
• Via FTP
• Programas
FileZilla
Windows Explorer
Putty
• Via Editores
• Dados para gerenciamento de conta
• Cpanel
Endereço (IP), Usuário e Senha
http://158.157.145.35, sitedaturma, senhapadrao
• Arquivos (FTP)
Host, Usuário e Senha
http://seusite.com, usuáriopadrao (usuário@subdomínio.com), senhapadrao (ou anônima ou sem senha)
• PHP MyAdmin
http://122.232.456.32/phpmyadmin/, usuáriopadrao, senhapadrao

17. Ambiente Web: Wordpress CMS
• O que são
• Content Managemente System (Sistema de Gerenciamento de Conteúdo)
• Interface Gráfica de Usuário (GUI) através do qual se armazena conteúdo em um banco de dados
• Esse conteúdo é armazenado uma vez e solicitado toda vez que um usuário acessa uma referida página
• Composição: Arquivos de controle (Funções do sistema e Aparência/Tema) + Banco
• Quem usa?
• CNN, Times, O Povo, eBay, People
www.wordpress.org/showcase
• Quem pode usar?
• Qualquer site seja WWW ou intranet
• Wordpress pra quê?
• Blogs, revistas, jornais, institucionais, hotsites, portais (menos usual, limitações)
• .COM x .ORG
• Cloud Computing x Infraestrutura Própria
• Pouco Controle x Total Controle