Wordpress 3 - Criando sites e blogs de sucesso. 1/4
1.
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
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>
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