BlogStop Brasil

Google Wave

2009-06-01T17:13:00.002-03:00

Você não deve conhecer muito sobre essa nova "onda" e, possivelmente, só ouviu alguns rumores sobre ela. Mas esteja certo de uma coisa: antes do final deste ano, seus amigos bloggers já estarão utilizando, e você, provavelmente, também estará.

Estamos falando do Google Wave. A nova tacada da mega empresa online, a Google.

Nesses próximos tópicos, você entenderá o quão esse novo 'aplicativo online' poderá ser revolucionário e um pouquinho mais sobre a empresa que o está desenvolvendo.

Espero que goste do artigo.

Web 2.0 - Enfim Web 2.0

2009-05-28T17:39:00.008-03:00

Em 2003 baixar música pela internet tornou-se legal. A empresa virtual da Apple, de Steve Jobs, o iTunes, vendia músicas por $ 0,99.

Apenas 11 meses mais tarde, em fevereiro de 2004, o estudante de Harvard, Mark Zuckenberg, criou um dos maiores fenômenos virtuais dos EUA: o Facebook. Era o surgimento das redes sociais. O Facebook é nos EUA a mesma coisa que o Orkut é no Brasil.

No mesmo mês do Facebook, outro site de compartilhamento foi lançado, o Flickr. Esse site permite que seus usuários hospedem fotos e as compartilhem gratuitamente na internet.

Em março do mesmo ano, a Google lançaria um dos seus principais produtos: o Gmail. Um e-mail que possui uma quantidade de espaço muito maior que seus concorrentes.

Segundo o canal Discovery, em abril de 2004 foi cunhado o termo Web 2.0, para “definir o uso da WWW que busca aumentar a criatividade, o intercâmbio de informação e a colaboração entre usuários”.

Para inaugurar de uma vez a era da internet colaborativa, em fevereiro de 2005, Chad Hurley, Steve Chan e Jawed Karim dizem ao mundo: “A gente se vê no YouTube”. O site de compartilhamento de vídeos foi considerado o invento do ano pela revista Time. A Google adquiriu o site por nada menos que 1 bilhão e 650 milhões de dólares em outubro de 2006.

Em junho de 2007, a Apple lança o iPhone, celular capaz de se conectar à internet. Inicia-se a era da internet móbile.

<< Quarta Parte - Momento de Transição

Web 2.0 - Momento de Transição

2009-05-28T17:39:00.006-03:00

Paralelamente ao boom das “empresas ponto com”, a internet se desenvolvia rapidamente.

Em 1997 surgiu o primeiro Weblog (diário da internet), criado por Jorn Barrer. Um ano mais tarde, em setembro de 1998, Larry Page e Sergey Brin fundariam a empresa mais conhecida da web, a Google Inc. A empresa era detentora do melhor sistema de buscas de toda a rede, criado em 1996.

Em 1999, um estudante de Boston chamado Shawn Fanning, envia a 30 amigos um programa simples e criado por ele próprio com o nome Napster, que possibilitava o compartilhamento de músicas. Por mais que Fanning tivesse pedido para que ninguém falasse sobre o programa, em poucos dias, 10 mil estudantes já haviam baixado o Napster.

Logo o computador do quarto de Fanning, na faculdade de Boston, já ocupava 80% de toda a internet da universidade. Foi quando o garoto foi descoberto. O Napster foi levado à justiça e obrigado a encerrar suas atividades.

Contudo, o Napster havia aberto as portas para uma infinidade de outros programas semelhantes, que são utilizados até hoje.

Em julho de 1999 é criado o Messenger, o conhecido programa da Microsoft. Um mês mais tarde a pequena empresa Pyra Labs desenvolve a plataforma de publicação de blogs, o Blogger. O programa foi comprado pela Google em 2003.

Jimbo Wales, inicia seu projeto mais audacioso em janeiro de 2001, enciclopédia colaborativa virtual denominada Wikipédia.

A internet já estava em plena transformação.

Última Parte - Enfim Web 2.0 >><< Terçeira Parte - A Bolha

Web 2.0 - A Bolha de 14 de Abril de 2000

2009-05-28T17:38:00.005-03:00

Dois anos mais tarde, em 1997, quando o site de número 1 milhão foi criado, uma forte onda especulativa toma conta das bolsas de valores do Ocidente, baseada na super valorização das empresas vinculadas à internet.

À frente desta onda, estavam a Amazon.com e o Ebay.com. O primeiro era uma livraria virtual que exportava livros para mais de 25 países logo em seu primeiro mês de existência. O Segundo era um site onde as pessoas poderiam leiloar coisas que não queriam mais.

Quando abriram seu capital em Wall Street, as ações dessas empresas fecharam em alta astronômica e o mesmo se seguiu com uma infinidade de outras empresas virtuais.

Contudo, a velocidade com que essas empresas emergiram foi igual ao tempo necessário para explodir A Bolha. E em 14 de Abril de 2000, conhecida como sexta-feira negra, a Nasdaq caiu incríveis 335 pontos, fechando uma semana horrível, onde o índice havia caído mais de 25%. Esse era o maior colapso da bolsa de valores até então. Por coincidência, era neste mesmo dia, há 88 anos atrás, que o Titanic havia se chocado contra o iceberg.

Mesmo com o desespero que se instalou em Wall Street graças ao colapso, A Bolha ajudou em muito a propagação da Internet. Graças à valorização das empresas virtuais, o investimento em infra-estrutura e coleta de informações sobre a internet alavancaram a web de uma forma extrema. Abrindo espaço para o surgimento de uma nova internet.

Quarta Parte - Momento de Transição >><< Segunda Parte - A Web 1.0

Web 2.0 - A Web 1.0

2009-05-28T17:37:00.004-03:00

Quando a internet começou a se popularizar na segunda metade dos anos 90, pouco podíamos fazer com ela. Sua utilização estava restrita às universidades norte-americanas, nas mãos de professores e alunos que pesquisavam e publicavam seus estudos na web.

Nessa época, a rede não passava de um punhado de textos jogados ao acaso e encontrar alguma coisa no meio de milhares de websites era uma tarefa difícil.

Em 1995 surgiu o Yahoo!, criado por dois despretensiosos estudantes: Jerry Yang e David Filo. Os dois passavam horas e mais horas dividindo sites em categorias e subcategorias. Era o surgimento do primeiro sistema de buscas.

Nesse mesmo ano, surgem duas empresas que mais tarde seriam as líderes da revolução das “empresas ponto com”, a Amazon e o Ebay. Uma revolução que acabaria em 2000, com a sexta-feira negra. Esse período ficou conhecido como A Bolha.

Terceira Parte - A Bolha >><< Primeira Parte - O que é Web 2.0?

Web 2.0 - O que é Web 2.0?

2009-05-28T17:35:00.004-03:00

Muita coisa se fala sobre a Web 2.0. Porém, o verdadeiro significado deste termo ainda é incerto.

De uma maneira geral, a Web 2.0 indica as mudanças sofridas pela Internet nos últimos anos.

Desde o surgimento da World Wide Web (ou WWW) até os dias atuais, a rede que interliga nossos computadores sofreu diversas alterações de ordem física, digital e também comportamental.

A Web 2.0 resume a “nova cara da Internet” e faz parte de uma revolução virtual que começou em meados dos anos 1990 e perdura até hoje.

Nos próximos subitens, você conhecerá melhor este conceito e como você poderá utilizar essas novas ferramentas em seu dia-a-dia.

Segunda Parte - A Web 1.0 >>

Podcast 2 - Princípios Básicos do CSS

2009-05-20T15:28:00.002-03:00

Segundo episódio, pessoal. Feito ao vivo em uma palestra na cidade de Bauru - SP.

O capítulo fala sobre como começar com CSS. Sua declaração básica e explica os três elementos que a compõe.

Dicas e sugestões é só comentar.

Este conteúdo será substituído pelo player

CSS - Seletores

2009-05-18T22:41:00.001-03:00

Você lembra da estrutura fundamental do CSS?

seletor { propriedade: valor }

É bem simples não?

Hoje vamos aprender os traquejos que envolvem os seletores.

Os seletores são o elemento HTML, classe ou ID ao qual se pretende atribuir uma propriedade.

Tendo isso em mente, vamos analisar esses três tipos de seletores e suas combinações. Compreendendo bem essa parte do CSS, você poderá reduzir muito seus códigos no Blogger. Pois cada elemento widget possui um ID diferente, e entendendo como utilizar essas ferramentas, será simples atribuir características a vários widgets.

Elemento HTML

Elemento HTML ou TAG é todo elemento utilizado para construir páginas com a linguagem HTML.

Veja todos os elementos (TAGs) existentes que podem ser utilizados hoje em dia.

<'!-->
<'!DOCTYPE>
<'a>
<'abbr>
<'acronym>
<'address>
<'applet>
<'area>
<'b>
<'base>
<'basefont>
<'bdo>
<'big>
<'blockquote>
<'body>
<'br>
<'button>
<'caption>
<'center>
<'cite>
<'code>
<'col>
<'colgroup>
<'dd>
<'del>
<'dfn>
<'dir>
<'div>
<'dl>
<'dt>
<'em>
<'fieldset>
<'font>
<'form>
<'frame>
<'frameset>
<'head>
<'h1> - <'h6>
<'hr>
<'html>
<'i>
<'iframe>
<'img>
<'input>
<'ins>
<'kbd>
<'label>
<'legend>
<'li>
<'link>
<'map>
<'menu>
<'meta>
<'noframes>
<'noscript>
<'object>
<'ol>
<'optgroup>
<'option>
<'p>
<'param>
<'pre>
<'q>
<'s>
<'samp>
<'script>
<'select>
<'small>
<'span>
<'strike>
<'strong>
<'style>
<'sub>
<'sup>
<'table>
<'tbody>
<'td>
<'textarea>
<'tfoot>
<'th>
<'thead>
<'title>
<'tr>
<'tt>
<'u>
<'ul>
<'var>

Bunito, né? Puuuxaaaa.. então todos esses elementos podem receber estilos por meio do CSS?

Não. Nem todos podem receber estilos por CSS e nem por qualquer outra forma.

Porém, os principais (que são os que você irá utilizar) podem receber os estilos, ou seja, são seletores.

Por exemplo:

body { ... }
ul {...}
li {...}
div {...}
form {...}
h1 {...}

E assim, você vai atribuindo estilos para cada uma dessas TAGs HTML. Elas deixarão de ter as características padrão para obedecer ao que você determinou em sua folha de estilos, que é o arquivo CSS que contém as informações de estilo ou o trecho de código do seu HTML que possui essas informações.

Classe

Lembra da 7-B (Sétima B)? Sua sala do ginasial? Bom.. as classes em CSS são praticamente a mesma coisa. Como assim??

Imagine se todas as pentelhas das crianças do ginásio assistissem aula juntas! Nunca que uma criança da primeira entenderia a lição de uma criança da oitava. Por isso elas são separadas, para que possam cada coisa ficar no seu lugar.

Colocar o amendoim no lugar do amendoim é tarefa para as classes.

Quando você cria uma classe, você precisa saber para que você precisa dela. Então, por exemplo, eu quero criar subtítulos para minhas postagens. Então eu preciso que os subtítulos possuam um design diferente do resto do texto. É nisso que trabalharemos.

Depois, você dá o nome achar melhor. Por exemplo: .subtitulo.

Em seguida, você atribui a essa classe, os atributos que você quer:

.subtitulo {
font-size: 13px;
font-weight: bold;
color: rgb(152, 133, 14);
...
}

Continuo depois..

Princípios Básicos do CSS (Parte 1)

2009-05-17T10:13:00.007-03:00

Galera, resolvi dar uma parada com o especial Código Blogger, para podermos passar alguns fundamentos em CSS antes de continuarmos.

Se você não faz a mínima idéia do que é CSS, veja nossa outra postagem Para que serve o CSS.

Bom.. CSS é coisa simples. Vamos começar com a declaração específica desta linguagem:

seletor { propriedade: valor }

Seletor é o elemento ao qual você pretende atribuir determinado estilo. Pode ser uma TAG HTML (p, div, table, h1, img etc..)

uma classe (.sidebar, .cabeçalho1, .cabeçalho2 etc..)

um ID (#Feed1, #LinkList1, #HTML1 etc..)

ou uma junção desses três.

Propriedade é o que você pretende mudar ou criar. É a propriedade que será modificada ou criada dentro do elemento que você escolheu.

Exemplos: color, font-size, background-color, height, width, margin etc..

Valor é a qualificação ou quantificação que você atribui à propriedade escolhida.

Exemplos: blue, 11px, green, 100%, 975px, 1.5em etc..

Um exemplo disso tudo você tem abaixo:

div {
color: rgb(0, 172, 255);
background: url('figura_de_fundo.png');
margin: 5px;
margin-right: 7px;
font-size: 13px;
}

O div é o seletor, ou seja, o elemento HTML ao qual as características serão atribuídas.

As propriedades são: color, background, margin, margin-right e font-size.

E os valores, é claro, são: rgb(0, 172, 255), url('figura_de_fundo.png'), 5px, 7px e 13px.

Note que depois de cada declaração nós utilizamos o ponto-e-vírgula ; Essa declaração é obrigatória, portanto, não se esqueça.

Obs.: Ela é facultativa no último elemento, mas é recomendado colocar mesmo assim, para não causar problema depois.

E não se preocupe que nós ainda faremos uma lista com as principais propriedades para você saber o que pode e não pode fazer com seus seletores.

Tudo certo, minha gente? Lembrem-se que qualquer problema é só comentar, ok? Ficarei muito feliz em responder às perguntas.

Então, entendido isso, vamos aprender como utilizar melhor os seletores.

Código Blogger 3 - Elementos do Modelo Widget

2009-05-16T16:25:00.004-03:00

Enfim... vamos ver quais são os elementos do Modelo Widget.

Esses elementos foram separados por mim, de maneira arbitrária, para que pudéssemos estudar cada parte em separado. Essa separação não tem nada a ver com HTML, CSS, XML ou qualquer outra coisa. É apenas pra que você possa entender melhor.

Obs.: depois de cada começo de tag '<' eu coloquei uma aspa ' para que o código não fosse executado, na real, essa aspa ' não existe.

Comecemos pela começo:

<'?xml version="1.0" encoding="UTF-8" ?>
<'!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<'html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Esta parte não te interessa, são apenas algumas declarações formais e coisas que você não precisará alterar, pelo menos não agora. Portanto, ignore.

Note apenas que seu blog/site começa com essa declaração:

<'html .... >

E acaba com (última coisa do seu modelo):

<'/html>

Esses são os delimitadores de tudo que acontece no seu site, blog ou o que quer que seja. Tudo deve ser feito entre essas duas TAGs.

Vamos para a segunda parte:

<'head>
<'b:include data='blog' name='all-head-content'/>
<'title><'data:blog.pageTitle/><'/title>
<'b:skin><'![CDATA[/*-----------------------------------------------Blogger Template StyleName: MinimaDesigner: Douglas BowmanURL: www.stopdesign.comDate: 26 Feb 2004Updated by: Blogger Team----------------------------------------------- */

Nesta parte, você tem o começo do HEAD do seu blog. O HEAD contém informações que NÃO aparecem diretamente no seu blog, mas que o organiza e preparam os elementos que podem ser vistos na sua página.

Preste atenção em dois elementos:

1)

<'title> ... <'/title>

Aqui é onde você escolhe o título para o seu Blog. Esse título aparecerá nas abas do navegador e nos mecanismos de busca.

Você pode trocar o elemento <'data:blog.pageTitle/> pelo nome seco do seu blog, ficando assim: <'title>BlogStop Brasil<'/title>

2)

<'b:skin><'![CDATA[/*

Essa TAG será fechada lá em baixo, acima da TAG BODY, dessa forma:

]]><'/b:skin>

Dentro desse código, estarão todas as informações de estilo do seu blog. Em outras palavras, de maneira prática, você encaixará as declarações CSS dentro dessas suas TAGs.

Depois nós temos:

/* Variable definitions
====================
<'variable name="bgcolor" description="Page Background Color" type="color" default="#fff" value="#ffffff">
<'variable name="textcolor" description="Text Color" type="color" default="#333" value="#333333">
<'variable name="linkcolor" description="Link Color" type="color" default="#58a" value="#5588aa">
<'variable name="pagetitlecolor" description="Blog Title Color" type="color" default="#666" value="#666666">
<'variable name="descriptioncolor" description="Blog Description Color" type="color" default="#999" value="#999999">
<'variable name="titlecolor" description="Post Title Color" type="color" default="#c60" value="#cc6600">
<'variable name="bordercolor" description="Border Color" type="color" default="#ccc" value="#cccccc">
<'variable name="sidebarcolor" description="Sidebar Title Color" type="color" default="#999" value="#999999">
<'variable name="sidebartextcolor" description="Sidebar Text Color" type="color" default="#666" value="#666666">
<'variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#999" value="#999999">
<'variable name="bodyfont" description="Text Font" type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
<'variable name="headerfont" description="Sidebar Title Font" type="font" default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<'variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
<'variable name="descriptionfont" description="Blog Description Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<'variable name="postfooterfont" description="Post Footer Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<'variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" value="left">
<'variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right">
*/

/* Use this with templates/template-twocol.html */

Essa parte são definições do próprio Blogger para as cores e fontes do seu blog. Logo logo você já poderá excluir tudo isso. Apenas ignore.

Depois disso, vamos dar de cara com o CSS, começando pelas definições para a TAG BODY. Prepare-se que é aqui que você vai começar a trabalhar.

Código Blogger 2 - Fazendo Backup do seu Modelo

2009-05-16T15:58:00.000-03:00

Então.. chegamos finalmente ao código.

Antes de começarmos, vamos apenas explicar dois recursos desta área.

Dê uma olhada na figura abaixo (clique para ampliar em outra janela):

Existem duas linhas. Na primeira, você faz o download do seu modelo atual. Ou seja, você passa para um arquivo tudo que está escrito no seu modelo.

Na segunda linha, você faz o upload dos arquivos de seu modelo que você salvou em seu computador. Resumindo, o primeiro baixa e o segundo carrega.

Agora, sempre que for alterar alguma coisa mais arriscada no seu modelo, compensa fazer o download, porque se você não conseguir voltar ao que era antes, é só fazer o upload na segunda linha para recuperar como ele estava antes das alterações.

Faça então o download, apenas para treinar, e leia nossa próxima dica.

Código Blogger 1 - Preliminares

2009-05-16T15:38:00.001-03:00

Finalmente chegamos ao nosso querido código.

Se você ainda não entende direito o Blogger, recomendo ler nossa primeira coleção para iniciantes, Modelo Blogger.

Bom... se você chegou até aqui, agora é hora de apertar o cinto. Vamos começar a estudar a parte mais difícil, porém, mais criativa do layout do seu blog. Vamos mexer nas entranhas do site, onde uma letra pode destruir todo seu trabalho.

Crises neuróticas à parte, vamos agora aprender HTML e CSS integrados ao Modelo Widget, o modelo do novo Blogger. Vamos conhecer também as tags e declarações específicas deste modelo.

Bom.. antes de mais nada, você deve ter um conhecimento básico em HTML e CSS, o que é muito simples. Aqui mesmo no BlogStop Brasil apresentaremos e discutiremos essas linguagens com você.

Existem diversas apostilas e turoriais espalhados pela net, onde você pode estudar essas linguagens com calma e profundamente.

Sobre as especificações da linguagem do Blogger, não existem apostilas específicas sobre os elementos, mas o Blogger Help possui explicações básicas, em inglês, sobre os elementos do Modelo Widget.

Essas coisas definidas, clique na Aba Layout e depois na sub-aba Editar HTML.

Já cliquei, para o próximo >>

Modelo Blogger 4 - Entendendo a aba Layout

2009-05-16T00:57:00.001-03:00

Agora que você terminou sua primeira postagem, vamos mexer na estrutura do seu blog.

O que vamos fazer agora, é adicionar elementos e funcionalidades ao seu site. Prepare-se que agora a coisa vai ficar divertida.

Clique na aba Layout.

Você terá algo mais ou menos assim:

Você utilizará apenas as sub-abas que estão circuladas em azul, esqueça as sub-abas com um X vermelho, para o seu próprio bem.

Note os elementos contornados em verde.

O contorno maior circula os elementos "Gadgets" (ou "Widget") que estão ativos no seu blog. Eles aparecem destacados com um marrom mais escuro e um título.

O contorno médio indica onde você deverá apertar para criar um novo Widget (ou Gadget).

O contorno menor mostra onde clicar para editar os Widgets ativos.

Voltando aos contornos azuis, clique na sub-aba Editar HTML.

Estamos indo para o mais legal, o código.

Entendi essa parte.. vamos para o código! >>

Modelo Blogger 3 - Primeira Postagem no Blog

2009-05-16T00:25:00.001-03:00

Escolhido o modelo, iremos para sua primeira postagem no Blogger.

Ela será bem simples. Existem apenas alguns detalhes que você não pode deixar passar. São poucos, por isso, não esqueça.

Veja a imagem com os números:

1) Título: aqui você colocará o título da sua postagem, que será também o link da sua postagem e carregará a url para a sua postagem. Portanto, ele deve ser pensado com muita calma. Na prática, o URL será assim:

http://blogstopbrasil.blogspot.com/2009/05/modelo-blogger-2-qual-o-melhor-modelo.html

Explicando: http:// + nome do blog.blogspot.com/ + ano/ + mês/ + nome da postagem (6 ou 7 palavras - menos se o post tiver menos, mas, nunca, mais)

2) Imagem: o Blogger hospeda aqui suas imagens (você pode vê-las depois em picasa.com). Não se esqueça que você pode usar essas imagens em qualquer lugar e não só na postagem.

3) Editar HTML: quando você acessa esta aba, você passa a ver o código da sua postagem. Você sempre escreverá utilizando esta visão (veja que os recursos diminuíram bastante - mas você não precisará de botões, você saberá escrever os códigos).

4) Marcadores: os marcadores é um recurso fundamental para qualquer blogueiro. Ele organiza as postagens de mesmo tema em páginas próprias. Exemplo: Você tem um post "Viagem a Mongaguá" e outro "Viagem a Paris", ambos podem ter o marcador Viagem, assim, quando seu visitante clicar no link Viagem, verá todas as postagens que tiverem o marcador Viagem.
__________________

Ok? Agora escreva uma postagem de boas vindas com título, marcador e uma imagem. Qualquer coisa que vier a sua cabeça.

Terminei meu primeiro post, continuando >>>

Modelo Blogger 2 - Qual o melhor Modelo?

2009-05-10T23:07:00.001-03:00

Terminando de colocar seu nome e url, vamos para a escolha do modelo do Blogger.

Você terá muitos modelos para escolher. São modelos muito bons, criados pelo renomado Douglas Bowman.

Talvez você encontre algum que lhe sirva. Mas nunca 100%! Nenhum modelo pré-construído vai atender às suas expectativas completamente!

Isso acontece porque somos diferentes e possuímos conceitos estéticos diferentes!

- "Mas eu sou uma exceção, eu adorei o modelo verde e ele é tudo que eu quero.."

Então beleza. Pare de ler este tutorial e vá ser feliz. Mas tenho certeza que você gostaria de trocar uma coisinha, por menor que seja. Pois você é diferente do Bowman e vai querer algo diferente.

Outro motivo para não se render aos modelos prontos é o problema de cair na mesmisse. Não adianta você utilizar o melhor modelo do mundo. Se outra pessoa usa o mesmo, seu site terá uma crise de identidade. E seu visitante não vai achar você original.

Por essas e outras, você escolherá o modelo Minima, que já vem selecionado e continuará a ler esse tutorial, ok?

Escolhi o template Mínima. Já posso continuar >>>

Modelo Blogger 1 - Começando um blog no Blogger

2009-05-10T22:49:00.003-03:00

Ok! Vamos começar!!

Acesse o site: draft.blogger.com.

Faça login com sua conta do Google (a mesma do Orkut, Youtube, Gmail, etc..).

Clique em Criar um blog.

Quando se começa um blog no Blogger, a primeira tela que temos é esta:

Aqui a coisa é simples, escolha um título para seu blog e um endereço. Não não... não é assim tão simples. Bom... para a maioria dos bloggers é simples, mas para você não será. Mas Por quê!!??

O título é extremamente importante e você não vai colocar qualquer coisa ali. O título deve ser escolhido com carinho e você precisa prestar atenção no que vai escolher.

Relacione o título com o conteúdo do seu blog e TAMBÉM faça um trocadilho ou espere até ter uma boa idéia. O visitante precisa memorizar o nome do seu blog na primeira vez em que ele bate o olho.

Ok! Então o título do meu blog sobre futebol será Bola na Rede. Muito bem.

No campo abaixo, você deverá colocar o endereço do seu blog. Ficará assim: suaescolha.blogspot.com

Agora vem a parte chata. É extremamente recomendadíssimo que seu endereço seja o mesmo do título do seu blog. Isso facilita muito para o seu visitante, que precisará memorizar apenas um nome, e não dois (título e endereço).

Agora tente colocar bolanarede.blogspot.com... pépééé!! Já existe. Tente, bolanatrave ... também já exsite. Ok... voltamos à estaca zero.

Seja paciente e tenha uma grande idéia que ninguém já tenha pensado. Assista vídeos no YouTube, leia um quadrinho, veja um filme, qualquer coisa que possa te dar uma idéia. Boa sorte!

Já tive uma grande idéia. Vamos lá! >>>

Entendendo o Modelo do Blogger

2009-05-10T22:34:00.004-03:00

Olá, amigo internauta. Vou começar, com este post, um tutorial muito importante para você que usa como plataforma para seu blog/site o Blogger.

Este é o primeiro post de uma série que vai destrinchar o modelo do Blogger para você.

Você vai deixar de ficar copiando e colando Hacks que você encontra por aí e criar suas próprias soluções (e quem sabe não compartilhar suas descobertas em um blog, hein?).

Colocarei de uma forma que todos possam entender, mas, caso tenha alguma dúvida, não exite em deixar um comentário, ok?

É importante que você tenha paciência e muita calma. Mexer em códigos é na teoria algo bem prático e racional, mas você vai descobrir (às vezes do pior jeito) que o próprio código muitas vezes não entende a si próprio.

Existem várias artimanhas para contornar erros e até mesmo os grandes designers encontram problemas na hora de colocar o amendoim no lugar do amendoim.

Essas coisas explicadas, vamos começar nossa jornada. Preparado?

Estou preparado. Vamos lá! >>>

Hipertexto - Aprofundamento

2009-05-08T00:57:00.001-03:00

A Internet é hoje o meio mais simples e rápido de se fazer pesquisas. Utilizando o imenso banco de dados de toda a rede é possível encontrar quase todo tipo de informação.

As facilidades proporcionadas pela utilização do hiperlink também auxilia na procura de informação de forma ágil e precisa.

Utilizando-se de tais recursos, os sites/blogs agregam em seus serviços a capacidade de aprofundamento, impensável em outros meios de comunicação (imagine você querer fazer uma pesquisa no rádio!).

Como é o próprio leitor que faz sua rota de navegação na rede, é possível disponibilizar links que dêem ao internauta a possibilidade de conhecer mais profundamente determinado assunto.

Esses links podem conter materiais diversos para contextualizar e ilustrar seu post. Podem ser utilizados infográficos, imagens, vídeos, arquivos de som, ou um outro texto escrito, como uma entrevista. Eles podem também levar até outras páginas da rede, como enciclopédias virtuais, ou sites especializados no tema.

O ponto negativo dessa facilidade de inclusão de material na grande rede e simplicidade no momento de encontra-lo é o surgimento de material pouco apurado e sem bases de verificação. O número de sites com informações pouco confiáveis é um fator que diminui a credibilidade do web espaço.

Por isso, não saia falando qualquer coisa de qualquer maneira. Seu trabalho deve passar credibilidade ao seu público. Nunca dê espaço para a ambiguidade, informações dúbias, mal checadas, que não passam confiança.

Essa é, sem dúvida, uma área onde você não pode perder pontos. Tome cuidado.

Hipertexto - Universalidade

2009-05-08T00:44:00.000-03:00

É preciso ter em mente no momento de se estruturar um site/blog, uma característica que apenas a mídia internet possui: a ausência de qualquer tipo de regionalismo.

O conteúdo presente em um website pode ser lido de qualquer parte do mundo, sem qualquer dificuldade para o internauta. Assim, é preciso ter cuidado na utilização de gírias ou expressões conhecidas apenas por determinada faixa etária ou de determinado local.

Evite piadas sobre determinado estado ou país. Nunca se sabe onde estão nossos visitantes mais fiéis.

Esse conceito deve ser repensado caso você já possua um público-alvo determinado. Neste caso, você deve utilizar seus esforços para estar o mais próximo possível do seu público, mesmo que ele exclua determinada classe.

Podcast 1 - Introdução BlogStop Brasil

2009-05-08T00:17:00.000-03:00

Primeiro episódio do nosso podcast.

Introdução que fala sobre o BlogStop Brasil.

Espero que curtam nosso canal.

Este conteúdo será substituído pelo player

Hipertexto - Hiperlink

2009-05-07T14:32:00.000-03:00

É através dos hiperlinks, também chamados de ganchos ou conexões entre as páginas, que o internauta navega de um bloco de texto a outro dentro de um website. Os links precisam deixar claro ao leitor aquilo que ele irá encontrar clicando nele. É muito importante também deixar links para que se possa voltar às matérias anteriores ou à página inicial do portal.

É um elemento essencial para o hipertexto.

Com ele, o texto dos blogs e sites ganham maior dinamicidade, fazendo com que o internauta formule seu próprio caminho enquanto navega nas webpages. Essa facilidade de se transportar de uma página a outra garante ao leitor possibilidades não encontradas em outros meios.

O ponto de vista de diversas fontes sobre um mesmo fato pode ser comparado em questão de segundos. Portanto, é preciso cada vez mais que os profissionais da rede escrevam com seriedade, na eminência de perder seu público, que procurará, sem qualquer dificuldade, outro site/blog que julgue mais confiável.

Portanto, se você quer realmente ser um blogueiro de sucesso ou um ProBlogger, vai precisar aprender as técnicas que passamos aqui no BlogStop Brasil. Elas são necessárias pra que você consiga se diferenciar dos 3 bilhões de blogs de toda a internet.

Hipertexto - Fragmentação

2009-05-07T14:23:00.000-03:00

Os hipertextos não são escritos de forma linear. Eles são escritos de forma fragmentada e agrupados em blocos. Como no webespaço o leitor busca um conteúdo definido, é imprescindível que os sites disponibilizem seu conteúdo fragmentado, para que o internauta decida por si próprio o que ele vai ler.

Não é recomendado, porém, que uma matéria não seja completada em mais de duas páginas, para que o internauta não se perca em caminhos muito longos. “Dificilmente quando estão fazendo leitura multilinear, o usuário volte três ou mais telas, normalmente o usuário avança ou retorna as telas, isto é, a passagem por duas telas” (de DEUS, Ivone Matiko Ivassaki).

A forma fragmentada de escrita possibilita textos mais curtos e, assim, mais atrativos para o usuário. A linguagem da web é rápida e dinâmica. Evite escrever postagens com mais de 2000 caracteres, caso o texto possua mais conteúdo, divida em mais páginas.

Hipertexto - O Texto Dinâmico da Internet

2009-05-07T04:22:00.000-03:00

“Hoje, qualquer texto que tenha sido pensado para ser veiculado na web, de forma dinâmica, pode ser chamado de hipertexto” (MOURA, Leonardo). Desta forma, os diversos textos dinâmicos que compõem os portais podem ser chamados de hipertextos.

O hipertexto tem como principal antecedente um programa criado pelo estudante de mestrado em Sociologia pela Universidade de Harvard, Ted Nelson, que permitia um processamento de texto rápido e eficiente. A partir das possibilidades de tal programa, um novo tipo de texto se desenvolveu e hoje é predominante no estilo de escrita web.

Quando uma página da internet deixa claro ao internauta que existe duas ou mais páginas de conteúdos distintos, permitindo a ele escolher em qual clicar, tem-se um exemplo de hipertexto.

O Hipertexto possui algumas especificações e características próprias. Que veremos nos próximos posts.

HTML - História da Internet (Parte 3)

2009-05-07T02:40:00.000-03:00

<< Parte 2

No Brasil, as discussões sobre a criação de uma rede com fins universitários iniciaram-se em 1989. Em 1991, a Fapesp criou novas conexões. Três anos mais tarde, a responsabilidade pelo uso comercial da rede nacional foi repassada pelo governo à Embratel e à RNP (Rede Nacional de Pesquisas).

O projeto ganhou novos parâmetros em 1995, quando fora criado o Comitê Gestor da Internet, responsável pelo planejamento, implantação e administração da rede.

A população brasileira ainda mal conhecia a internet neste ano. O grande crescimento do número de usuários deu-se em 1996, quando muitas pessoas viram como ela funcionava através da novela Explode Coração, da Rede Globo, que mostrava personagens usando-a.

Seguindo a tendência que surgia, o Grupo Folha lançou o portal UOL (Universo On Line). Já em 1997 a internet se encontrava consolidada no país, com muito conteúdo em língua nacional, facilmente encontrado por diversos sites. Um ano depois, o número de internautas brasileiros já atingia a marca dos dois milhões.

É isso galera. Espero que tenha ajudado vocês a entender como essa brincadeira toda começou. Qualquer dúvida ou correção, deixem comentário, ok?

HTML - História da Internet (Parte 2)

2009-05-07T02:34:00.000-03:00

<< Parte 1

O ano de 1991 foi fundamental para a formação da rede mundial. Foi quando o técnico em informação Tim Berners-Lee desenvolveu a Word Wide Web, ou www, como ficou conhecida, através da descoberta do http, o hyper text transfer protocol.

A conquista destes elementos serviu para conectar qualquer um à rede mundial que surgia. Esse avanço, somado à popularização do PC, fez com que todos pudessem ter um endereço eletrônico e assim passar a vivenciar o “modo de vida web”.

No início da década de 90, a internet ainda era uma ferramenta pouco desenvolvida, com pouca praticidade. Haviam poucos sites e era muito complicado encontrar o que se desejava. O grande trunfo foi concebido em 1993, o chamado browser ou navegador.

O primeiro modelo (Mosaic) ainda não possuía os elementos essenciais para um boa navegação. Estes foram surgir com a criação de um novo modelo: o Netscape. Ele facilitava de tal forma que em apenas um ano e meio já possuía algo em torno de 65 milhões de usuários.

A internet serviu principalmente àqueles que buscavam maior interatividade em um sistema de comunicação, que não podiam ser encontrada na televisão ou no rádio. Os chats, fóruns, comunidades e conteúdos para downloads serviam como chamariz para o público, que consumia os vários produtos vendidos exclusivamente on-line. O conteúdo erótico também foi muito bem explorado para angariar novos usuários.

A Microsoft entrou na disputa com o lançamento do Windows 95, que trazia gratuitamente o Explorer, enquanto apenas o navegador Netscape custava aos seus clientes US$ 49,00. Era o início do império da Microsoft na Web.

Parte 3 >>

HTML - História da Internet (Parte 1)

2009-05-07T02:25:00.000-03:00

A internet surgiu primeiramente no Pentágono, em um momento inicial, quando ainda não se tinha a idéia de quanto ela ainda cresceria. Suas possibilidades não podiam ainda ser vislumbradas.

O engenheiro americano Bob Taylor teve a idéia de ligar os computadores da ARPA (Advanced Research Project Agency), instituição do Pentágono responsável pela pesquisa espacial (anterior a NASA).

Na década de 1960 os militares norte-americanos a utilizavam em suas operações. Em 1973 foi criada a primeira conexão internacional, entre universidades norte-americanas e a Universidade de Londres.

Nos anos 90, a internet passou a se popularizar e a crescer de forma assustadora. Em 1993 ela já contava com quatro milhões de usuários, número que explodiu para 100 milhões em 2002 e a estimativa é de crescimento constante.

Se comparado às outras mídias (como o rádio, que precisou de 40 anos para a sua aceitação, ou a televisão que só foi se difundir entre a grande massa nos anos 50, sendo que já havia sido criada em 1925 pelo escocês John Baird), a internet se difundiu de maneira ímpar, mesmo se considerada a diferença de épocas de criação.

A grande mola propulsora para a disseminação da rede foram os PC’s (Personal Computers), que fizeram as redes migrarem das universidades às residências e escritórios. Através deles foi possível aos usuários adaptarem cada vez mais seu modo de vida às possibilidades oferecidas pela grande rede.

Nos Estados Unidos, já em 1997, 33% dos cidadãos utilizavam o serviço de e-mails e possuíam um endereço de e-mail próprio. Em 2002, 70% das escolas do país já contavam com a internet.

Parte 2 >>

CSS - Para que serve o CSS (Parte 2)

2009-05-06T17:48:00.000-03:00

<< Parte 1

Infelizmente ele precisou pedir mais um dia de prazo, já que estava encabeçando outros projetos e não teria tempo para trocar todos os cabeçalhos a tempo. Que eram mais ou menos assim:

< H1 color="#FF0000"> Cabeçalho < /H1>

Ele teria que mudar o código #FF0000 de todos os cabeçalhos.

Agora imagine se um arquivo exterior, existe um código assim:

H1 { color: #FF0000; }

E caso esse código fosse alterado, trocaria a cor de todos os cabeçalhos H1.

Foi justamente isso que o CSS fez. Com ele, você cria um arquivo que contém todas as informações de estilo que seu site precisa. Facilita muito o trabalho.

O CSS também adicionou várias outros elementos de estilo. Deixando a Web muito mais bonita.

Aqui no Metro Down você vai aprender tim-tim por tim-tim como utilizar essa poderosa ferramenta da Web.

Boa sorte!

CSS - Para que serve o CSS (Parte 1)

2009-05-06T17:46:00.000-03:00

CSS é a sigla para Cascading Style Sheets (o que você já sabia, tenho certeza). Ele foi criado para suprir uma deficiência que o HTML possuía no começo dos anos 90.

Veja você que, na época do surgimento da internet (parece muito tempo, né?), os programadores não se importavam com o design das páginas. O importante era o conteúdo.

Dessa forma, o HTML não apresentava um suporte adequado para a criação de estilos - existiam os cabeçalhos (H1, H2, etc) e outros códigos para se mudar a cor ou deixar em negrito ou itálico.

Bem, agora imagine comigo uma história (fictícia mas não tanto):

Gilbert Simons, um designer que trabalhava na empresa Corel Network Solutions, em 1993, estava terminando um portal para a empresa Full Graphics of LA e seu prazo final era no dia seguinte. Simons estava com o trabalho adiantado e conseguiria terminar o site na noite do dia anterior.

Eis que o cliente liga (responsável pela área de TI da Full Graphics) e pede para que o designer troque a cor de todos os cabeçalhos do portal da cor vermelha para a cor azul, pois em reunião extraordinária, eles haviam resolvido que o azul seria menos invasivo.

Gilbert não podia negar o pedido do cliente, mas logo se confrontou com a dura realidade: ele precisaria mudar um a um os cabeçalhos das 137 páginas que ele havia construído em 3 meses.

Parte 2 >>

A importância das cores na Web

2009-05-06T15:52:00.000-03:00

Designers da web produzem páginas cada vez mais intuitivas e simples. Elas estão bem resolvidas e oferecem ao internauta maior segurança e facilidade na hora de navegar.

Um elemento, no entanto, é sempre utilizado pela intuição e bom senso: as cores.

É claro que é uma vantagem ter um site bonito e com cores harmônicas que se integram ao conteúdo. É óbvio.

Logo, qual o problema da forma como os webdesigners utilizam as cores?

A questão é que as cores não influenciam seu site apenas no quesito estética, mas também em várias outras áreas.

Aqui no BlogStop Brasil você vai entender como que as cores finluenciam no seu site ou blog e como utilizar esses elementos para oferecer um layout mais conivente com seus objetivos e público-alvo.

Espero que curtam os artigos.

O que é ProBlogger?

2009-05-06T02:39:00.000-03:00

"ProBlogger, na concepção real da palavra, é a pessoa que se sustenta através do retorno gerado por um ou mais blogs."

É esta a definição de ProBlogger. Legal, e daí?

Bom tenho que confessar que essa definição há muito tempo vem me chateando. Então, o profissional do Blog é um cara que se sustenta através dos blogs. Muito legal. Mas vejam:

Quem nunca viu site de donwload de filmes que te manda pro Busca Pé sem você querer ou que faz os pobres internautas sem o traquejo da internet se cadastrarem naqueles programas de conteúdo para celular?

Então.. esses sites devem gerar renda suficiente para que o "ProBlogger" responsável possa se sustentar.

Além de enganar seus visitantes e apenas copiar trabalhos dos outros, esse blogueiro ainda recebe o título de profissional. Viu como é legal?

Não tem nada a ver!! O profissional dos blogs tem de ser aquele que domina o ofício, ou seja, que sabe como manipular todas as ferramentas ao seu redor para confeccionar um produto de qualidade superior.

Ele precisa entender de blogosfera, de experiência de usuário, de ROI, de programação, de conteúdo relevante, de interatividade, de design, ter bom senso e feeling.

Essa idéia é muito mais cabível que o simples fato de que o profissional é aquele que "ganha com seu blog".

No BlogStop Brasil você terá tudo que precisa para se tornar um verdadeiro "ProBlogger" (ganhar dinheiro também, mas não apenas isso).

Espero que goste do nosso trabalho.

Sobre o BlogStop Brasil

2009-05-06T02:19:00.001-03:00

Bloggar é um movimento que parece não ter mais volta. O número de blogueiros apenas aumenta com os anos e essa é uma tendência que ainda seguirá por muitos anos.

Com o aumento de pessoas se embrenhando nos caminhos da blogosfera, a qualidade dos layouts dos blogs está aumentando rapidamente. Os novos blogs estão bem resolvidos e oferecem um design atrativo aos seus visitantes.

Mas em qual medida os blogueiros estão se baseando para produzir seus trabalhos? Será que as cores, posição dos elementos, conteúdo, experiência do usuário, publicidade e outros elementos estão sendo utilizados da forma correta?

Não. Os responsáveis pelos blogs de hoje possuem pouco (ou nenhum) conhecimento em técnicas de planejamento gráfico, composição de páginas dinâmicas, intensa experiência de usuário, etc.

Essas habilidades estão concentradas nos profissionais da área. E está mais do que na hora dessas técnicas chegarem aos blogueiros comuns.

Daí surgiu o BlogStop Brasil.

Objetivos

Proporcionar aos nossos leitores técnicas avançadas em planejamento de páginas. Veremos como se usa de maneira correta os grupos de cores, quais os lugares que a visão humana alcança primeiro, o caminho de leitura dos ocidentais e orientais.

Oferecer aos nossos visitantes conhecimento profissional na área de criação e gerenciamento de conteúdos para blogs. Veremos como decidimos os conteúdos relevantes para nosso site, como definir um público alvo, como direcionar os elementos do blog para o público alvo, técnicas jornalísticas para escrever textos para a web e muito mais.

Destrinchar o Modelo do Blogger, explicando cada parte do seu código, para que você tenha o domínio perfeito dos elementos que o compõe; além de estudar tags e atributos básicos em HTML e CSS.

Auxiliar no manejo das ferramentas de análise como o Google Analytics, ensinando como retirar maior proveito das informações coletadas e ainda oferecer alternativas para você ter maior controle sobre seu site.

Ensinar técnicas intensas e sustentáveis de SEO, para que seu blog ganhe posições nos mecanismos de buscas.

Vamos apresentar também as tendências do mundo virtual, como lançamentos de novos programas, surgimento de redes sociais, novos aparelhos e os sites que estão mexendo com a galera.

Isso e muito mais você acompanha aqui no BlogStop Brasil.

Autor

Nome: Renan Biazotti

Contato: renan.biazotti@gmail.com

Capacidades: Graduando em Comunicação Social (Jornalismo) | Conhecimento em programação em HTML e CSS, especializado em criação de blogs no Blogger | Conhecimento básico em manipulação de imagens no Photoshop | Conhecimento em diagramação de páginas (impressa ou virtual) em InDesign | Conhecimento profissional em produção e publicação de podcasts.

Áreas: Jornalismo radiofônico, virtual e comunitário.

SEO - Como ficar em primeiro no Google

2009-05-05T18:07:00.001-03:00

Como ficar em primeiro no Google..

Esqueça!! Não há fórmula mágica para isso. Não existe post ou serviço que coloque seu site em primeiro lugar do Google com certeza (a não ser que eles prometam que vão colocá-lo em primeiro caso alguém procure zSasdXec3F45Fvf).

O que existem hoje são técnicas que tornam sua página mais 'indexável' e te garantem uma maior afinidade com os mecanismos de busca.

Porém, essas técnicas podem ser utilizadas por qualquer um que saiba um pouco de internet e tenha um pouco de paciência.

Enumeraremos nesta seção um apanhado de dicas que vão te ensinar a melhorar a colocação do seu site nos mecanismos de busca em geral e, principalmente, no Google.

Espero que gostem.

CSS - Vertical-Align em Imagens

2009-05-05T11:28:00.000-03:00

Vertical-align em imagens