O Auto Save ..

Venho analisando alguns conceitos básicas sobre Developer Experience(DX) e User Experience(UX), e tenho encontrado algumas questões sobre ações que o usuário/cliente realmente precisa executar. Algumas destas ações geram uma preocupação desnecessária e um desvio do real objetivo(foco) para o qual a aplicação foi criada.

Uma questão antiga que vem sendo discutida é a ação de salvar(botão salvar) seus dados a partir de um formulário( ou ações parecidas), que na maioria das aplicações, depende da ação do usuário.

Isso deveria ocorrer somente em aplicações que realmente o usuário deva realizar a ação de click ou touch na opção de salvar, enviar, etc.  Onde vemos isso? Vemos em casos de ações de envio obrigatório para geração de logs e registro da ação como um “concordo” por parte do usuário. Nestes casos e certamente em muitos outros, isso seja necessário.

Algumas aplicações como WordPress e apps mobile a ação de “auto save” é quase que obrigatório. Mas e quando isso não é necessário!?

Está ação deve ser muito bem analisada e projetada , por não aplicar-se em muitos casos, dependendo muito da aplicação, dos seus potenciais usuários e principalmente da sua simplicidade de entendimento e foco.

Simplicidade. Está palavra cada vez tem mais impacto e todos a conhecemos por ser muito utilizada na Apple, em seus aplicativos e equipamentos. E hoje em dia vem tomando cada vez mais força.

Quando possível, devemos disponibilizar o que foi auto salvo para que o usuário possa ter acesso, como ocorre com o gmail(exemplo).

Claro que isso já não se aplica facilmente para aplicações mobile. Para estes, é possível manter os dados mesmo que o usuário troque de tela. Permitindo que ao retornar ele possa dar continuidade e assim submeter seus dados ou simplesmente descartar.

Como mostra o post do Bruno Oliveira em um trecho do resumo (TL;DR):

(https://plus.google.com/u/0/102451193315916178828)

Indiferente da simplicidade deste post, da crença e principalmente da experiência em UX e DX de muitos, acredito que tenho mais um item adicionado a minha lista como default.  Mantendo a analise crítica caso-a-caso.

Bom, podemos sempre melhorar 😀

Javascript, Debugger e Logging Para Firebug

Cada vez mais me surpreendo com as possibilidades e o poder do javascript, na sua mais ampla forma de utilização.
A última foi a possibilidade e interação com o firebug, além de simplesmente substituir as funções de “alert();”, o que para muitos, não é nenhuma novidade.
Entre elas a possibilidade de procurar valores de variáveis em determinados pontos de códigos, exibir uma estrutura XML, e muitas outras. Aperfeiçoando a DX (Developer Experience).

firebug

Entre os exemplos mais simples encontrados temos:

console.log
A maneira mais fácil escrever para o console do Firebug, podendo passar tantos argumentos quanto você quer e eles serão unidos em uma fileira, conforme os exemplos: console.log(“hello world”) , console.log(2,4,6,8,”foo”,bar) .

 

 

 

 

 

 

Código de cores
Além console.log , existem várias outras funções que você pode chamar para imprimir mensagens com uma distinção colorido visual e semântica. Estes incluem console.debug , console.info , console.warn , e console.error .

 

 

 

 

 

 

Timing e profiling
O Firebug permite duas maneiras fáceis de medir o desempenho JavaScript. Uma delas é chamar o console.time(“timing foo”) antes do código que você quer medir, e então console.timeEnd(“timing foo”) depois.

O Firebug, então, registra o tempo que foi gasto entre elas. E o profiler JavaScript. Basta mandar para o console.profile() antes do código que você quer medir, e então console.profileEnd() depois, mais simples não! O Firebug irá registrar um relatório detalhado sobre quanto tempo foi gasto em cada chamada de função entre elas.

 

Como falei, as possibilidades são muitas e excelentes.

 

Fonte(s):
http://getfirebug.com/logging

HTML5 – Parte 2

Continuando um pouco nosso HTML5, e finalizando, já que a idéia era apenas dar uma olhada paran entender um pouco as “novidades”.
Sobre internalização
O HTML5 nos da um bdi, que permite aos autores substituir o algoritmo bidirecional Unicode e fazer o texto mais compreensível.
para saber um pouco mais sobre bdi “HTML5(http://rishida.net/blog/?p=564)”.

Alguns idiomas tem scripts que não são alfabéticos em tudo, mas que expressão uma idéia, em vez de um som. O HTML5 nos da 3 novos elementos para marcação de texto ruby: ruby, rt e rp.
para saber um pouco mais(http://my.opera.com/tagawa/blog/the-html5-ruby-element-in-words-of-one-syllable-or-less)” by Daniel Davis.

A maioria das pessoas estão cientes de que HTML5 nos dá muitos novos elementos para descrever partes de uma página da Web, como header , footer , nav , section , article , aside e assim por diante.

A representação de uma figura com algum conteúdo de fluxo, opcionalmente, com uma legenda, que é auto-suficiente e é normalmente referenciado como uma única unidade do fluxo principal do documento.

O elemento pode assim ser usado para anotar ilustrações, diagramas, fotos, listas de código, etc …

<picture alt=”angry pirate”>
<source src=hires.png media=”min-width:800px”>
<source src=midres.png media=”min-width:480px”>
<source src=lores.png>
<!– fallback for browsers without support –>
<img src=midres.png alt=”angry pirate”>
</picture>

Há um grande problema com isso. Em navegadores que não suportam figuras, a imagem não seria exibido, pois o figura elemento seria completamente ignorado. O conteúdo do elemento credit seria exibido, porque é apenas texto.  Então, você poderia pelo menos mostrar estes créditos para qualquer imagem em navegadores mais antigos.

HTML5 tem um time elemento, isso permite que você possa anotar uma data legível. Não importa o que se passa entre as tags, porque esse é o conteúdo para as pessoas lerem.  Então, você poderia usar um dos seguintes:

 

<time datetime=”1982-07-18″>The day the woman I love was born</time>

<time datetime=”1982-07-18″>Priyanka Chopra’s birthday</time>

Seja qual você escolher, a máquina ainda sabe a data que você quer dizer por causa do atributo datetime, formatadas como YYYY-MM-DD .

Se você quiser adicionar um tempo, você poderia: separar o tempo entre a data com um T , e depois colocar o tempo no formato de 24 horas, terminada por um Z , junto com qualquer fuso horário offset.

Por exemplo, 2011-11-13T20:00Z would be 8:00 pm on 13 November 2011 UTC, enquanto 2011-11-13T23:26.083Z-05.00 seria pm 23:26 e 83 milissegundos no fuso horário escondendo 5 horas antes de UTC .

E quem disse que HTML(5) era barbada!?

 

HTML5 – http://www.edersonmelo.com/index.php/2011/11/24/html5/

Abraço

HTML5

Uma breve estudada sobre HTML5 e consigo entender o porque de tanta vontade que alguns tem de utilizar, como as API’s: armazenamento local, cache de aplicativos, serviços web, desenho 2-D e similares, mas traz ainda 30 elementos para marcar documentos e aplicativos, aumentando o número total de elementos disponíveis para mais de 100.
A semântica HTML5 é cuidadosamente projetada para ampliar a capacidade atual do HTML, sempre permitindo que os usuários de navegadores mais antigos consigam acessar o conteúdo.

 

 

Alguns elementos de apresentação
Elementos puramente de apresentação, como center, font e big são agora obsoletos. seu papel tem sido perfeitamente usurpado por Cascading Style Sheets. Não significa que você tem que se apressar e recodificar todas as páginas antigas. Pela mesma razão os atributos de apresentação foram retirados elementos de corrente, por exemplo, align a img, table, background no body e bgcolor na table.

O sempre mal utilizado frame, está ausente em HTML5. Se você tem vontade de usa-lo use um velho DOCTYPE para que suas páginas possam validar.
Além deste breve resumo, veja a lista exaustiva do W3C de elementos removidos e atributos (http://www.w3.org/TR/html5-diff/#absent-elements)

 

Elementos de apresentação redefinidos
Nem todos os elementos de apresentação foram retirados, alguns passaram por uma reeducação extensa e brilhante, surgindo uma nova semântica. Por exemplo, o small, já não significa “usar uma fonte pequena”, embora ele irá aparecer em uma folhas de estilo do navegador. Agora small representa comentários laterais, tais como letras pequenas:

Letras pequenas renúncias tipicamente características, limitações, restrições legais, ou direitos autorais. Letras pequenas às vezes também é usado para atribuição, ou para satisfazer requisitos de licenciamento.

O elemento u [agora] representa um intervalo de texto com um desarticulador, embora explicitamente prestados, a anotação não-textual, como a rotulagem do texto como sendo um nome próprio no texto em chinês (uma marca de nome chinês propriamente dita), ou rotulagem o texto como ser grafadas incorretamente.

 

Nova semântica
Todos sabemos que video e audio assim como canvas que permitem gráficos 3-D utilizando webGL, então designers de jogos podem portar seus produtos para web. Como o bom e velho img são incorporados no conteúdo seja um arquivo, um URI de dados ou u JavaScript.
Ao contrário de img, eles tem abertura e fechamento de tags, permitindo fallback, portanto, os navegadores que não suportam a nova semântica pode ser alimentado com algum conteúdo.

Os elementos source e track  são elementos vazios(sem tag de fechamento) que são filhos de video ou audio.

O source aponta para um arquivo de origem diferente(WebM, MP4, Ogg Theora)

 

<audio controls>
<source src=bieber.ogg type=audio/ogg>
<source src=bieber.mp3 type=audio/mp3>
<!– fallback content: –>
Download <a href=bieber.ogg>Ogg</a> or <a href=bieber.mp3>MP3</a> formats.
</audio>

 

Neste exemplo, Opera, Firefox e Chrome irá baixar a versão mais recente do Ogg, enquanto o Safari e IE vai pegar a versão MP3. Chrome pode jogar tanto Ogg e MP3, mas os browsers irá baixar o arquivo de origem na primeira vez que eles entendem.  O conteúdo fallback entre as tags de abertura e fechamento é um link para baixar o conteúdo para o desktop e jogá-lo através de um tocador de mídia separado, e é exibido apenas em navegadores que não pode jogar multimídia nativa.

Para vídeo, você poderia usar um filme flash embutido hospedado no YouTube:

<video controls>
<source src=best-video-ever.webm type=video/webm>
<source src=best-video-ever.mp4 type=video/mp4>
<!– fallback content: –>


</video>

Obrigado e Continua …

 

 

Twitter receberá +- U$$ 100 milhões

Evan Willians co-fundador do twitter, confirmou que a empresa está recebendo, segundo o Wall Street Journal uma quantia que pode chegar a U$$ 100 milhões.

Em comunicado oficial, a rodada de financiamento foi fechada com: Insight Venture Partners, T. Rowe Price, Institutional Venture Partners, Spark Capital e Benchmark Capital.


Orgulhosos em seu agradecimento no comunicado, aos grupos de investidores que já são nossos conhecidos de outras parcerias,”sempre generosas”, a empresa(twitter) promete comprometimento em melhorias na tecnologia, produto e sociedade.

Abraço,
Ederson Melo – @edersonmelo

Google Sidewiki


O Google anunciou Seu mais novo produto, Google Sidewiki , a idéia é ter um sidebar que permita os visitantes adicionarem novas informações ao site que estão acessando.

Google_SideWiki

Uma vez que a barra de ferramentas com Google Sidewiki for instalada no computador, o usuário poderá optar por visualizar no canto esquerdo do navegador as informações que outros internautas adicionaram.

Também poderá fazer suas próprias observações, desde que tenha uma conta do Google registrada.

A barra do Google com Sidewiki está disponível para os navegadores Internet Explorer 6 ou superior e Firefox 2 ou superior. Em outras palavras, nada de Sidewiki no Chrome, o navegador do próprio Google (que recentemente começou a testar extensões). Mas a empresa garante que quer estender o Sidewiki a outros navegadores em breve.

Vai entender.

Fonte: Tecnoblog

Abraço,
Ederson Melo – @edersonmelo