Começamos eu e o Arthur Corenzan (@haggen) a traduzir o excelente documento do Paul Irish e outros grandes front-end developers afora, que fala sobre boas práticas de codificação HTML, CSS, JavaScript etc, da empresa Isobar US. Documento original em: http://na.isobar.com/standards/

O objetivo inicial era traduzir tudo e futuramente criar nosso próprio documento, com ideias melhoradas e outras correções que achamos necessário. Mas para começar, traduzimos o documento na sua íntegra. Creio que é interessante para quem precisa de um caminho a seguir num projeto web. Me ajudou muito há alguns meses atrás e acho que agora em português fica mais útil ainda para outros desenvolvedores front-end.

A tradução ainda precisa de uma revisão geral, principalmente nos capítulos finais. Se puderem me ajudar a corrigir o que acharam meio sentido, eis o link com o estágio atual:

http://andrecomws.com/lab/code-standards/

Também está disponível no Git Hub, para quem quiser dar um fork, abrir uma issue etc:
https://github.com/haggen/code-standards

Espero que seja útil para vocês.

Baixar DVD

Slim é uma linguagem de modelo cujo objetivo é reduzir a sintaxe HTML para as partes essenciais, sem se tornar enigmática. Ele normalmente é usado com Ruby. Você pode encontrá-lo no sitehttp://slim-lang.com/.

A produtividade com a ajuda desse “carinha” aumenta muito, abaixo um exemplo de utilização com o site da Fortap.com

Esse código deve parecer estranho para você:

doctype 5
html lang='en'
  head
    meta charset='utf-8'
    base href='/'

    title ForTap - Making tap easy!

    meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;'
    meta name='apple-mobile-web-app-capable' content='yes'
    meta name='apple-mobile-web-app-status-bar-style' content='yes'
    meta name='apple-touch-fullscreen' content='yes'
    meta name='description' content='Nós fazemos web apps, aplicativos e publicações para tablets e celulares e publicidade em HTML5. Google Android, Apple iOS, RIM Blackberry OS, Microsoft Windows Phone and HP WebOS'
    meta name='keywords' content='ForTap, html5, iphone4, android, windows phone, hp, rim, blackberry, hp, webos, mobile, ipad, iphone, app'
    meta name='title' content='ForTap - Making tap easy!'

    link rel='schema.DC' href='http://purl.org/dc/elements/1.1/'
    meta name='DC.title' content='Fortap'
    meta name='DC.Creator' content='Fortap'
    meta name='DC.Subject' scheme='DCTERMS.LCSH' content='Mobile apps'
    meta name='DC.Description' content='Nós fazemos web apps, aplicativos e publicações para tablets e celulares e publicidade em HTML5. Google Android, Apple iOS, RIM Blackberry OS, Microsoft Windows Phone and HP WebOS'
    meta name='DCTERMS.Created' scheme='DCTERMS.W3CTDF' content='2011-05'
    meta name='DCTERMS.Modified' scheme='DCTERMS.W3CTDF' content='2011-07'
    meta name='DC.Type' scheme='DCTERMS.DCMIType' content='InteractiveResource'
    meta name='DC.Format' scheme='DCTERMS.IMT' content='text/html'
    link rel='DC.Identifier' href='http://www.fortap.com/'
    meta name='DC.Language' content='English'
    meta name='DC.Language' scheme='DCTERMS.ISO639-3' content='eng'

    meta property='og:title' content='Fortap'
    meta property='og:type' content='website'
    meta property='og:url' content='http://www.fortap.com'
    meta property='og:image' content='http://fortap.com/images/touch-icon-iphone4.png'
    meta property='og:site_name' content='Fortap'
    meta property='og:description' content='Nós fazemos web apps, aplicativos e publicações para tablets e celulares e publicidade em HTML5. Google Android, Apple iOS, RIM Blackberry OS, Microsoft Windows Phone and HP WebOS'
    script src='http://www.google-analytics.com/ga.js'
    link rel='apple-touch-icon' href='images/touch-icon-iphone.png'
    link rel='apple-touch-icon' href='images/touch-icon-ipad.png' sizes='72x72'
    link rel='apple-touch-icon' href='images/touch-icon-iphone4.png' sizes='114x114'
    link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Cabin'
    link rel='stylesheet' href='reset.css'
    link rel='stylesheet' href='style.css' media='screen'
    link rel='stylesheet' href='ipad.css' media='screen and (min-device-width: 481px) and (max-device-width: 799px)'
    /[ if (gte IE 6) & (lte IE  ]
      link rel='stylesheet' href='ie.css'

    javascript:
      var _gaq = _gaq || [['_setAccount', 'UA-24051863-1'], ['_trackPageview']];
    script src='http://www.google-analytics.com/ga.js'
  body
    .wrap
      header role='banner'
        h1 ForTap
        div
          img src='logo.png' alt='Fortap'
        .top
          img.top src='logo-fortap.png' alt='Fortap'
        h2 Making tap easy
      section#content role='main'
        h1
          | Nós fazemos
          strong
            | web apps, aplicativos e publicações para tablets e celulares e publicidade em HTML5
        dl
          dt
            img src='blackberry.png' alt='Blackberry OS'
          dd Blackberry OS
          dt
            img src='android.png' alt='Android'
          dd Android
          dt
            img src='windows.png' alt='Windows Phone'
          dd Windows Phone
          dt
            img src='apple.png' alt='iOS'
          dd iOS
          dt
            img src='hp.png' alt='WebOS'
          dd WebOs
        section.latest-work role='complementary'
          div
            h1 Últimos trabalhos
            h2 doit.io
            p
              | Gerenciador de tarefas simples, bonito e com foco.
          figure
            a rel='modal-profile' href='#modal-lightsout'
              img src='workoelho-small-screen.jpg' alt='doit.io'
          #modal-lightsout.modal-lightsout
            div#modal-profile.modal-profile
              a.modal-close-profile href='#modal-close-profile' title='Fechar'
                | Fechar
              a href='#modal-close-profile' title='Fechar'
                img src='screen-workcoelho.jpg' alt='Doit.io'
      section#contact.vcard
        h1 Fale sobre seu projeto
        address itemtype='http://data-vocabulary.org/Organization'
          abbr.tel itemprop='tel' title='+551123738573'
            | +551123738573
          a.email itemprop='email' href='mailto:contato@fortap.com'
            | contato@fortap.com
      footer role='contentinfo'
        p
          small
            strong Fortap
            | Todos os direitos reservados
      section.share
        iframe.facebook-share-button src='http://www.facebook.com/plugins/like.php?app_id=259300564085200&href=http%3A%2F%2Ffortap.com%2F%3Fsource%3Dgoogleplus&send=false&layout=button_count&width=95&show_faces=false&action=like&colorscheme=light&font=tahoma&height=21' scrolling='no' frameborder='0' allowTransparency='true'
        a.twitter-share-button href='http://twitter.com/share' data-url='http://fortap.com/?source=twitter' data-count='none' data-via='fortap'
          | Tweet
        script src='http://platform.twitter.com/widgets.js'
        g:plusone size='medium' count='false' href='http://fortap.com/?source=googleplus'
  script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'
  script src='https://apis.google.com/js/plusone.js'
  /[ if lt IE 9 ]
    script src='functions.js'
    script src='selectivizr-min.js'
    script src='css3-mediaqueries.js'
    noscript
      link rel='stylesheet' href='style.css'

Mas na verdade ele era esse “monstrão” todo:

< !doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"> 

    <base href="/">

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    </meta><meta name="apple-mobile-web-app-capable" content="yes">
    </meta><meta name="apple-mobile-web-app-status-bar-style" content="black">
    </meta><meta name="apple-touch-fullscreen" content="yes">
    </meta><meta name="description" content="Nós fazemos web apps, aplicativos e publicações para tablets e celulares e publicidade em HTML5. Google Android, Apple iOS, RIM Blackberry OS, Microsoft Windows Phone and HP WebOS">
    </meta><meta name="keywords" content="ForTap, html5, iphone4, android, windows phone, hp, rim, blackberry, hp, webos, mobile, ipad, iphone, app">
    </meta><meta name="title" content="ForTap - Making tap easy!">

    <link rel="schema.DC" href="http://purl.org/dc/elements/1.1/">
    <meta name="DC.title" content="Fortap">
    </meta><meta name="DC.Creator" content="Fortap">
    </meta><meta name="DC.Subject" scheme="DCTERMS.LCSH" content="Mobile apps">
    </meta><meta name="DC.Description" content="Nós fazemos web apps, aplicativos e publicações para tablets e celulares e publicidade em HTML5. Google Android, Apple iOS, RIM Blackberry OS, Microsoft Windows Phone and HP WebOS">
    </meta><meta name="DCTERMS.Created" scheme="DCTERMS.W3CTDF" content="2011-05">
    </meta><meta name="DCTERMS.Modified" scheme="DCTERMS.W3CTDF" content="2011-07">
    </meta><meta name="DC.Type" scheme="DCTERMS.DCMIType" content="InteractiveResource">
    </meta><meta name="DC.Format" scheme="DCTERMS.IMT" content="text/html">
    <link rel="DC.Identifier" href="http://www.fortap.com/">
    <meta name="DC.Language" content="English">
    </meta><meta name="DC.Language" scheme="DCTERMS.ISO639-3" content="eng">

    </meta><meta property="og:title" content="ForTap">
    </meta><meta property="og:type" content="website">
    </meta><meta property="og:url" content="http://www.fortap.com/">
    </meta><meta property="og:image" content="http://fortap.com/images/touch-icon-iphone4.png">
    </meta><meta property="og:site_name" content="Fortap">
    <meta property="og:description" content="Nós fazemos web apps, aplicativos e publicações para tablets e celulares e publicidade em HTML5. Google Android, Apple iOS, RIM Blackberry OS, Microsoft Windows Phone and HP WebOS"/>

    <link rel="apple-touch-icon" href="images/touch-icon-iphone.png">
    </link><link rel="apple-touch-icon" sizes="72x72" href="images/touch-icon-ipad.png">
    </link><link rel="apple-touch-icon" sizes="114x114" href="images/touch-icon-iphone4.png">
    </link><link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Cabin">
    </link><link rel="stylesheet" href="css/reset.css">
    </link><link rel="stylesheet" href="css/style.css" media="screen">
    </link><link rel="stylesheet" href="css/ipad.css" media="screen and (min-device-width: 481px) and (max-device-width: 799px)">
    <!--[if (gte IE 6)&(lte IE 8)]></link><link rel="stylesheet" href="css/ie.css">< ![endif]-->
    <script src="js/modernizr.js"></script>

    <title>ForTap - Making tap easy!</title>

    <script type="text/javascript">
    var _gaq = _gaq || [['_setAccount', 'UA-24051863-1'], ['_trackPageview']];
    </script>
    <script src="http://www.google-analytics.com/ga.js"></script>
</link></meta></link></meta></link></meta></base></meta></head>
<body>
    <div class="wrap">
        <header role="banner">
            <h1>ForTap</h1>
            <div><img src="images/logo.png" alt="ForTap"/></div>
            <div class="top"><img src="images/logo-fortap.png" alt="ForTap" class="top"/></div>
            <h2>Making tap easy!</h2>
        </header>
        <section id="content" role="main">
           <h1>Nós fazemos <strong>web apps, aplicativos e publicações para tablets e celulares e publicidade em HTML5</strong></h1>
            <dl>
                <dt><img src="images/blackberry.png" alt="Blackberry OS"/></dt>
                <dd>Blackberry OS</dd>
                <dt><img src="images/android.png" alt="Android"/></dt>
                <dd>Android</dd>
                <dt><img src="images/windows.png" alt="Windows Phone"/></dt>
                <dd>Windows Phone</dd>
                <dt><img src="images/apple.png" alt="iOS"/></dt>
                <dd>iOS</dd>
                <dt><img src="images/hp.png" alt="WebOS"/></dt>
                <dd>WebOS</dd>
            </dl>
            </section><section class="latest-work" role="complementary">
                <div>
                    <h1>Últimos trabalhos</h1>
                    <h2>doit.io</h2>
                    <p>Gerenciador de tarefas simples, bonito e com foco.</p>
                </div>
                <figure>
                    <a rel="modal-profile" href="#modal-lightsout" ><img src="images/workoelho-small-screen.jpg" alt="doit.io"/></a>
                </figure>
                <div class="modal-lightsout" id="modal-lightsout">
                    <div id="modal-profile" class="modal-profile">
                        <a class="modal-close-profile" href="#modal-close-profile" title="Fechar">Fechar</a>
                        <a href="#modal-close-profile" title="Fechar"><img src="images/screen-workcoelho.jpg" alt="Doit.io"/></a>
                    </div>
                </div>
            </section>

        <section id="contact" class="vcard">
            <h1>Fale sobre seu projeto</h1>
            <address itemscope itemtype="http://data-vocabulary.org/Organization">
                <abbr class="tel" itemprop="tel" title="+551123738573">+55 11 2373-8573</abbr>
                <a class="email" itemprop="email" href="http://cloudflare.com/email-protection.html#ff9c90918b9e8b90bf99908d8b9e8fd19c9092d19d8d"><span id="__cf_email__" class="caa9a5a4beabbea58aaca5b8beabbae4a9a5a7e4a8b8">[email&nbsp;protected]</span><script type="text/javascript">
/* < ![CDATA[ */
(function(){try{var s,a,i,j,r,c,l=document.getElementById("__cf_email__");a=l.className;if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script></a>
            </address>
        </section>
        <footer role="contentinfo">
            <p><small><strong>ForTap</strong> Todos os direitos reservados 2011</small></p>
        </footer>
        <section class="share">
        	<iframe src="http://www.facebook.com/plugins/like.php?app_id=259300564085200&amp;href=http%3A%2F%2Ffortap.com%2F%3Fsource%3Dgoogleplus&amp;send=false&amp;layout=button_count&amp;width=95&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=tahoma&amp;height=21" scrolling="no" class="facebook-share-button" frameborder="0" allowTransparency="true"></iframe>
           	<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://fortap.com/?source=twitter" data-count="none" data-via="fortap">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
           	<g:plusone size="medium" count="false" href="http://fortap.com/?source=googleplus"></g:plusone>
        </section>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	<script src="https://apis.google.com/js/plusone.js"></script>
    <!--[if lt IE 9]>
    <script src="js/functions.js"></script>
    <script src="js/selectivizr-min.js"></script>
    <script src="js/css3-mediaqueries.js"></script>
    <noscript><link rel="stylesheet" href="css/style.css"></link></noscript>
    < ![endif]-->
<script type="text/javascript">
/* < ![CDATA[ */
(function(){try{var s,a,i,j,r,c,l=document.getElementsByTagName("a"),t=document.createElement("textarea");for(i=0;l.length-i;i++){try{a=l[i].getAttribute("href");if(a&&"cloudflare.com/email-protection"==a.substr(7 ,31)){s='';j=44;r=parseInt(a.substr(j,2),16);for(j+=2;a.length-j&&a.substr(j,1)!='X';j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}j+=1;s+=a.substr(j,a.length-j);t.innerHTML=s.replace(/</g,"&lt;").replace(/>/g,"&gt;");l[i].setAttribute("href","mailto:"+t.value);}}catch(e){}}}catch(e){}})();
/* ]]> */
</script>
</body>
</html>

25 de novembro é um dia especial para o maior projeto colaborativo do Muse. Nesse dia será lançado o DVD feito pelos fãs brasileiros do show realizado em abril, na U2 360 Tour.

Após 7 meses de trabalho intenso, chega a hora de dar a luz a mais de 1 hora e meia de transmissão dos 3 shows da banda realizados em abril desse ano. Todos ângulos filmados diretamente do público e editados cuidadosamente pelo mesmo criado do famoso projeto Radiohead Rain Down, Andrews F.G.

Tanto o download do DVD, como o show na íntegra (em HD) será disponibilizado no dia e em diversos formatos. Um site reformulado está a caminho também.

Então fique esperto, dia 25 de novembro, #MUSEDVDBR no ar.

Realmente sempre me surpreendo ao buscar sobre o projeto Rain Down na web. Toda vez que procuro pelo termo no Google, encontro alguma coisa nova ou vários links que citam o projeto como inovador e pioneiro. É muito bom saber que quase após 3 anos do show do Radiohead no Brasil, nada foi tão marcante quanto aquela apresentação da banda e como os vídeos desse projeto o deixaram eternamente frescos na memória das pessoas que estiveram lá.

Mas um dos resultados me chamou muito atenção nesses dias, encontrei um trabalho de TCC para um curso de Comunicação Social – Jornalismo baseado em toda história de criação, produção e conceito do Projeto Rain Down. O trabalho foi realizado por Leonardo Araújo e Dannilo Duarte para a Universidade Estadual do Sudoeste da Bahia, de Vitória da Conquista, Bahia.

Localizei o documento no formato PDF e notando em seu texto, é citado que ele foi apresentado no XIII Congresso de Ciências da Comunicação, em Maceió/AL, em junho desse ano.

É emocionante saber que o Rain Down alcançou tanto prestigío, agradeço novamente pela dedicação e divulgação.

Alguns trechos interessantes do trabalho:

“Trata-se de uma espécie de “artesanato digital”, conforme o termo cunhado por Barbrook e Schultz (2007) em um manifesto divulgado na Web. São trabalhos que dialogam com os produtos da indústria cultural, ao mesmo tempo em que se revelam bastantes distintos da formalidade ou dos compromissos com uma produção anterior, na medida em que flertam com novas linguagens disseminadas em escala global. ”

“É preciso emitir em rede, entrar em conexão com outros, produzir sinergias, trocar pedaços de informação, circular, distribuir” (Lemos, 2009, p. 40).”

“Em Rain Down, pela primeira vez, nada foi combinado ou organizado anteriormente, nem passou pelo filtro “de qualidade” do artista. Não havia nenhum acordo das pessoas filmarem o show para um DVD. As imagens foram feitas de forma espontânea, capturando as diferentes percepções de quem estava na apresentação. A edição também foi totalmente realizada por um admirador da banda. ”

“Percebe-se que assim como o Rain Down surgiu de maneira não planejada, a produção feita pelas redes telemáticas é, muitas vezes, fruto de experimentação dos indivíduos que povoam o ciberespaço e que esse ciclo de mudanças continua em curso. Por ser uma experiência conduzida pela própria comunidade, é interessante acompanhar as mudanças e delineamentos da produção cultural nesses novos ambientes para que seja possível desfrutar de todas as suas potencialidades.

O documento pode ser baixado na íntegra por aqui (.pdf – 363 KB)

Vídeos

http://www.youtube.com/watch?v=olJdhqJC8Rg

Novo projeto criado dentro da Corenzan, reestruturando o site da escola Focus Fotografia que já está há quase 40 anos no mercado. O novo site da instituição foi escrito com HTML5/CSS3 em cima de um WordPress. Com navegação fácil e layout agradável, foi uma das primeiras experiências com clientes usando novas tecnologias.

Acessar o site

Mais um vídeo do projeto colaborativo Muse DVD BR 2011.

http://www.youtube.com/watch?v=yr9Kdv5MziY

Todos sabem da dificuldade de inserir ícones num botão, alguns inserem a tag img, cercam ela de propriedades float para não quebrar o layout, deixando nada semântico e prático o seu código. Nesse caso usei um dos pseudos elementos, o before para inserir o ícone do Twitter.

O HTML:

<a href="http://twitter.com/andrewsfg">@andrewsfg</a>

O CSS:

a {
    background-color: #f4f4f4;
    color: #444;
    display: block;
    font: .85em/1.0 Helvetica, Arial, sans-serif;
    border-radius: 5px;
    padding: 8px 2.5%;
    text-decoration: none;
    width: 40%;
    border-radius: 5px;
    box-shadow: inset 1px 1px 1px #ccc;
    transition: all .3s ease-in;
    -webkit-transition: all .2s ease;
    -moz-transition: all .3s ease;
}
a:hover {
    background-color: #333;
    color: #fff;
    box-shadow: inset 1px 1px 5px 2px #666;
}
a:before {
    content:url('http://cdn1.iconfinder.com/data/icons/socialmediamini/PNG/twitter.png');
    display: block;
    float: left;
    margin-right: 8px;
}

Exemplo: http://jsfiddle.net/andrewsfg/QyBpZ/1/

Compatibilidade: Chrome, Safari, Opera, Firefox, Internet Explorer (8,9). Infelizmente a versão 7 do IE não dá suporte aos pseudos elementos, e eu sei como isso é broxante meu caro.

“Ser o homem mais rico do cemitério não me importa… Ir para a cama à noite dizendo que fizemos algo maravilhoso… isso é o que importa para mim.”

Steve Jobs – 1955-2011