Andrews F.G - Portfolio » Úteis http://www.andrecomws.com/blog Portfolio de Andrews Ferreira Guedis, formado em web designer e prestador de serviços web desde 2004. Fri, 06 Jan 2012 23:20:49 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Produtividade com Slim http://www.andrecomws.com/blog/2011/11/17/produtividade-com-slim/ http://www.andrecomws.com/blog/2011/11/17/produtividade-com-slim/#comments Thu, 17 Nov 2011 23:33:36 +0000 admin http://www.andrecomws.com/blog/?p=333 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 8) ]
      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>

Compartilhar

]]> http://www.andrecomws.com/blog/2011/11/17/produtividade-com-slim/feed/ 0 Estudando Joomla http://www.andrecomws.com/blog/2008/06/12/estudando-joomla/ http://www.andrecomws.com/blog/2008/06/12/estudando-joomla/#comments Thu, 12 Jun 2008 20:06:51 +0000 admin http://www.andrecomws.com/?p=24 Estou estudando no momento o mais poderoso opensource CMS (Content Management System) da Web, o Joomla. Até agora tem me surpreendido bastante.

Joomla

Nesse print-screen, se vê o primeiro template para o site do CEU – Centro Espírita União, que está sendo reformulado por mim juntamente com a Letti Tecnologia.

Quando estiver em fase de finalização, anunciarei aqui no site.

Se estiver interessado em estudar um pouco sobre o Joomla, os links abaixo são extremamente úteis:

Em português:

www.joomla.com.br
www.joomlabrasil.org
www.joomlaclube.com.br

Em Inglês:

www.joomla.org

Compartilhar

]]> http://www.andrecomws.com/blog/2008/06/12/estudando-joomla/feed/ 0