Loja de discos hippie está em origem de redes sociais

Muitos podem pensar que fenômeno surgiu recentemente, mas primeiros sistemas remontam à década de 1970.

Primeiro computador usado em projeto pioneiro em loja de discos Leopold’s Records, na Califórnia

As pessoas que foram assistir ao filme A rede social no ano passado podem ser perdoadas por achar que a ascensão de sites como o Facebook começou há apenas alguns anos.

Mas para encontrar as verdadeiras origens das redes sociais você deve recuar para bem antes de 2004.

Numa rua em Berkeley, Califórnia, o epicentro da contracultura nos anos 1960 e 1970, eu achei o que poderia muito bem ter sido o local de nascimento do fenômeno.

Do lado de fora do que já foi uma loja de discos chamada Leopold’s Records, o ex-cientista de computação Lee Felsenstein me disse como, em 1973, ele e outros colegas colocaram um computador na loja, perto do mural de recados de músicos.

Eles haviam convidado as pessoas que passavam, em geral estudantes da Universidade da Califórnia, Berkeley, para entrar e digitar uma mensagem no computador.

À época, era a primeira vez que alguém que não estudasse temas científicos foi convidada a se aproximar de um computador.

“Achamos que haveria uma resistência considerável à invasão de computadores no que, segundo pensávamos, era território da contracultura”, explicou Felsenstein.

“Estávamos errados. As pessoas subiam as escadas, e tínhamos alguns segundos para lhes dizer, ‘você gostaria de usar o nosso mural de recados eletrônico, estamos usando um computador.’

“E com a palavra computador os olhos deles se abriam, brilhavam, e eles diziam: ‘uau, posso usá-lo’?”

Logo a máquina estava sendo preenchida por mensagens, que iam de um poeta promovendo seus versos e músicos oferecendo serviços a discussões sobre o melhor local para comprar pães.

O projeto, chamado Memória da Comunidade, sobreviveu por mais de uma década, instalando outros computadores na região de São Francisco. Mas só foi nos anos 1980 que um número considerável de pessoas aderiu à vida online.

Crise da rede

A Well, outra comunidade californiana, era o resultado do casamento entre hippies e hackers, contracultura e cybercultura.

Ela nasceu como resultado de um encontro entre Larry Brilliant, um médico que trabalhava para a Organização Mundial da Saúde (OMS), e Stewart Brand, criador da bíblia hippie dos anos 1960, o Catálogo do Mundo Inteiro.

Brilliant de algum modo articulou uma rede para lidar com crises quando um helicóptero que conduzia uma pesquisa da OMS no Himalaia precisou de um novo motor.

Usando um dos primeiros computadores da Apple, oferecido por seu amigo Steve Jobs, ele conseguiu realizar possivelmente a primeira teleconferência online do mundo.

“Steve me deu um modem acústico”, ele explicou. Nós fizemos a conexão e, de repente, tivemos uma doação de uma motor reserva da Aerospatiale, a Pan Am se ofereceu a levar a peça até Katmadu, a RAF se voluntariou para transportá-la sobre terra até o helicóptero, e 72 horas depois o motor estava no Nepal.”

Ele decidiu que essa poderia ser a base para um empreendimento, e quando ele levou a ideia a Stewart Brand, este concordou.

Logo, o Catálogo do Mundo Inteiro virou a Well – o Link Eletrônico do Mundo Todo.

“Aconteceu de sermos uns dos descobridores de coisas que foram o ponto de partida das que estão na internet”, Brand me disse para a série da Radio 4 A História Secreta das Redes Sociais.

“Você poderia começar algo assim com nada além de uma máquina arrendada, que pegamos do Larry, e um software ruim.”

A Well juntou hackers, hippies e escritores da região da Baía de San Francisco em conversas online que tratavam de temas que iam de tecnologia e política ao sentido da vida.

Após se encontrarem online, eles acabavam organizando festas, um primeiro sinal de que os mundos real e virtual poderiam se fundir.

“Diferentemente do Facebook, nós nos conhecíamos online antes de nos conhecer cara a cara”, disse Howard Rheingold, escritor que cunhou o termo comunidade virtual e um membro influente da Well.

“Muito da comunicação cara a cara se transformou em relações. As pessoas se encontravam e se casavam, casamentos foram rompidos, quando as pessoas adoeciam eram apoiadas, quando as pessoas estavam morrendo elas tinham ajuda.”

‘Vila global’

A Well teve ainda mais abrangência porque se tornou um ponto de encontro para os Deadheads, fãs da banda de rock Grateful Dead.

Ela também deu a John Perry Barlow, um letrista da banda, e posteriormente criador da Electronic Frontier Foundation, sua primeira introdução a comunidades online.

“Encontrei um lugar onde pessoas de todo o planeta poderiam conversar 24 horas por dia”.

E depois de passar 30 anos explorando comunidades virtuais, diz ele, nenhuma chegou perto da original.

“O Facebook é mais um subúrbio global do que uma vila global”, diz ele. “E o que você diz no Twitter dura 20 minutos. Se Cristo tivesse ‘tuitado’ o sermão no morro, teria durado até o entardecer.

“Acho que a última (rede) que vi que realmente parecia que se tornaria uma coisa real foi o que havia na Well”.

Mas não foi só na Califórnia que a ideia de se encontrar e socializar online surgiu.

Na Europa, a britânica Prestel e a francesa Minitel deram a milhões de usuários de telefone o primeiro sabor da comunicação online.

Em muitos outros lugares, o movimento Bulletin Board System (BBS, ou sistema de mural de avisos) se tornou um centro de intensa comunicação sobre variados temas e para qualquer um que pudesse ter um computador pessoal e um modem conectado a ele.

Jason Scott, que quando adolescente era um usuário do BBS em White Plains, Nova York, no fim dos anos 1980, disse que era errada a ideia de que usuários do BBS eram desajustados que viviam suas vidas online:

“O computador era um meio para um fim”, ele explicou.

“Como as chamadas telefônicas de longa distância eram muito caras, os sistemas BBS eram muito locais. Você poderia se comunicar com outras pessoas, mandar mensagens, baixar arquivos, e inevitavelmente alguém diria ‘ei, vamos descer até a pizzaria’.”

Ele ainda é amigo de algumas das pessoas que ele conheceu dessa forma há mais de 20 anos.

Como muitos usuários das primeiras redes, Jason Scott é um assíduo usuário das suas equivalentes modernas – seu gato Sockington é hoje o animal de estimação mais popular no Twitter. Mas os pioneiros não creem que a história tenha terminado.

Felsenstein, que advoga ter começado com tudo, afirma que as redes sociais mudaram sua vida. Ele conheceu sua mulher online, e depois da Memória da Comunidade fez uma carreira em computação.

“Veja”, diz ele, “há muito espaço para inovações. Não creio que o que estamos vendo é o melhor que poderia existir”. BBC Brasil – Todos os direitos reservados. É proibido todo tipo de reprodução sem autorização por escrito da BBC.

Fonte: Estadão.com.br

Integre as postagens ao Analytics

Quem tem blog no WordPress pode usar um plug-in para integrar os posts automaticamente ao serviço de medição de audiência.

Quem tem um blog que usa o sistema WordPress não precisa ficar copiando códigos HTML para integrar os posts ao Analytics.

Vários plug-ins resolvem isso de forma automática. Crie um novo perfil com a URL do blog no Analytics. Depois, na tela de gerenciamento do WordPress, acesse a seção Plugins e clique em Adicionar Novo. No campo de busca, digite Google Analytics for WordPress e pressione Pesquisar Plugins.

Localize o plug-in e acione Instalar Agora. Depois, pressione Ativar Plugin. Na tela seguinte, clique no link Select Which Analytics Profile to Track. Pressione o botão Click Here to Authenticate With Google e, depois, Conceder Acesso.

Com isso, todos os perfis do Analytics serão baixados. Escolha o correto e pressione Update Google Analytics Settings.

Javascript e acessibilidade

Dando continuidade a nossa série sobre acessibilidade, confira algumas dicas para desenvolver sites dinâmicos tendo um mínimo de cuidado com screen readers e navegadores com JavaScript desabilitado.

É muito comum o desenvolvedor ficar empolgado ao descobrir recursos, plugins, animações e efeitos JavaScript e acabar exagerando no produto final. Também é muito comum, como disse a Thaiana, que acessiblidade esteja ligado exclusivamente a sites governamentais. Aos poucos este cenário está mudando.

Além de tornar o seu site acessível à pessoas com necessidades especiais, as técnicas abaixo serão úteis também quando o navegador do usuário estiver com JavaScript desabilitado. E se mesmo assim você ainda não estiver convencido, pense que, quanto menos JavaScript, mais otimizado e estável será o seu site/sistema.

O problema

Acessibilidade, basicamente, significa tornar o seu site/sistema compatível com dispositivos leitores de tela. O que este dispositivo faz é tentar converter todo o conteúdo presente em uma página para uma saída especial, seja ela voz (text-to-speech) ou braille. Por isso a importância da semântica no HTML e, por isso também, a importância do JavaScript não acabar atrapalhando o funcionamento do seu site.

Dependendo da forma como você utilizou JavaScript, parte do conteúdo pode passar batida no screen reader. Isso acontece muito com animações (conteúdos escondidos) e eventos que não são nativos do elemento, como tentar utilizar onClick em um parágrafo.

<noscript>

A prioridade número 1 nas regras para acessibilidade é tornar todo o conteúdo disponível quando o navegador não estiver com JavaScript habilitado. Procure implementar alternativas HTML parecidas com o conteúdo estabelecido por seus scripts.

No entanto, é importante ressaltar que o noscript só vai funcionar quando o javascript estiver dasabilitado no navegador (ele não vai funcionar se o JavaScript estiver com erro, por exemplo). Alguns screen readers tentam interpretar JS, portanto, utilizar JavaScript NÃO significa tornar seu site pouco acessível. Depende da forma como você implementa seus scripts.

Muita gente é a favor da extinção da tag <noscript>. O que eles defendem é que basta você desenvolver seus scripts de forma não-obstrutiva. Seu script pode ser executado ou não – independente disso ele não afetará a funcionalidade básica da página.

Preciso mesmo usar JavaScript?

Sempre que for utilizar algum efeito ou interação em JavaScript você deve se perguntar se ele é mesmo necessário. Ou ainda, não daria pra fazer a mesma coisa utilizando apenas HTML e CSS?

Pense duas vezes antes de implementar qualquer tipo de script. Analise não só a questão da acessibilidade, mas também performance e manutenção.

Não invente eventos e não fique preso ao mouse

Procure utilizar eventos JavaScript apenas em elementos que estão aptos a recebê-los. Por exemplo, não utilize onClick em um <li>. Geralmente, os eventos de interação devem estar associados a links e botões.

Lembre-se também que nem sempre vai ser utilizado o mouse, logo, eventos como onMouseOver e onMouseOut seriam inválidos. Ofereça alternativas globais, como onFocus, onBlur, onClick (que, no teclado, seria executado com a tecla Enter) – visando usuários que utilizam outros dispositivos.

Um problema grave são menus ativados no mouseover. Nesse caso o usuário não teria como acessar todas as páginas – ele não poderia navegar por toda a estrutura do site.

Essas regras estão também diretamente ligadas a conteúdos carregados via AJAX. Dependendo da forma como você ativa o evento, o screenreader vai ler ou não o conteúdo recém adicionado.

WAI-ARIA

Procurando estabelecer um padrão para acessibilidade e conteúdos dinâmicos foi criada a especificação WAI-ARIA (Accessible Rich Internet Applications). O que ela faz é adicionar novas formas de identificar e habilitar funcionalidades dinâmicas através de propriedades nas tags HTML. Recentemente o jQuery UI adicionou suporte total ao framework ARIA tornando assim seus widgets e elementos de interface acessíveis a usuários com alguma necessidade especial.

O ARIA, por exemplo, pode definir regiões em um site e habilitar o movimento via tab entre essas regiões, ao invés de elemento por elemento. O WAI-ARIA também possibilita definir papéis (roles) para elementos como menu, menuitem, banner, application etc.

Este é um assunto muito rico e ainda pouco explorado. Para mais informações visite a especificação do WAI-ARIA no site do W3C e também este tutorial sobre os papéis disponíveis no ARIA.

Configure alertas nas pesquisas no Google e facilite suas buscas

Dizer que o Google é a ferramenta de buscas mais utilizada e com melhor resultado é algo redundante. Mas há vezes em que a tarefa de digitar consecutivamente na busca por nossos assuntos favoritos dá um certo cansaço. Por exemplo, saber as últimas notícias sobre o iPad, sobre uma banda preferida de rock ou ainda as últimas dicas de games pode se tornar algo entediante.

Normalmente, temos esse tipo de informação executando uma pesquisa – mas isso é uma chateação, pois precisamos parar para executar a mesma pesquisa todos os dias ou até várias vezes por dia. O serviço de buscas do Google é muito bom e você pode ajudá-lo a se tornar uma ferramenta ainda mais útil a partir do  Google Alerts.

O serviço funciona como uma espécie de feed RSS que lhe envia o resultado de suas solicitações para seu e-mail. O serviço é gratuito e o único requisito é ter uma conta no Gmail.

Para configurar um alerta, comece por introduzir um ou mais termos de busca, igualmente como faria para uma pesquisa comum no Google.

Em seguida, clique no campo Tipo para especificar qual a fonte que o Google deve usar: Blogs, Web, Notícias ou Grupos, ou, se você quiser todas as anteriores, escolha a opção Completo.

No próximo item escolha com qual Frequência deseja receber os alertas, que pode ser uma vez por dia, uma vez por semana ou sempre que encontrar novas ocorrências.

Ainda é possível escolher quantos itens serão listados no e-mail: em lotes de 20 ou 50 resultados. E, por fim, pode-se decidir receber os resultados por e-mail ou por feed.

O feed seria o RSS, que pode ser lido no Google Reader (se você tem uma conta no Google, então tem também uma no Reader).

A ferramenta, sem dúvida, economiza muito nosso tempo quando estamos na busca por assuntos que demoram para se esgotar ou que se atualizam com frequência.

JQuery para produção de Layouts

O JQuery tem me dado um importante suporte para aqueles problemas que o CSS não consegue resolver por falta de compatibilidade em alguns browsers e também para evitar sujar o código HTML com elementos dispensáveis, em ocasiões comuns como no caso da criação de bordas arredondadas.

Nestes cenários, invarialmente temos que criar alguns elementos agregados que servirão para dar exclusivamente suporte visual para o layout.

Não é bom que sujemos nosso HTML com código que não carregue significado semântico nenhum, mas em alguns casos, como ao fazer bordas arredondadas, a criação destes elementos é necessária. É nesse ponto que o JQuery pode nos ajudar grandemente.

Se você é desenvolvedor client-side, tenha em mente que você não precisa saber programar para aprender JQuery. Sua sintaxe é muito simples e pode salvar sua vida quando ocorre problemas de compatibilidade entre browsers. É o que veremos a seguir: como o JQuery pode nos auxiliar em momentos da falta de suporte do CSS.

Criando elementos dinamicamente

Suponha que você tenha um botão simples, onde as bordas são arredondadas. Para facilitar nosso exemplo esse botão não terá altura variável, apenas largura. Eu poderia fazer duas imagens: uma imagem seria a borda da esquerda e a outra imagem a borda da da direita. Se fôssemos fazer com HTML e CSS puro, o código seria esse:

<a href=”#”>texto do botão</a>

O CSS:

.btn {
border-radius:10px;
}

Talvez eu teria que colocar um prefixo para o Frefox (-moz-) entender a borda arredondada, mas vamos simplificar nosso exemplo.

Os IE7-8 não reconheceriam essa propriedade. Mas se seu cliente precisa de que o suporte seja estendido para esses browsers, não há outra escolha a não ser fazer as benditas bordas (ou qualquer outro problema) funcionar no IE.

Uma maneira simples de ser feita é colocando um backgrounds diretamente no LINK, pode ser a borda da esquerda e em outro elemento definiríamos a borda da direita. Criar um elemento para que sua única função seja manter o padrão visual vai de encontro contra toda a ideia de semântica. Fazendo isso também misturamos aquela teoria de separação de formatação com informação. Mesmo assim essa a única solução. É aí que o JQuery vem nos ajudar. O código HTML, caso fossemos criar um elemento extra, seria:

<a href=”#”>texto do botão <span></span></a>

Para mantermos a integridade do nosso HTML, criaremos esse elemento via JQUERY da seguinte forma utilizando a função append:

$(document).ready(function(){
$(‘.btn’).append(‘<span />’);
});

Já que estes elementos são cridos dinamicamente, os leitores de tela e os indexadores de busca não os leem, logo, o código HTML não fica poluído e você não perde com SEO. A manutenção fica simples de ser mantida e o HTML, se já estiver sob programação server-side não precisará ser modificado manualmente.

Escolhendo elementos específicos

Outro problema muito comum é a necessidade de ter que escolher elementos específicos no Layout sem ter que adicionar manualmente classes ou tendo que fazer uma condição maluca para ter que capturar tais elementos. Isso seria muito simples se utilizássemos o pseudo-elemento nth-child do CSS. O nth-child seleciona determinados elementos em uma árvore de elementos. Por exemplo, você tem uma lista e quer pegar o terceiro ítem da lista, você utilizaria algo assim:

ul li:nth-child(3n) {
color:red;
}

O problema? Nada disso funciona nos IEs. Mas isso é extremamente útil e com JQuery você pode adicionar uma classe nestes elementos para formatar com CSS.

A Home deste site foi feita desta forma. O conteúdo foi criado com um simples LOOP do WordPress que joga o HTML do conteúdo em uma única página. Veja que cada um blocos de texto desta home é diferente. Sem poder utilizar o nth-child eu utilizei a função slice do JQuery:

$(document).ready(function(){
$(‘.homeposts article’).slice(1, 3).addClass(‘destaqueprincipal’);
$(‘.homeposts article’).slice(3, 6).addClass(‘destaquethird’);
$(‘.homeposts article’).slice(6, 10).addClass(‘destaques’);
$(‘.homeposts article’).slice(10, 12).addClass(‘chamadas’);
});

Por exemplo, note essa linha:

$(document).ready(function(){
$(‘.homeposts article’).slice(1, 3).addClass(‘destaqueprincipal’);
});

Aqui eu digo que o primeiro, segundo e terceiro e elemento article de .homeposts terão uma classe adicional chamada destaqueprincipal. E a mesma lógica foi aplicada para os elementos posteriores.

Utilizando seletores complexos

Outro problema é a inserção de classes em elementos do mesmo gênero mas com funções diferentes, como os campos de formulários. Normalmente, quando produzimos um formulário de contato, por exemplo, precisamos diferenciar os inputs de texto, inputs de checkbox, inputs de radio, inputs de submit etc. Pode ser que estes inputs sejam criados dinamicamente pelo framework utilizado para auxiliar na programação back-end. Nesse caso não temos controle manual nenhum.

No melhor dos mundos utilizaríamos seletores complexos para aplicar um estilo específico para um dos elementos. A sintaxe em CSS ficaria mais ou menos assim:

input[type=”text”] {
border:1px solid gray;
}

O código acima define uma borda preta para os elementos input que tenham o atributo type cujo valor seja text. Você faria isso para cada um dos tipos dos inputs que você gostaria de formatar:

input[type=”text”] {border:1px solid gray;}
input[type=”checkbox”] {border:1px solid green;}
input[type=”submit”] {border:1px solid red;}
input[type=”radio”] {border:1px solid yellow;}

Esse código pode não funcionar em alguns browsers, por isso faremos com a ajuda de JQuery.
O código é muito simples e na realidade não foge muito da sintaxe do CSS. Adicionaremos uma classe para cada um destes elementos possibilitando a estilização via CSS por meio dessa classe. O código ficaria assim:

$(document).ready(function(){
$(‘input[type=”text”]’).addClass(‘inputText’);
$(‘input[type=”checkbox”]’).addClass(‘inputCheckbox’);
$(‘input[type=”submit”]’).addClass(‘inputSubmit’);
$(‘input[type=”radio”]’).addClass(‘inputRadio’);
});

Com as classes atribuídas, podemos temos controle total via CSS.

Conclusão

Estas pequenas dicas contribuem para soluções sustentáveis para seu código. Com um pouco de planejamento você conseguirá manter o controle total do seu código e um alto índice de compatibilidade com os browsers atuais no mercado. A diminuição de hacks no CSS também diminui bastante já que com uma mesma solução, você abrange até os browsers mais antigos.

Por: Diego Eis