Temas
Responsáveis
Jackson F.
de A. Mafra
Jackson F. de A. Mafra
http://about.me/jacksonfdam
https://bitbucket.org/jacksonfdam
https://github.com/jacksonfdam
http:/...
Arquitetura
Responsiva
Arquitetura Responsiva
O termo Arquitetura responsiva foi dado pelo pesquisador Nicholas
Negroponte que inicialmente conce...
Arquitetura responsiva é aquela que as condições do espaço e
ambientes podem mudar e se adaptar a condições pre-definidas ...
Webdesign Responsivo
O termo utilizado para definir um web desing responsivo foi criado por
Ethan Marcotte, em seu artigo ...
Layout fluído
A técnica de layout fluído se baseia em usar valores percentuais ao
invés de absolutos para as tags que deli...
Imagens flexíveis
Tão importante quanto um layout que responda aos diversos
tamanhos de tela. As imagens também devem adap...
Media queries
São seletores em CSS3 que consulta as mídias do navegador
quando o seu site for acessado. Com as Medias Quer...
Case: skinnyties
http://skinnyties.com/
Redimensionar
não é tudo.
Prototipar
Prototipar
Prototipar
Como vender o valor do
mobile para seus clientes
smashingmagazine
RESPONSABILIDADE
Nossa responsabilidade como profissionais da Web é educar e informar
nossos clientes, para transmitir a e...
Compreensão
Qualquer recomendação que fizermos para nossos clientes, seja para
ele ter um site responsivo, um site separad...
Ouça
Ouça as necessidades e limitações do seu cliente, e realmente procure
compreender a natureza do seu negócio e da sua ...
Os principais problemas do design
responsivo ... e como evitá-los!
• Explicando RWD para os clientes
• A falta de uma fase...
Oferecer o suporte
Como fazer para vender o suporte aos dispositivos móveis para clientes
que se enquadram em uma das quat...
O cliente Orientado por dados
Ao tentar convencer alguém de alguma coisa, dados e estatísticas são
suas ferramentas mais c...
O cliente orientado por concorrentes
O seu cliente chegou até você com um monte de sites de concorrentes
na mão? Você está...
O cliente dirigido por custos
Em muitas empresas de pequeno porte, qualquer gasto em marketing
vem direto do bolso do prop...
O cliente socialmente consciente
Se o seu cliente valoriza seus esforços em construir sites que são
acessíveis a pessoas c...
“Não importa o
dispositivo e sim
o usuário final”
Horácio Soares
A falta de uma fase de
concepção estática
Um dos grandes problemas relatados por designers foi a de que é
necessário uma m...
Navegação
No passado, a navegação dos sites tendiam a ser horizontal ao longo da
parte superior da página, ou, por vezes, ...
Imagens
O conjunto de opções disponíveis para manipulação de imagens em
projetos responsivo é extremamente fragmentado. At...
Imagens
Para complicar ainda mais as coisas, os designers também deve
considerar a próxima geração de dispositivos com alt...
Breakpoints
Muitos designers desperdiçam tempo em um layout responsivo que é
baseado principalmente em "breakpoints da lar...
Conteúdo
Muitas vezes, os projetistas ocultar ou descartar o conteúdo do site, a
fim de torná-lo apto para um dispositivo ...
Tamanho
Paridade conteúdo não significa inchar seu site com conteúdo
desnecessário ou excessivo a ponto de torná-lo mais l...
Tabelas
Tabelas responsivas são problemáticas, particularmente quando elas
contém informação complexa ou simplesmente um g...
Conversão de sites antigos de
largura fixa
Como atualizar o código de um site de largura fixa para torná-lo
responsivo, pr...
Usuários de versões antigas do IE
Trabalhar com versões mais antigas do navegador (IE8 e anteriores), a
questão principal ...
Tempo de testes e custo
Como testar, quais dispositivos para teste, e potencialmente enorme
custo de construção de um conj...
Tempo de testes e custo
Tempo de teste também é um problema. Embora o tempo necessário
para testar um site tem certamente ...
Nunca comprometa
RWD nunca deve ser usado para oferecer uma versão diluída do seu site.
Em alguns casos, você deve conside...
Só importa Desempenho
RWD pode ser barato de implementar, mas que deve ser planejada desde
o início. Aplicando RWD para um...
Adotandar um Tema WordPress
Responsivo é mais do que Install-and-go
Pensar além do tema
Tendo um tema responsivo não garante uma boa experiência do usuário
móvel.
A funcionalidade mobile
mais importante
A mais importante funcionalidade do seu
site para um usuário mobile é
performance.
Por onde começar?
Escolher uma framework ou não?
Boilerplate?
Tema em branco, partir do zero, comprar?
Temas, onde encontrar?
ThemeForest
http://themeforest.net/search?utf8=
%E2%9C%93&term=Responsive+WordPr
ess+themes
Elegant...
WooThemes
http://www.woothemes.com/product-
category/themes/?prod_cat[]=1051&s=&
post_type=product
StudioPress
http://www....
Mojo Themes
http://www.mojo-
themes.com/categories/wordpress/r
esponsive-wordpress/
Theme Trust
http://themetrust.com/them...
Plugins, onde encontrar?
WordPress Mobile Pack
http://wordpress.org/extend/plugins
/wordpress-mobile-
pack/other_notes/
WP...
Performance
1 – Habilite GZIP
2 – Minifique JavaScript
3 – Minifique CSS
4 – Comprima o HTML
5 – Não redimensione imagens ...
Plugins - Javascript
• jQuery Slider
• Easy Navigation
• Contact Form
• Responsive Layout
• Filterable Portfolio
• Google ...
Criando
1. Criar um tema Pai
2. Criar um tema filho
3. Cuidar com as Sidebars e Widgets
4. Cuidar com menus de navegação
5...
Style – Child Theme
/*
Theme Name: Duogramma - Child Theme
Theme URI: http://duogramma.com/
Description: Tema Filho do Tem...
Style – Child Theme
@media screen and (max-width:480px) {
/* Making the headings red for smartphone users */
h1 {
color: r...
Script
<?php
function responsive_scripts_basic() {
//first we must register the responsive framework's scripts
wp_register...
Style
<?php
function responsive_styles() {
//register styles for our theme
wp_register_style( 'foundation-stylesheet', get...
Ferramentas
• http://mediaqueri.es/
• http://zurb.com/playground/responsive-sketchsheets
• http://cferdinandi.github.io/kr...
Fontes
 Sergio Lopes - http://sergiolopes.org/palestra-mobile-
web/#slide-capa
 Ethan Marcotte -
http://www.abookapart.c...
Fontes
 Paul Kinlan – http://paul.kinlan.me/
 Arquitetura de Informacao -
http://arquiteturadeinformacao.com/2012/07/22/...
Obrigado
Próximos SlideShares
Carregando em…5
×

Responsive wordpress

2.421 visualizações

Publicada em

0 comentários
18 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.421
No SlideShare
0
A partir de incorporações
0
Número de incorporações
135
Ações
Compartilhamentos
0
Downloads
75
Comentários
0
Gostaram
18
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Design Responsivo x AdaptativoUma versãoqueflui de acordo com o deviceUma versãoespecificaparacada device (desktop, tablet, smartphone)http://www.templatemonster.com/infographics/responsive-web-design-interactive-guide.phpCOMO O DESIGN RESPONSIVO É VISTO PELOS BUSCADORESO design responsivo já é defendida por muitos já faz algum tempo, mas só recentemente começou a ganhar destaque depois que o Google confirmou indiretamente que para a área de SEO (otimização para buscadores) o design responsivo é o mais indicado. É mais fácil para o Google perceber que o www.exemplodesite.com.br tem um layout que se adapta a qualquer tela do que entender que o www.outroexemplo.com.br, o m.outroexemplo.com.br e o tablet.outroexemplo.com.br são todos o mesmo sites e não estão apenas copiando conteúdo um do outro.&quot;Google recomenda que os webmasters sigam a melhor prática da indústria usando design responsivos, oferecendo o mesmo código HTML para todos os dispositivos e usando apenas media queries de CSS para decidir como a informação deve ser renderizada.&quot;
  • A List ApartUso das CSS Media Queries em 2010RWD – Responsive Web Designhttp://www.alistapart.com/articles/responsive-web-design/
  • Uso de GridsLarguras em &quot;%&quot;. Textos em &quot;em&quot;.
  • Nãoadiantaredimensionar a imagem, se ela continua com mais de 5mb e o usuárioestana 3G/2G.Video – Responsivo.Uso do http://adaptive-images.com/Add .htaccess and adaptive-images.php to your document-root folder.Add one line of JavaScript into the &lt;head&gt; of your site.Add your CSS Media Query values into $resolutions in the PHP file.OUhttp://wil.to/picturefill/Uso da tag &lt;picture&gt; com polyfill baseado nos elementos source usando os atributos media e srcset.
  • Uso de Media Queries érecomendacaodesde 19 de junho de 2012 - http://www.w3.org/TR/css3-mediaqueries/http://responsive.is/typecast.comÉ preciso escolher os melhores breakpoints“Breakpoints” são as larguras de tela (em pixels) onde o site começa a se transformar e adicionar conteúdo extra dependendo do dispositivo onde você está navegando. Por exemplo: a partir dos 410px de largura, entendemos que o usuário não está mais navegando em um smartphone no modo “retrato”, e sim no modo “paisagem”. E então servimos a ele um conteúdo e uma interface específica para aquele tipo de navegação.MobileMobile LandscapeTabletTablet LandscapeDesktop
  • http://mediaqueri.es/http://www.designadaptavel.com.br/artigos/layout-fluido-ou-liquidohttp://www.abookapart.com/products/mobile-first/
  • Sóusar media-queries e trocar tudopraporcentagem no cssnãovaifazer a aplicaçãoserresponsivaouter a melhorexperienciapara o usuário.Existemvarios outros desafios. O queimportaé o conteúdo. Fazer um car sort, com usuarios e designers e ver o queéimportante, o quedeveaparecerounão.Analisar a persona, qual o goal de cada um.
  • http://www.searchenginejournal.com/wordpress-responsive-design-layout-that-fits-all-screens/64949/http://alistapart.com/article/dive-into-responsive-prototyping-with-foundation
  • https://codeinbrasil.wordpress.com/2013/05/08/como-vender-o-valor-do-mobile-para-seus-clientes/http://www.smashingmagazine.com/2013/04/05/how-to-sell-the-value-of-mobile-to-clients/
  • http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them
  • Responsive navigation patterns, by Brad Frost - http://bradfrostweb.com/blog/web/responsive-nav-patterns/We need a standard show navigation icon for navigation, by Andy Clarke - http://stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design Don’t let your menu take over, by Stu Robson - http://alwaystwisted.com/post.php?s=2011-02-20-dont-let-your-menu-take-overScalable navigation patterns in responsive web design, by Palantir&apos;s Michael Mesker - http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
  • Responsive Tables, from Zurb - http://www.zurb.com/playground/responsive-tablesResponsive Tables, from David Bushell - http://dbushell.com/2012/01/05/responsive-tables-2/Break a table out of its container - http://jsbin.com/apane6/14
  • Pseudoseletores:http://selectivizr.com/--https://github.com/scottjehl/RespondOUhttps://code.google.com/p/css3-mediaqueries-js/&lt;!-- css3-mediaqueries.js for IE less than 9 --&gt; &lt;!--[if lt IE 9]&gt;&lt;script src=&quot;http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js&quot;&gt;&lt;/script&gt;&lt;![endif]--&gt;It doesn’t work on @import’edstylesheetsWrite media query with following way@media screen and (min-width: 980px){ /* CSS Document */}Use keyword ‘and’ in query (‘or’ is not supported)
  • http://codex.wordpress.org/pt-br:Temas_Filhos
  • Responsive wordpress

    1. 1. Temas Responsáveis Jackson F. de A. Mafra
    2. 2. Jackson F. de A. Mafra http://about.me/jacksonfdam https://bitbucket.org/jacksonfdam https://github.com/jacksonfdam http://linkedin.com/in/jacksonfdam @jacksonfdam
    3. 3. Arquitetura Responsiva
    4. 4. Arquitetura Responsiva O termo Arquitetura responsiva foi dado pelo pesquisador Nicholas Negroponte que inicialmente concebeu nos anos 1960 durante o design de espaços onde foram explorados os conceito de cibernética para a arquitetura. http://en.wikipedia.org/wiki/File:NNegoponte_USNA_20090415_.jpg
    5. 5. Arquitetura responsiva é aquela que as condições do espaço e ambientes podem mudar e se adaptar a condições pre-definidas ou desejáveis , por meio de sensores, alterando as características de forma, cores, espaços e todos os elementos que compõem o espaço arquitetônico de modo responsivo. Para tal são utilizados sensores e atuadores robóticos.
    6. 6. Webdesign Responsivo O termo utilizado para definir um web desing responsivo foi criado por Ethan Marcotte, em seu artigo no site A list apart. Marcotte consolidou três principais técnicas para este modelo: Layout fluído, Imagens flexíveis, e Consultas a mídias (Media queries) em uma abordagem unificada, que o nomeou de web design ágil. http://www.flickr.com/photos/zeldman/6495074887/
    7. 7. Layout fluído A técnica de layout fluído se baseia em usar valores percentuais ao invés de absolutos para as tags que delimitam as áreas do site (div), ou seja, ao invés de declarar a largura do site com valores absolutos em pixels (px), usamos valores proporcionais em percentual (%). Desta forma o site e suas subpartes ocuparão uma área relativa ao tamanho da janela do navegador do usuário.
    8. 8. Imagens flexíveis Tão importante quanto um layout que responda aos diversos tamanhos de tela. As imagens também devem adaptar-se ao tamanho de tela do device em que está sendo acessado, utilizando valores proporcionais em percentual (%).
    9. 9. Media queries São seletores em CSS3 que consulta as mídias do navegador quando o seu site for acessado. Com as Medias Queries configuradas, o navegador exibe o layout de acordo com o dispositivo que está acessando o site, ou seja, o navegador interpreta o tamanho de tela que foi configurado na media querie e exibe o layout que foi definido no CSS.
    10. 10. Case: skinnyties http://skinnyties.com/
    11. 11. Redimensionar não é tudo.
    12. 12. Prototipar
    13. 13. Prototipar
    14. 14. Prototipar
    15. 15. Como vender o valor do mobile para seus clientes smashingmagazine
    16. 16. RESPONSABILIDADE Nossa responsabilidade como profissionais da Web é educar e informar nossos clientes, para transmitir a eles o valor e a necessidade de dar suporte aos dispositivos móveis e, para não perdermos aqueles clientes que valem a pena e aqueles projetos que não queremos dispensar, criando uma solução que possa atingir seus objetivos dentro de um orçamento realista.
    17. 17. Compreensão Qualquer recomendação que fizermos para nossos clientes, seja para ele ter um site responsivo, um site separado para mobile e outro para desktop, ou não se preocupar com mobile em tudo, deve ser baseada em uma compreensão das necessidades dos nossos clientes.
    18. 18. Ouça Ouça as necessidades e limitações do seu cliente, e realmente procure compreender a natureza do seu negócio e da sua situação. Isso deve ajudar a moldar a sua recomendação. Se você ouvir atentamente, você também será capaz de determinar a melhor forma de fazer o processo para incorporar o suporte aos dispositivos móveis em seu projeto de website.
    19. 19. Os principais problemas do design responsivo ... e como evitá-los! • Explicando RWD para os clientes • A falta de uma fase de concepção estática • Navegação • Breakpoints • Tamanho • Conteúdo • Imagens • Tabelas • Convertendo antigos locais de largura fixa • O que para servir os usuários de versões antigas do IE • Tempo de teste e de custo
    20. 20. Oferecer o suporte Como fazer para vender o suporte aos dispositivos móveis para clientes que se enquadram em uma das quatro categorias possíveis: • O cliente orientado por dados • O cliente orientado por concorrentes • O cliente orientado pelo custo do projeto • O cliente socialmente consciente.
    21. 21. O cliente Orientado por dados Ao tentar convencer alguém de alguma coisa, dados e estatísticas são suas ferramentas mais claras e objetivas. Felizmente, a Web é um meio extremamente mensurável, e existe uma tonelada de dados sobre comportamento de uso e taxas de aprovação dos usuários.
    22. 22. O cliente orientado por concorrentes O seu cliente chegou até você com um monte de sites de concorrentes na mão? Você está com sorte. O seu cliente está estabelecendo um padrão entre outros sites como uma medida de sucesso. Seu trabalho é definir um padrão que o seu cliente deve aspirar. Faça sua pesquisa em sites concorrentes mobile-friendly e tente compilar dados e exemplos que você pode usar para destacar os benefícios de uma experiência de usuário mais intuitiva e envolvente.
    23. 23. O cliente dirigido por custos Em muitas empresas de pequeno porte, qualquer gasto em marketing vem direto do bolso do proprietário. Esses reais/dólares são difíceis de separar. Equipes de marketing em grandes empresas podem estar vendo os seus orçamentos cortados com base em outras mudanças na sua indústria ou empresa, ou eles podem estar impossibilitados de pedir mais fundos, até que entre no orçamento do próximo ano. Se o custo é realmente um fator importante, que tipo de restrições que você pode impor sobre o processo de design para manter as coisas sob controle? Que tipo de ferramentas você pode aproveitar para minimizar o esforço, e ao mesmo tempo lidar com as necessidades e posicionamento único do seu cliente?
    24. 24. O cliente socialmente consciente Se o seu cliente valoriza seus esforços em construir sites que são acessíveis a pessoas com deficiências físicas, considere que o acesso à Internet está rapidamente se tornando um direito básico e necessidade na sociedade moderna. Um smartphone Android oferecido por uma operadora de celular pode ser o mais próximo que chegamos de acesso à Internet de banda larga universal.
    25. 25. “Não importa o dispositivo e sim o usuário final” Horácio Soares
    26. 26. A falta de uma fase de concepção estática Um dos grandes problemas relatados por designers foi a de que é necessário uma mudança no processo de design "velho" para tirar o máximo do design responsivo. Ao invés de criar imagens estáticas, os designers contam mais do que nunca em esboços rápidos, wireframing e tornando rápido e protótipos HTML CSS por "projetar" no navegador.
    27. 27. Navegação No passado, a navegação dos sites tendiam a ser horizontal ao longo da parte superior da página, ou, por vezes, para baixo à esquerda da página. Ele agora precisa de uma abordagem mais ponderada. É preciso refletir mais sobre a navegação e não mais usar uma solução enlatada simples.
    28. 28. Imagens O conjunto de opções disponíveis para manipulação de imagens em projetos responsivo é extremamente fragmentado. Até agora, o grupo da comunidade W3C não apoiou uma especificação , por isso ficamos com o que equivale a uma escolha pessoal de uma vasta gama de scripts para preencher para essa funcionalidade em falta, e entregar os assets apropriados para os dispositivos.
    29. 29. Imagens Para complicar ainda mais as coisas, os designers também deve considerar a próxima geração de dispositivos com alta densidade de pixels mostra como o novo iPad e Macbook Pro, juntamente com uma variedade de hardware não-Apple. Como código, imagens e ícones devem ser tão flexíveis quanto possível para garantir que os gráficos em dispositivos de alta densidade de pixels não olhar embaçado porque foram ampliados mal.
    30. 30. Breakpoints Muitos designers desperdiçam tempo em um layout responsivo que é baseado principalmente em "breakpoints da largura do dispositivo", nas dimensões de dispositivos pequenos. Tenha em mente, se sua mentalidade é afixada com dimensão dispositivo, então você não está falando de um verdadeiro layout responsivo. Layouts responsivos são aqueles que podem ajustar a qualquer tamanho de tela em que residem.
    31. 31. Conteúdo Muitas vezes, os projetistas ocultar ou descartar o conteúdo do site, a fim de torná-lo apto para um dispositivo ou menor tamanho de tela. Esta não é a melhor prática. Os usuários móveis esperam e merecem a experiência te mesmos usuários de desktop de conteúdo. Se você ocultar o conteúdo apenas por uma questão de ajustar o tamanho de uma tela menor, você vai privá-los dessa experiência. Para adquirir paridade conteúdo, você vai precisar alterar o conteúdo de um site dinamico, para que ele possa ser visto por todos.
    32. 32. Tamanho Paridade conteúdo não significa inchar seu site com conteúdo desnecessário ou excessivo a ponto de torná-lo mais lento. Se você olhar em volta, você vai encontrar muitos sites que possuem arquivos de tal tamanho que eles se tornam lento. É importante lembrar que mais de 74% dos usuários de celular vai deixar um site que leva mais de 5 segundos para carregar. Portanto, não hesite em cortar conteúdo supérfluo, enquanto ainda proporcionando uma ótima experiência de usuário.
    33. 33. Tabelas Tabelas responsivas são problemáticas, particularmente quando elas contém informação complexa ou simplesmente um grande número de linhas e colunas. Esmagar todas essas informações em uma tela pequena de uma forma utilizável continua a ser um desafio que eu não tenho certeza se foi adequadamente resolvido.
    34. 34. Conversão de sites antigos de largura fixa Como atualizar o código de um site de largura fixa para torná-lo responsivo, processo de design responsivo muitas vezes é bastante diferente do processo antigo projeto de layout fixo, e o código é projetado de forma menos flexível. A questão sobre o que fazer quando confrontados com a atualização de um site antigo é se fazer engenharia reversa de modelos e folhas de estilo existentes, ou optar por um reconstrução do zero(greenfield rebuild).
    35. 35. Usuários de versões antigas do IE Trabalhar com versões mais antigas do navegador (IE8 e anteriores), a questão principal que você vai encontrar é a falta de suporte para consultas de mídia CSS. Isso significa que se você estiver trabalhando com uma técnica de mobile-first, como 320andUp , as consultas de mídia (Media Querys) não vão iniciar e seu layout não será exibido corretamente em navegadores de desktop, assim você vai efetivamente acabar com um pequeno layout de tela em uma tela grande.
    36. 36. Tempo de testes e custo Como testar, quais dispositivos para teste, e potencialmente enorme custo de construção de um conjunto de testes de dispositivos . Para muitos designers, especialmente freelancers e empresas muito pequenas, é difícil construir um conjunto de testes muito além dos dispositivos que você possui pessoalmente. Este deparei com alto e claro na pesquisa. Muitas pessoas estão fazendo não com a inspeção navegador e arrastar a janela, juntamente com os testes em um aparelho pessoal e talvez um tablet. Obviamente, isto não é o ideal. Construindo mesmo uma modesta coleção de dispositivos é agora uma despesa de negócio necessário.
    37. 37. Tempo de testes e custo Tempo de teste também é um problema. Embora o tempo necessário para testar um site tem certamente aumentado,um pouco é compensado por uma melhor prototipagem, design no navegador e menor dependência de recursos visuais, de tamanho fixo estáticas.
    38. 38. Nunca comprometa RWD nunca deve ser usado para oferecer uma versão diluída do seu site. Em alguns casos, você deve considerar instalações adicionais em dispositivos móveis, como geo-localização e suporte off-line. Mantenha-o simples e fácil de usar: • não usar o navegador sniffing • não desativar o zoom • não ocultar o conteúdo.
    39. 39. Só importa Desempenho RWD pode ser barato de implementar, mas que deve ser planejada desde o início. Aplicando RWD para um local que serve 1Mb páginas + nunca irá resultar em uma experiência melhor em dispositivos que operam em uma rede móvel. Responsive Web Design é uma das tecnologias mais importantes a aparecer nos últimos anos. Mas o uso de RWD mal pode ser pior do que não oferecê-lo em tudo.
    40. 40. Adotandar um Tema WordPress Responsivo é mais do que Install-and-go
    41. 41. Pensar além do tema Tendo um tema responsivo não garante uma boa experiência do usuário móvel.
    42. 42. A funcionalidade mobile mais importante A mais importante funcionalidade do seu site para um usuário mobile é performance.
    43. 43. Por onde começar? Escolher uma framework ou não? Boilerplate? Tema em branco, partir do zero, comprar?
    44. 44. Temas, onde encontrar? ThemeForest http://themeforest.net/search?utf8= %E2%9C%93&term=Responsive+WordPr ess+themes Elegant Themes http://www.elegantthemes.com/gall ery/category/responsive/
    45. 45. WooThemes http://www.woothemes.com/product- category/themes/?prod_cat[]=1051&s=& post_type=product StudioPress http://www.studiopress.com/responsiv e-wordpress-themes Temas, onde encontrar?
    46. 46. Mojo Themes http://www.mojo- themes.com/categories/wordpress/r esponsive-wordpress/ Theme Trust http://themetrust.com/themes Temas, onde encontrar?
    47. 47. Plugins, onde encontrar? WordPress Mobile Pack http://wordpress.org/extend/plugins /wordpress-mobile- pack/other_notes/ WPtouch Pro http://www.bravenewcode.com/prod uct/wptouch-pro/
    48. 48. Performance 1 – Habilite GZIP 2 – Minifique JavaScript 3 – Minifique CSS 4 – Comprima o HTML 5 – Não redimensione imagens no HTML 6 – Otimize as imagens 7 – Pense no formato das imagens 8 – Diminua cookies e headers 9 – Junte arquivos JavaScript 10 – Juntar arquivos CSS 11 – Use Sprites 12 – Use Data URIs 13 – Configure os headers 14 – Tire firulas do design 15 – Especifique o tamanho das imagens 16 – Coloque o JavaScript no fim 17 – Coloque o CSS no topo 18/ 19 – Adie o carregamento do que puder e Abuse do carregamento assíncrono 20 – Otimize o First-View e o Above the Fold Time 21 – Design performático 22 – Automatize 23 – Use ferramentas de diagnóstico 24 – Pré-carregue componentes 25 – Escreva código eficiente 26 – Dispare logo o onload
    49. 49. Plugins - Javascript • jQuery Slider • Easy Navigation • Contact Form • Responsive Layout • Filterable Portfolio • Google Maps com Zoom • ScrollTo • modernizr • jQuery Masonry • HTML5 Shiv • jquery.rs.carousel.js • mousewheel • prettyPhoto • jquery easing • jquery event drag • jScrollPane
    50. 50. Criando 1. Criar um tema Pai 2. Criar um tema filho 3. Cuidar com as Sidebars e Widgets 4. Cuidar com menus de navegação 5. Cuidar com a Paginação
    51. 51. Style – Child Theme /* Theme Name: Duogramma - Child Theme Theme URI: http://duogramma.com/ Description: Tema Filho do Tema Principal Author: Jackson F. de A. Mafra Author URI: http://duogramma.com Template: duogramma Version: 0.1.0 */ @import url("../duogramma/style.css");
    52. 52. Style – Child Theme @media screen and (max-width:480px) { /* Making the headings red for smartphone users */ h1 { color: red; } } @media screen and (min-width:481px) and (max-width:1280px) { /* Making the headings Black targeting PC Users */ h1 { color:green; } } @media screen and (min-width:1281px) { /* Making the headings red for smartphone users */ h1 { color: black; } }
    53. 53. Script <?php function responsive_scripts_basic() { //first we must register the responsive framework's scripts wp_register_script('foundation-modernizr', get_template_directory_uri() . '/js/modernizr.foundation.js', array( 'jquery' ), true ); wp_register_script('foundation-main', get_template_directory_uri() . '/js/foundation.js', true ); wp_register_script('foundation-app', get_template_directory_uri() . '/js/app.js', true ); //next, we enqueue the script so it gets placed into the theme's header wp_enqueue_script( 'foundation-modernizr' ); wp_enqueue_script( 'foundation-main' ); wp_enqueue_script( 'foundation-app' ); } add_action( 'wp_enqueue_scripts', 'foundation_javascript_inclusion', 5 );
    54. 54. Style <?php function responsive_styles() { //register styles for our theme wp_register_style( 'foundation-stylesheet', get_template_directory_uri() . '/css/foundation.css', array(), 'all' ); wp_register_style( 'foundation-app-stylesheet', get_template_directory_uri() . '/css/app.css', array(), 'all'); wp_enqueue_style( 'foundation-stylesheet' ); wp_enqueue_style( 'foundation-app-stylesheet' ); } add_action( 'wp_enqueue_scripts', 'foundation_stylesheet_inclusion' );
    55. 55. Ferramentas • http://mediaqueri.es/ • http://zurb.com/playground/responsive-sketchsheets • http://cferdinandi.github.io/kraken/ • http://responsivehero.com/ • https://jetstrap.com/ • http://underscores.me/ • http://froont.com/ • http://pxtoem.com/ • http://www.layoutit.com/ • https://quirktools.com/screenfly/
    56. 56. Fontes  Sergio Lopes - http://sergiolopes.org/palestra-mobile- web/#slide-capa  Ethan Marcotte - http://www.abookapart.com/products/responsive-web- design  Luke Wroblewski - http://www.abookapart.com/products/mobile-first  Smashing Magazine - http://www.smashingmagazine.com/  Brad Frost - http://bradfrostweb.com/  Steve Souders - http://www.stevesouders.com/blog/  Brendan Eich – http://brendaneich.com
    57. 57. Fontes  Paul Kinlan – http://paul.kinlan.me/  Arquitetura de Informacao - http://arquiteturadeinformacao.com/2012/07/22/5- coisas-que-aprendi-em-um-projeto-mobile-first- responsive-design-para-o-google/  Mobile book - Smash Magazine - https://shop.smashingmagazine.com/the-mobile-book- deluxe-bundle.html  http://wp.smashingmagazine.com/2012/07/26/adoptin g-responsive-wordpress-theme/
    58. 58. Obrigado

    ×