Andrews F.G - Portfolio

Muse DVD BR 2011 #musedvdbr é lançado!

admin — Fri, 25 Nov 2011 19:15:39 +0000

Produtividade com Slim

admin — Thu, 17 Nov 2011 23:33:36 +0000

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>


     

    

    
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    

    
    
    
    
    
    

    
    
    
    
    
    
    
    
    

    ForTap - Making tap easy!

    
    


    
        
            ForTap
            
            
            Making tap easy!
        
        
           Nós fazemos web apps, aplicativos e publicações para tablets e celulares e publicidade em HTML5
            
                
                Blackberry OS
                
                Android
                
                Windows Phone
                
                iOS
                
                WebOS
            
            

                
                    Últimos trabalhos
                    doit.io
                    Gerenciador de tarefas simples, bonito e com foco.
                
                
                    
                
                
                    
                        Fechar
                        
                    
                
            

        
            Fale sobre seu projeto
            
                +55 11 2373-8573
                [email protected]
            
        
        
            ForTap Todos os direitos reservados 2011
        
        
        	
           	Tweet

#musedvdbr – data de lançamento: 25 de novembro

admin — Thu, 03 Nov 2011 02:49:41 +0000

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.

Direto de um TCC: “O Projeto Rain Down como um Fenômeno da Cibercultura”

admin — Mon, 31 Oct 2011 20:16:11 +0000

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

Vídeo: Muse – Supermassive Black Hole #musedvdbr

admin — Mon, 24 Oct 2011 21:01:00 +0000

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

Novo site publicado: Focus – Escola de Fotografia

admin — Tue, 18 Oct 2011 20:30:06 +0000

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

Vídeo: Muse – United States of Eurasia #musedvdbr

admin — Mon, 17 Oct 2011 03:10:54 +0000

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

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

CSSS – Ícones em botões, links de forma prática usando :before

admin — Mon, 10 Oct 2011 19:07:19 +0000

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:

@andrewsfg

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.

RIP Steve Jobs

admin — Thu, 06 Oct 2011 01:22:08 +0000

“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

Uma prévia

admin — Tue, 20 Sep 2011 19:48:18 +0000

O próximo passo é migrar todo o site para WordPress e dar maior atenção aos textos, trabalhos.