Fork me on GitHub
Você esta em:Home » Destaque » Layout Responsive ou Recursive – Você sabe oque é e sabe fazer?

Layout Responsive ou Recursive – Você sabe oque é e sabe fazer?

Entre e aprenda oque é e a fazer um layout recursivo para WordPress, Joomla, Magento, Drupal ou em projetos de sites em HTML ou Sistemas web.

Oque é recursive?

Recursive(em Inglês) é o mesmo que recursivo(em Português), ou seja, Recursividade é um termo usado de maneira mais geral para descrever o processo de repetição de um objeto de um jeito similar ao que já fora mostrado. Um bom exemplo disso são as imagens repetidas que aparecem quando dois espelhos são apontados um para o outro. Também são conhecidos como Responsive ou Responsivo

O modelo de template ou theme Responsive

Para quem ainda tem dúvida o que é um template responsive, simplificadamente, é um template que se adapta de forma organizada a qualquer dispositivo, seja ele um notebook, um tablet ou um smartphone. O mais legal que acho sobre o responsive é que ao invés de nos preocupar com versões diferentes para cada dispositivo, trabalhamos em uma única solução, o qual caberá a ela mesmo se adaptar.

Ou seja, um Layout Recursivo é um layout adaptativo, onde o mesmo layout pode ser acessado via Browser, Tablet ou Celulares.

Caso você não tenha um Smartphone e um Tablet para realizar seus testes você pode acessar o site (http://screenqueri.es) nesse site você poderá testar seus layout para vários tipos de layout como Ipad, Iphone, Galaxy, BlackBerry…

Exemplo:

Obs: Outro site bem interresante para realizar testar de layouts recursivos além do http://screenqueri.es é o http://responsive.is 

Demostração online de um layout responsivo simples que eu fiz http://responsive.is/http://shop.pisosecarpetes.com.br/fivestars/


Como fazer um layout assim?

Graças a Deus hoje em dia existem várriiiooos frameworks onde nos ajuda muito na criação de um layout recursivo. Abaixo segue os 3 mais famosos e um link com mais uns 40 rs.

Bootstrap do Twitter

01 – Bootstrap do Twitter

O Twitter Bootstrap  é uma toolkit voltada para desenvolvimento rápido e prático de aplicações e websites. Disponível como código aberto, Ele já vem com tipografia definida , botões, formulários , tabelas , grids , navegação  e muito mais.

BootStrap, em tradução livre, quer dizer puxadeira de bota, aquele item usada para ajudar montadores a subir em cavalos. E é exatamente essa a função que ele exerce para desenvolvedores. Com o BootStrap eles vão ter acesso à interfaces pré-criadas para implementar nos seus serviços web que usam o Twitter.
Apesar de ser apenas uma compilação de vários arquivos CSS, HTML e JavaScript, eles contém códigos que podem mostrar avisos pop-up, caixas de diálogo sobrepostas, barras de erro e diversas outras interações possíveis e que são bastante semelhantes às usadas na versão web do Twitter.

Essa atitude provavelmente está relacionada com o que o Twitter disse em março deste ano sobre “manter uma experiência consistente entre todas as plataformas, seja móvel ou desktop”, pedindo também que desenvolvedores parassem de criar aplicativos. A atitude não foi muito bem aceita pela comunidade de programadores, mas com a liberação do BootStrap, aqueles que implementarem esse código vão deixar a experiência mais familiar para os usuários.
O BootStrap tem apenas 6k de tamanho, foi construído pelos engenheiros do Twitter Mark Otto e Jacob Thornton e está disponível nesse link .

Ele é composto de códigos base para o auxílio na criação de formulários, botões, tabelas, grids, navegação e muitos outros itens. Mas antes de sair por aí usando, você deve saber que esse Bootstrap depende do LESS para funcionar.

Veja mais em: http://www.deivison.com.br/blog/2012/01/27/bootstrap-ate-voce-twitter/

02 - HTML KickStart

HTML KickStart é um conjunto de regras de HTML5, CSS, e (javascript) jQuery arquivos, layouts, e elementos concebidos para lhe ajudar dar um avanço e poupar 10 de horas em seu projeto web que vem.De acordo com99Lime.com (dona do projeto), HTML KickStart é “um conjunto de regras de HTML5, CSS e jQuery (javascript) arquivos, layouts, e elementos” que nos pouparia 10 horas de trabalho.

veja mais em: http://www.deivison.com.br/blog/2012/01/27/html-kickstart-quem-saira-na-frente/

03 - HTML5 Boilerplate

HTML5 Boilerplate é um modelo base de HTML/CSS/JS para um desenvolvedor front-end profissional criar um site rápido, robusto e com futuro garantido.

Após mais de quatro anos em desenvolvimento iterativo, você poderá obter o melhor das melhores práticas preparadas em: normalizações cross-broswer, otimizações de desempenho e até mesmo de recursos opcionais como cross-domain para XHR e Flash.

Boilerplate não é um framework, nem deseja prescrever uma filosofia de desenvolvimento, ele só tem alguns truques para você começar o seu projeto com algum fundamento rapidez e com o pé direito.

veja mais em: http://br.html5boilerplate.com/

04 – Outros 15

Bem hoje em dia se você procurar na web com certeza irá encontrar muito mais rs, mas segue um link de um artigo no Imasters descrevendo os 15 mais conhecidos

veja mais em: http://imasters.com.br/artigo/20850/css/15-frameworks-incriveis-do-html5-e-do-css3

Mas como adaptar um layout já existente em um layout recursivo?

Digamos que você já tenha um site pronto e queira torna-lo recursivo. Há poucas semanas foram lançados vários plugins Jquery que auxiliam muito nessa transformação.

01 - Responsly.js

Por meio desse plugin Jquery você consegue transformar seu template facilmente em recursivo

veja mais em: http://dmmalam.github.com/Responsly.js/

02 - jQuery Picture

Transforma as imagens do seu site em recursiva por meio desse plugin Jquery

veja mais em: http://www.jqueryrain.com/?1_LuTaZR

03 - jQuery mobile select

Com esse plugin você consegue transformar um menu em <ul> em select. Veja o antes e depois na imagem abaixo:

Veja mais em: https://github.com/joggink/jquerymobiledropdown

04 – Brinde- Como Detectar o Ipad e Iphone

Segue no link abaixo o tutorial do incrível David Walsh, explicando como detectar em Javascript e PHP os aparelhos.

veja mais em: http://davidwalsh.name/detect-ipad

Como fazer um layout recursive tendo uma base pronta para Joomla, Magento, WordPress ou Drupal?

Bem digamos que você queira fazer um layout recursivo para o Magento, Por onde começar? Existem layouts baseado principalmente em Bootstrap para esses principais CMS e E-commerces.

Layout Recursivo para Magento

  1. Ótimo layout em Bootstrap que pretendo personalizar para um futuro projeto em Magento
    Demostração online: http://responsive.is/bootstrapped.magenthon.com
    Veja mais em: https://github.com/deivisonarthur/bootstrapped
  2. Outro template recursivo para Magento que encontrei na web
    veja mais em: https://github.com/deivisonarthur/sass-twitter-bootstrap-magento
  3. Mais um layout recursivo para Magento
    veja mais em: https://github.com/deivisonarthur/magento-bootstrap

Layout Recursivo para WordPress

  1. Onion é um ótimo tema free e recursivo para WordPress
    Demostração online: http://responsive.is/http://jinsonathemes.com/fabs/?themedemo=Orion
    Veja mais em: http://www.mediafire.com/?c9ed4w2o3qt6acu
  2. Renova outro ótimo layout recursive e profissional para WordPress
    Demostração online: http://responsive.is/http://renova.llow.it/wordpress/
    Veja mais em: http://www.llow.it/renova
  3. Skeleton é um layou completo e responsive para WordPress. Feito em Boilerplate.
    Demostração online: http://responsive.is/http://demos.simplethemes.com/skeleton/
    Veja mais em: https://github.com/deivisonarthur/skeleton_wp
  4. Respro – Dejavu rs
    Demostração online: http://responsive.is/http://wpdemo.themnific.com/pre/02/
    Veja mais em: http://themnific.com/respo-theme/

Layout Recursivo para Joomla

  1. Belo template complexo e responsivo para Joomla
    Demostração online: http://responsive.is/http://joomla25-templates.joomlart.com/ja_elastica/
    Veja mais em: http://www.joomlart.com/forums/downloads.php?do=cat&id=20433

Layout Responsive para Drupal

  1. Skeleton Dejavu para Drupal. Feito em Boilerplate.
    Demostração online: http://responsive.is/http://demo.drupalizing.com/skeleton/
    Veja mais em: http://www.getskeleton.com/
  2. Outros 7 layouts resposnsive para Drupal
    Veja mais em: http://www.symphonythemes.com/drupal-blog/two-free-responsive-drupal-7-themes-mobile-webs

Apresentação Inglês sobre joomla 3.0 que virá com o Layout sabe oque?Responsive / Recursive rs

Outros links sobre o novo Joomla 3.0

Espero ter ajudado a você implementar esse novo padrão de templates Responsive ou Recursive. Até mais!

Sobre o Autor

Designer, Web Developer & Linux Administrator

Meu nome é Deivison Arthur, tenho 29 anos, sou Administrador Linux, Analista de Sistema, Webdesigner e Pesquisador. há mais de dez anos. Nasci no Rio de Janeiro, atualmente trabalho como Gerente de Tecnologia e E-commerce at Grupo FFernandes e Freelancer nas horas vagas. Desenvolvimento em Joomla, Wordpress, Drupal, Magento e outros GPLs...

Quantidade de Artigos : 114

Comentários (5)

Enviar Comentário

© 2012 Powered By Wordpress, Deivison Arthur

Ir para cima