Módulo IInternet: Um Pouco de História• Propósitos Militares•   Novos meios de comunicação•   Guerra Fria•   Meio de Comun...
Internet: Aprofundamento• Comunicações diferentes, protocolos diferentes•   Para a carta, os correios, para a ligação, o c...
Internet: Organizando, padronizando e socializando• Surge a W3C•   Tim Berners-Lee fundou (no MIT, depois de largar o CERN...
Internet: As redes socias                (fonte www.socialmediasa.com.br)‘95                    ‘03                       ...
Internet: A Web 3.0• Novos padrões, novas necessidades•   Cloud Computing    IaaS (Infraestrutura)    PaaS (Plataforma)   ...
Módulo IIAmbiente Web: Noções básicas• Servidores•   Estrutura (Sistema Operacional, Servidor Protocolo + Interpretadores ...
Ambiente Web: O HTML• Noções•   Não é uma linguagem de programação•   Linguagem de marcação: Sim!•   Saber de HTML não faz...
Ambiente Web: O HTML• Tags (Possuem propriedades=‘valores’)•   <!-- ... -->: Comentário•   <a>: Link (ancora)•   <b> e <st...
Ambiente Web: O CSS• Folhas de Estilos em Cascata•   Designação recebida pela estrutura visual de hierarquia em que a ling...
Ambiente Web: Escrevendo• HTML                                         • CSS<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  ...
Ambiente Web: Chamando CSS como Documento em HTML• HTML (C:/Desktop)                            • CSS (C:/Desktop/Estilo.c...
Ambiente Web: Chamando CSS como Conteúdo• HTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0     body {Transitional//EN"    ...
Ambiente Web: Chamando CSS como Propriedade• HTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www....
Ambiente Web: Editando• Editores•   Windows: Adobe Dreamweaver, Notepad++, Aptana IDE, Komodo IDE, NetBeans IDE, Eclipse I...
Ambiente Web: Gerenciando Arquivos• Via FTP•   Programas    FileZilla    Windows Explorer    Putty• Via Editores• Dados pa...
Ambiente Web: Wordpress CMS• O que são•   Content Managemente System (Sistema de Gerenciamento de Conteúdo)•   Interface G...
Wordpress 3 - Criando sites e blogs de sucesso. 1/4
Próximos SlideShares
Carregando em…5
×

Wordpress 3 - Criando sites e blogs de sucesso. 1/4

832 visualizações

Publicada em

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

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
832
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
18
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Wordpress 3 - Criando sites e blogs de sucesso. 1/4

  1. 1. Módulo IInternet: 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
  2. 2. 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
  3. 3. 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
  4. 4. Internet: As redes socias (fonte www.socialmediasa.com.br)‘95 ‘03 ‘05 ‘08Classmates.com Skyblog Youtube Kaixin001 (China)Craigslist Couchsurfing Xanga Yammer MySpace Yahoo! 360 Plurk‘97 Tribe.net Cyworld (China) ‘09Six Degrees.com Last.FM Ning FoursquareAsianAvenue Hi5 Bebo Gowalla‘98 LinkedIn Gather.com ‘10Care2 Open BC/Xing Loopt Google BuzzXanga Netlog (Europa) Renren (China) ‘11‘99 MyHeritage ‘06 Google PlusLiveJournal ‘04 MyChurch PeeperBlackPlanet Flickr QQ‘00 Piczo Windows LiveMiGente mixi Mixi Spaces‘01 Facebook TwitterCyworld Dodgeball Cafe MomRyze Orkut Nasza – KlasaStumbleUpon Dogster (Polônia)Meetup.com Multiply Odnoklassniki‘02 aSmallWorld (Rússia)Friendster Catster VkontakteFotolog Hyves (Rússia)Plaxo Yelp ‘07MyLife (Reunion.com) Vimeo Tumblr Taringa Raverly Basecamp
  5. 5. 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
  6. 6. Módulo IIAmbiente 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
  7. 7. 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>
  8. 8. 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)
  9. 9. 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>
  10. 10. 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; }
  11. 11. 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>
  12. 12. 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;}
  13. 13. Ambiente Web: Chamando CSS como Propriedade• HTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//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>
  14. 14. 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
  15. 15. 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
  16. 16. 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

×