out 30
Cibercultura conteúdo colaborativo, Twitter
A sua “twittosfera” está saindo do controle? Não entre em pânico ainda. Veja a seguir alguns recursos e dicas para continuar sendo produtivo e acompanhar os hypes mantendo alguma sanidade mental.
- Não precisa seguir todo mundo que segue você. É algo gentil, mas aprenda que você pode ter admiradores e sua lista pode ficar impossível de acompanhar. Se resolver seguir, ligue as notificações por instant messenger (IM) e somente receba as mensagens de seus amigos. Desta forma, quando entrar em modo de procrastinação é só acompanhar via Web ou através de algum plugin ou programa cliente para o Twitter.
- Ligue o IM e a notificação por SMS, mas tenha cuidado com quem está na lista de notificação por IM. Seja criterioso senão seu celular não irá parar nunca de apitar.
- Saiba quando citam você ligando o modo paranóia. É possível rastrear todas as mensagens enviadas para você com um tracking. Digite no seu celular ou IM:
track seunick
Para desativar paranóia é só digitar:
untrack seunick
Isto serve para qualquer expressão: “track barcamprio”, “track nickdoseunamorado”, “track dogging São Paulo” e assim por diante.
- Saiba também quando estão falando com você por RSS. Vá até a tela Replies do seu perfil e assine o feed. A melhor ferramenta para isso é um cliente de e-mail, como o Thunderbird.
Os replies são apenas interpretados desta forma quando o post começa com @nick (dica @crisdias). Portanto, o modo paranóia total é mais eficiente o tracking.
- Seus critérios para seguir ou não alguém são apenas seus! Ninguém precisa saber que foi rejeitado porque é um miguxo, um stalker ou um business bullshit generator.
Algumas ferramentas legais:
Se você tem alguma outra sugestão de twittetiquette, faça um comentário neste artigo!
out 23
Web Standards código semântico, estrutura, padrões Web
Um desenvolvimento maduro para a Web conta com bons nomes de arquivos, um diretórios organizados e separação das camadas de estrutura, apresentação e comportamento.
Definimos assim cada uma destas camadas:
Estrutura
A camada de estrutura é formada por uma linguagem de marcação, como o XML, HTML e XHTML. Este arquivo contém o conteúdo do documento, além de informações de indexação e documentos relacionados.
O conteúdo deve ser marcado de modo que seja perfeitamente compreensível para qualquer tipo de usuário, seja ele quem for ou qual seja o dispositivo utilizado. Deve-se marcar cada trecho com seu correspondente, de acordo com a definição do tipo de documento (DTD). No HTML, por exemplo, usamos as tags:
- <p> para parágrafos;
- <a> para links de hipertexto;
- <h1>, <h2> e <h3> para títulos;
- <ul>, <ol>, <li>, <dl>, <dt> e <dd> para listas;
- <table>, <thead>, <tbody>, <caption>, <tr> e <td> para tabelas; e assim por diante.
Cada elemento deve procurar seu melhor correspondente no tipo de documento. Se um elemento ou um conjunto deles não tiver uma boa correlação deve-se usar elementos genéricos:
- <div> para elementos em bloco;
- <span> para elementos em linha (dentro de parágrafos, por exemplo).
A seguir, um exemplo de documento bem simples pronto para a publicação.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Meu site</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script type="text/javascript" src="behavior.js"></script>
</head>
<body>
<h1>Olá mundo!</h1>
<div id="avatar">
<img src="avatar.jpg" width="48" height="48" alt="Foto">
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
onummy nibh euismod tincidunt ut laoreet dolore erat
olutpat. Ut wisi enim ad minim veniam, quis nostation
llamcorper suscipit lobortis nisl ex.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci.
<a href="http://outrosite.com" rel="external"
title="Outro site">link abre uma nova janela</a>.
Lorem ipsum dolor sit amet, sectetuer cidunt ut
dolore magna aliquam erat volutpat.</p>
<p><a href="mailto:eu@provedor.com">mande um e-mail!</a></p>
</body>
</html>
Se somente este código for mostrado ao usuário, é muito provável que ele consiga realizar as tarefas possíveis nesta interface que incluem ler o texto, ver a foto, clicar no link externo e mandar uma mensagem eletrônica.
Nesta camada, são tomadas decisões de conteúdo, como a hierarquia das seções (definidas pelos seus títulos), como será o formato de data, como estruturar um menu de navegação ou um breadcrumb, entre outras. Além disso, é nesta camada que reside boa parte das definições de acessibilidade de uma interface.
Veja um exemplo de página apenas com a estrutura. Perceba que mesmo sem layout ela continua sendo compreensível e que continua funcionando sem JavaScript. Para ver a estrutura de qualquer página use uma extensão para como o WebDeveloper para Firefox e aperte Ctrl+Shift+S.
Apresentação
Na camada de apresentação, está tudo que caracteriza o layout da página. Com o CSS, definimos cores de fontes, fundos, posição dos elementos na página e todas as outras decisões estéticas.
Veja um exemplo de código CSS aplicado ao nosso exemplo de estrutura:
body{
font: 0.8em Arial, Helvetica, sans-serif;
background: url(fundo.jpg) no-repeat;
padding: 140px 0 0 100px;
}
p{
width: 400px;
margin:0;
padding:10px;
background: url(fundo.png);
}
p + p + p{
background: transparent;
}
h1{
width: 400px;
margin-left: -30px;
font: bold 3.5em Georgia,Times New Roman,serif;
color: #93360D;
}
div{
float: left;
margin: 0 10px 0 0;
}
img{
border: 1px solid #000;
}
a{
color: #000;
}
a:hover{
color: #93360D;
}
a[rel="external"]{
background: url(externo.png) center right no-repeat;
padding-right: 13px;
}
a[href ^="mailto:"]{
font-size: 0.85em;
font-weight: bold;
text-decoration: none;
padding: 2px 10px;
background: #E0C284;
}
Separando todas as definições de estilo num documento separado permite melhor gerenciamento de estilos diferenciados de acordo com a mídia. Pode haver um estilo diferenciado para impressão:
@media print{
* {
color: #000;
font-family: Georgia,Times New Roman,serif;
text-decoration: none;
}
p + p + p, img{
display: none;
}
}
Veja o exemplo anterior, agora com a camada de apresentação.
Comportamento
Já na camada de comportamento, estão todos os efeitos e todas as decisões funcionais da interface. Manter a programação separada da estrutura facilita a manutenção e evita erros. Além disso, é mais fácil tratar alternativas para usuários que não possuem suporte a esta camada, como usuários de celular e de quiosques.
No exemplo anterior, clique no link para abrir um site externo em nova janela.
Veremos um artigo mais detalhado sobre scripts não intrusivos mais adiante.
Referências:
out 22
Blogs barcamp, barcamprio, Eventos
Fui seduzida pelo conceito do BarCamp durante o evento no Rio neste fim de semana. Recontrei amigos que não via há séculos. Conheci várias pessoas legais. Algumas pessoas já tinha conversado virtualmente e outras conheci na hora e já estou assinando os feeds.
Spark apresentando o CakePHP para os meninos…
Temos BarCamps marcados para Fortaleza, Curitiba e Belo Horizonte em novembro e já temos grupos para o HadouCamp.
Alguns outros relatos aleatórios:
- BarCampRio: Review, por renata.org;
- BarCamp Rio: Eu estava lá!, por Pedro Giglio;
- Barcamp: as gentes, por Maffalda;
- BarCamp Rio 2007: Resumo das Atividades, por Nick Ellis;
- Mairus Webber foi ao BarCamp Rio, por Mairus Weber.
out 16
Marketing computação ubíqua, Wireless
Existe esta praga no Second Live, o camping. Para aparecer bem na busca interna do jogo é necessário ser popular e para isso é requerido muitos visitantes por semana. Alguns donos de ilhas incentivam o tráfego de avatares com o camping: o avatar fica sentado sobre uma almofada encriptada e ganha um ou dois Lindens para cada dez minutos que permanecer lá. Ele ganha para não fazer nada, apenas para estar lá marcando presença.
Para um jogador iniciante e pão-duro, parece um bom negócio, mas na verdade não é. Há poucas almofadas disponíveis, muitos concorrentes vigiando as almofadas e quando se consegue uma arrecada-se uma merreca. Como há bem mais newbies do que qualquer outra coisa, estas regiões conseguem mesmo ficar bem populares.
Notinhas ali e acolá me fazem pensar quando teremos práticas semelhantes ao camping na vida real em breve.
- Existe mercado: Todas nossas pespectivas de futurologia nos levaram a pensar que estaremos cada vez mais introvertidos e trancados dentro de nossos ambientes nos primeiros nos deste século. Redes sem fio públicas e gratuitas estão revertendo esta pespectiva aos poucos. Cada vez mais temos uma revalorização do espaço público para algum ócio, alguma diversão e muita socialização. Podemos ver isso pela multiplicação de eventos como o BarCamp, BlogChopp e afins entre os tech early adopters.
- Existe tecnologia: Qualquer um pode implementar uma rede sem fio em seu escritório, residência ou buteco. O custo inicial é só de um bom roteador wi-fi e o custo mensal é de um plano básico de banda larga. Muitos restaurantes grã-finos já implementaram a idéia há alguns anos juntamente com as administradoras de aeroportos. Hoje em dia, encontramos hotspots até em restaurante a quilo.
- Existem potenciais patrocinadores: Iniciativas como o Cidade Limpa em São Paulo podem reduzir muito o poder das marcas no espaço público de uma cidade. Imagine um hotspot em um parque ou shopping patrocinado por uma marca. Seria um modelo de negócio semelhante ao começo da Internet grátis no final dos anos de 1990 só que mais limpo e mais claro.
Em algum momento, em um país que adora tudo que não é pago, acesso gratuito à Internet deixará de ser algo desejável em um estabelecimento para se tornar uma forma de trazer clientes e fazê-los circular por certos pontos. Usuários de celular irão cada vez mais optar por aparelhos com wi-fi, aumentando o mercado e potencializando estes hotspots patrocinados. A demanda por desenvolvimento para websites para dispositivos móveis irá crescer na mesma medida.
Referências:
Twitter
Linkedin
Delicious
Posterous
RSS
Redes