{"id":3160,"date":"2014-11-09T15:40:12","date_gmt":"2014-11-09T17:40:12","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=3160"},"modified":"2015-05-10T22:00:52","modified_gmt":"2015-05-11T00:00:52","slug":"frontinpoa-anotacoes-das-palestras","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/web-design\/frontinpoa-anotacoes-das-palestras","title":{"rendered":"Front In POA: Anota\u00e7\u00f5es das Palestras"},"content":{"rendered":"<p>Aconteceu no dia 08 de novembro mais um evento <strong>Front In POA<\/strong>. O Evento contou com participantes renomados na \u00e1rea e conhecidos em eventos de Front-End aqui no Brasil.<\/p>\n<p>A organiza\u00e7\u00e3o mandou muito bem ao escolher os assuntos das palestras, ficaram bem variadas, por\u00e9m nunca fugindo do foco principal do evento que era o <strong>desenvolvimento Front-End<\/strong>. Reuni aqui algumas anota\u00e7\u00f5es feitas por mim e alguns slides utilizados no evento.<\/p>\n<p>Site oficial do evento: <a href=\"http:\/\/frontinpoa.com.br\/2014\/\" target=\"_blank\">http:\/\/frontinpoa.com.br\/2014\/<\/a><\/p>\n<h2>Repensando o uso do jQuery<\/h2>\n<p>Vin\u00edcius Almeida<br \/>\n<a href=\"https:\/\/twitter.com\/vimoding\">@vimoding<\/a><\/p>\n<blockquote><p>jQuery \u00e9 a biblioteca JavaScript mais utilizada no mundo. Por\u00e9m s\u00e3o raros os debates sobre formas de tirar o melhor proveito da sua API. Vamos come\u00e7ar a mudar esse cen\u00e1rio falando sobre a forma que escrevemos c\u00f3digo em cima dos ombros desse gigante.<\/p><\/blockquote>\n<ul>\n<li>De um tempo para c\u00e1 come\u00e7ou se contestar o uso do jquery. Pessoal come\u00e7ou procurar  alternativas ao jquery. Pelo tamanho da biblioteca, por exemplo.<\/li>\n<li>Hoje em dia quase n\u00e3o se fala dos benef\u00edcios do jquery. APIs<\/li>\n<li>\u00c9 a mais utilizada no mundo ainda<\/li>\n<li>M\u00e1 fama dos plugins jQuery<\/li>\n<li>Escrever componentes na forma de plugins<\/li>\n<li>Repetir menos a chamada dos plugins. Usar &#8212;-data atributos&#8212; para isso. Utiliza\u00e7\u00e3o dos data atributos para inicializar valores no HTML ao inv\u00e9s de iniciar no m\u00e9todo data()<\/li>\n<li>Usar os data atributos a nosso favor.<\/li>\n<li>Usamos colchetes pra pegar os data atributos do html.<\/li>\n<li>No lugar de passar true, false&#8230; no js passar no html.<\/li>\n<li>A vantagem \u00e9 que temos componentes que se inicializam automaticamente. Assim elevamos o n\u00edvel do nosso c\u00f3digo.\n<\/li>\n<li>m\u00e8todo .one()<\/li>\n<\/ul>\n<p>Link recomendado pelo Palestrante: <a href=\"https:\/\/dev.opera.com\/articles\/perfect-javascript-framework\/\">In search of the perfect JavaScript framework<\/a><\/p>\n<p><strong>Slides da palestra:<\/strong><\/p>\n<p><script async class=\"speakerdeck-embed\" data-id=\"21660e80496f0132f4145e2d20eae4a4\" data-ratio=\"1.33333333333333\" src=\"\/\/speakerdeck.com\/assets\/embed.js\"><\/script><\/p>\n<h2>Saindo da caixa: Um novo workflow para produ\u00e7\u00e3o de projetos Web<\/h2>\n<p>Renatho de Carli<br \/>\n<a href=\"https:\/\/twitter.com\/renatho\">@renatho<\/a><\/p>\n<blockquote><p>Os processos utilizados pelas empresas ainda est\u00e3o muito focados nos entreg\u00e1veis tendo como consequ\u00eancia uma forma de trabalho que n\u00e3o faz muito sentido. Entenda como o front-end pode ser utilizado como base para se construir um workflow de produ\u00e7\u00e3o mais inteligente, l\u00f3gico e que suporte as necessidades atuais de mercado.<\/p><\/blockquote>\n<ul>\n<li>Algo diferente da forma que trabalhamos hoje. Tem que sair da caixa pra entender as vantagens desse novo modo de trabalho.<\/li>\n<li>As pessoas (cliente) esperam cada vez mais entregas com prazos menores<\/li>\n<li>Ajustar pre\u00e7o do projeto \u00e0 quantidade de desenvolvedores.<\/li>\n<li>Processo de desenvolvimento hoje. E o mais usado. 1\u00ba Arquitetura da informa\u00e7\u00e3o. 2\u00ba Cria\u00e7\u00e3o do Design. 3\u00ba front-End. 4\u00ba Beck- End. Passar o desenho para o Browser(HTML), por cor no desenho (CSS) fazer intera\u00e7\u00e3o funcionar (Beck-End);<\/li>\n<li>Por que se trabalha nesse formato? A maioria trabalha nesse formato porque n\u00e3o conhece outro. Acham que \u00e9 o padr\u00e3o do mercado. Normalmente n\u00e3o fazem um estudo do processo de desenvolvimento;<\/li>\n<li>Alguns problemas por esse formato de trabalho:<\/li>\n<ul>\n<li>Falha na comunica\u00e7\u00e3o, falta de integra\u00e7\u00e3o, falha de comunica\u00e7\u00e3o entre equipe e cliente. Profissional n\u00e3o conhece outra setor (designer e beck)<\/li>\n<\/ul>\n<li>Um novo modelo (blue sky).Temos uma margem maior de erro. Podemos errar mais. <\/li>\n<li>HTML, CSS, JS. O html j\u00e1 exatamente o que se vai ter nas telas(wrireframe). Ent\u00e3o porque n\u00e3o se fazer o wireframe j\u00e1 no HTML. O CSS j\u00e1 \u00e9 o design.<\/li>\n<li>Separa\u00e7\u00e3o em m\u00f3dulos (conceituais). N\u00e3o tem o porqu\u00ea ter uma serie de entregas, que v\u00e3o se replicando&#8230;<\/li>\n<li>Mais responsabilidade, pois design vai fazer layout junto do front. Mais envolvimento entre os integrantes.<\/li>\n<li>&#8212;-Modulo design in the browser&#8212;&#8211; desenvolver o design direto no navegador. Modulo wireframe in the browser Mais agilidade, n\u00e3o tem que refazer o trabalho. psd para html.<\/li>\n<li>Menos conflito entre designer e desenvolvedores.<\/li>\n<li>O designer usa o css no lugar do photoshop.<\/li>\n<li>Mais organiza\u00e7\u00e3o. O arquiteto da informa\u00e7\u00e3o j\u00e1 pode dar nome aos m\u00f3dulos.<\/li>\n<li>Atomic  design pode ser agregado nos outros m\u00f3dulos;<\/li>\n<li>Uma coisa que n\u00e3o se deve fazer. Usar classe com o nome de bot\u00e3o amarelo. N\u00e3o usar. CSS \u00e9 estilo isso muda. por nome sem\u00e2ntico;<\/li>\n<li>M\u00f3dulo de checklist. ter um checklist padr\u00e3o. Tem v\u00e1rias ferramentas pra isso. web developer checklist. O ideial \u00e9 voc\u00ea criar a sua<\/li>\n<li>&#8212;<a href=\"http:\/\/html5boilerplate.com\/\">html5boilerplate<\/a>&#8212;&#8211;<\/li>\n<li>Desafio maior pra usar modelo blue sky \u00e9 mudar a mentalidade. Sair da zona de conforto. Se fosse come\u00e7ar hoje usando isso seria melhor, mas como conhecemos o outro m\u00e9todo&#8230;<\/li>\n<\/ul>\n<h2>Dados sobre dados: Micro Data e Open Graph<\/h2>\n<p>Leonardo Souza<br \/>\n<a href=\"https:\/\/twitter.com\/leobetosouza\">@leobetosouza<\/a><\/p>\n<blockquote><p>Como que um pouquinho de metainforma\u00e7\u00e3o pode ajudar seu projeto.<\/p><\/blockquote>\n<ul>\n<li>Nome de quem escreveu j\u00e1 \u00e9 um meta dado, meta informa\u00e7\u00e3o&#8230;<\/li>\n<li>Sem\u00e2ntica do HTML pode ser estendida. <\/li>\n<li>J\u00e1 foi usado: microfirmats, rdfa, microdata, open graph<\/li>\n<li>Microdata nada mais \u00e9 que chave e valor.<\/li>\n<li>Microdata usamos hoje.<\/li>\n<li>Dados linkados, linked data. schema.org<\/li>\n<li>HTML5 microdata api<\/li>\n<li>Open graph protocol. Criar title s\u00f3 para face por exemplo, title para seo e nessa microda passa o titulo que quer que apare\u00e7a para o face ao compartilhar.<\/li>\n<li>Microdatas n\u00e3o est\u00e1 no cotidiano dos desenvolvedores.<\/li>\n<\/ul>\n<p><a href=\"http:\/\/leobetosouza.com.br\/palestra-microdata-open-graph\/#\/\">Slides da palestra<\/a><\/p>\n<h2>O melhor da monitora\u00e7\u00e3o de Web Performance<\/h2>\n<p>Davidson Fellipe<br \/>\n<a href=\"https:\/\/twitter.com\/davidsonfellipe\">@davidsonfellipe<\/a><\/p>\n<blockquote><p>Como encarar os desafios da \u00e1rea de <a href=\"https:\/\/www.kadunew.com\/blog\/web-design\/tecnicas-e-ferramentas-para-melhorar-a-performance-de-sites\" title=\"T\u00e9cnicas e ferramentas para melhorar a performance de sites\">web performance<\/a> e conhecer quais s\u00e3o as melhores ferramentas para auxiliar o desenvolvimento de p\u00e1ginas r\u00e1pidas e mant\u00ea-las r\u00e1pidas. Al\u00e9m disso, fazer a integra\u00e7\u00e3o de algumas dessas ferramentas de uma forma f\u00e1cil para melhorar a compreens\u00e3o desses indicadores para toda a equipe de desenvolvimento.<\/p><\/blockquote>\n<ul>\n<li>Para comparar performance temos que ter uma m\u00e9trica pr\u00e9 definida.<\/li>\n<li>P\u00e1gina que aparece por muito tempo branca afeta diretamente a experi\u00eancia do usu\u00e1rio<\/li>\n<li>web performance \u00e9 user experience<\/li>\n<li>94% do carregamento da p\u00e1gina est\u00e1 relacionado \u00e0 parte do client-side<\/li>\n<li>Coisas b\u00e1sicas, concatenar arquivos CSS no header, cache expires&#8230;<\/li>\n<li>Reduzir request (data-uri, cancatenar CSS, JS, sprites)<\/li>\n<li>Usar o pagespeed module<\/li>\n<li>Ferramentas que podem ser utilizadas: <a href=\"http:\/\/yslow.org\/\">http:\/\/yslow.org\/<\/a>, <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\">https:\/\/developers.google.com\/speed\/pagespeed\/insights\/<\/a><\/li>\n<li>Link recomendado <a href=\"http:\/\/browserdiet.com\/pt\/\">http:\/\/browserdiet.com\/pt\/<\/a>, O guia definitivo de performance front-end <\/li>\n<li>Automatiza\u00e7\u00e3o para teste de performance usar o plugin <a href=\"https:\/\/www.npmjs.org\/package\/grunt-pagespeed\">pagespeed grunt<\/a>.<\/li>\n<li>Mensure performance<\/li>\n<\/ul>\n<p><strong>Slides da Palestra:<\/strong><\/p>\n<p><script async class=\"speakerdeck-embed\" data-id=\"482d09104b300132f285624d3aca0ff3\" data-ratio=\"1.29456384323641\" src=\"\/\/speakerdeck.com\/assets\/embed.js\"><\/script><\/p>\n<h2>Javascript ileg\u00edvel: como um conjunto de decis\u00f5es afeta seu c\u00f3digo<\/h2>\n<p>Rafael Specht da Silva<br \/>\n<a href=\"https:\/\/twitter.com\/rafael_sps\">@rafael_sps<\/a><\/p>\n<blockquote><p>Uma abordagem sobre padr\u00f5es de desenvolvimento javascript: estilo, organiza\u00e7\u00e3o, legibilidade de c\u00f3digo e &#8220;melhores pr\u00e1ticas&#8221; (tamb\u00e9m conhecidas como supersti\u00e7\u00f5es). \u00c0s vezes, pequenos detalhes na concep\u00e7\u00e3o de um projeto v\u00e3o determinar como ele vai crescer. Essa palestra visa discutir e comparar alguns destes ressaltando suas vantagens.<\/p><\/blockquote>\n<ul>\n<li>Fa\u00e7a seus c\u00f3digos de forma clara e limpa. Isso facilita a manuten\u00e7\u00e3o<\/li>\n<li>Escreva seus c\u00f3digo pensando em quem dar\u00e1 manuten\u00e7\u00e3o<\/li>\n<li>Se for para colocar coment\u00e1rios \u00f3bvios ou que n\u00e3o dizem nada, melhor n\u00e3o por<\/li>\n<li>Coloque nomes em EventHandlers, mais f\u00e1cil para debugar o script usando as ferramentas do desenvolvedor, pois mostrar\u00e1 o nome<\/li>\n<li>&#8220;Finja que o programador que trabalha com voc\u00ea \u00e9 um psicopata que sabe onde voc\u00ea mora&#8221;, ou seja, escreva bons c\u00f3digos&#8230;<\/li>\n<\/ul>\n<p><strong>Slides da plestra:<\/strong><\/p>\n<p><script async class=\"speakerdeck-embed\" data-id=\"c5a737a04a6e01320f0d5603e3ccce24\" data-ratio=\"1.77777777777778\" src=\"\/\/speakerdeck.com\/assets\/embed.js\"><\/script><\/p>\n<h2>Design orientado a C\u00f3digo<\/h2>\n<p>Giancarlo Vorga Jung<br \/>\n<a href=\"https:\/\/twitter.com\/cntrlx\">@cntrlx<\/a><\/p>\n<blockquote><p>Hoje em dia, um desenvolvedor front-end precisa manjar de tudo, desde Javascript at\u00e9 Gestalt, entretanto, \u00e9 poss\u00edvel para um designer adaptar seu processo criativo e suas din\u00e2micas de trabalho para a web sem precisar embrenhar-se em anos de estudo em linguagens de programa\u00e7\u00e3o e arquitetura de software. Na talk, ser\u00e3o apresentadas conceitos chaves de programa\u00e7\u00e3o, rotinas e t\u00e9cnicas que podem ser usadas no dia-a-dia de um designer que tenha pouca, ou nenhuma experiencia, com desenvolvimento web.<\/p><\/blockquote>\n<ul>\n<li>Dificuldade de rela\u00e7\u00e3o entre Design e Front-Ends<\/li>\n<li>Quem trabalha com web precisa saber programar?<\/li>\n<li>Por onde come\u00e7ar <a href=\"http:\/\/teamtreehouse.com\/\">Treehouse<\/a> mais avan\u00e7ado e <a href=\"http:\/\/www.codecademy.com\/pt-BR\/learn\">Coacamy<\/a> mais basico.<\/li>\n<li>Dificuldade em emular programas da adobe, por exemplo, no Linux.<\/li>\n<li>Quando o Designer conhece o basico de HTML e CSS ele consegue deixar camadas, grupo de camadas mais organizado para o Front.<\/li>\n<li>Usar programas, papel, quadro branco para fazer wireframes <\/li>\n<li><a href=\"https:\/\/www.kadunew.com\/blog\/uncategorized\/devtools-ferramentas-do-seu-navegador-dicas-e-macetes\">devtools do Chrome<\/a>, firebug boas ferramendas para o aprendizado de designers verem como as coisas funcionam.<\/li>\n<li>Gestalt &#8211; teoria da boa forma<\/li>\n<li><a href=\"http:\/\/projetoe.com\/#sthash.f7iL1Tuj.q5f0FVyl.dpbs\">Projeto E<\/a><\/li>\n<li>Dreamweaver mais atrapalha do que ajuda. (hehe)<\/li>\n<\/ul>\n<h2>O que o front end pode aprender com o Rails<\/h2>\n<p>Lucas Mazza<br \/>\n<a href=\"https:\/\/twitter.com\/lucasmazza\">@lucasmazza<\/a><\/p>\n<blockquote><p>O Rails completou 10 anos de vida e diversas li\u00e7\u00f5es desses 10 anos podem nos ajudar a construir as funda\u00e7\u00f5es para os pr\u00f3ximos 10 anos do mundo de front end. Vamos refletir sobre alguns aspectos que ajudaram a stack do framework a evoluir durante os anos e como podemos aplicar isso no mundo de CSS e JS para melhorar as nossas aplica\u00e7\u00f5es.<\/p><\/blockquote>\n<ul>\n<li>Open Source n\u00e3o \u00e9 s\u00f3 programar. Lucas participa reportando bugs e atualizando a documenta\u00e7\u00e3o (entrevista antes da palestra)\n<\/li>\n<li>Coisas que a comunidade Rails aplica podem ser aplicadas na comunidade JavaScript tamb\u00e9m<\/li>\n<li>Rail e JavaScript tem dificuldade e solu\u00e7\u00f5es semelhantes<\/li>\n<li>S\u00e3o in\u00fameras as APIs<\/li>\n<\/ul>\n<p>Slides da palestra:<\/p>\n<p><script async class=\"speakerdeck-embed\" data-id=\"9c7b3db04afc0132104a12561742bc27\" data-ratio=\"1.33333333333333\" src=\"\/\/speakerdeck.com\/assets\/embed.js\"><\/script><\/p>\n<h2>#CSS { styles: oh-yeah; }<\/h2>\n<p>\u00c1tila Fassina<br \/>\n<a href=\"http:\/\/twitter.com\/atilafassina\">@atilafassina<\/a><\/p>\n<blockquote><p>CSS \u00e9 uma linguagem declarativa extremamente permissiva e democr\u00e1tica. Ela dificilmente joga exce\u00e7\u00f5es, e permite que um iniciante crie coisas desde os primeiros passos. Mas isso n\u00e3o quer dizer que CSS seja f\u00e1cil, muito menos que n\u00e3o existem boas pr\u00e1ticas. Nesta talk, vamos aprender boas pr\u00e1ticas, features pouco usadas que poderiam poupar algum trabalho e at\u00e9 alguns hacks<\/p><\/blockquote>\n<ul>\n<li>CSS \u00e9 simples, f\u00e1cil?<\/li>\n<li>bruce lee morreu n\u00e3o treinando, mas tentado estilizar um select<\/li>\n<p> (Essa foi muito boa haha)<\/p>\n<li>CSS denora um dia pra aprender mas demora uma vida inteira pra dominar.<\/li>\n<li>Informa\u00e7\u00f5es fora do documento <code>:pseudo-classes<\/code><\/li>\n<li>conteudo que n\u00e3o existe no documento <code>::pseudo-element<\/code><\/li>\n<li>Combina\u00e7\u00f5es, use os seletores > + ~ <\/li>\n<li>border-radius com mais de quatro valores existe<\/li>\n<li>N\u00e3o carregar fontes para &#8220;bold&#8221; ou &#8220;italic&#8221; (perda de performance)<\/li>\n<li>uso de ::before pra for\u00e7ar carregamento da font foi uma solu\u00e7\u00e3o em um projeto<\/li>\n<li>FontForge para editar arquivos de fonte&#8230;.<\/li>\n<li>Propriedade <strong>will-change<\/strong> das CSS(cria stack context no elemento diz ao navegador qual conte\u00fado otimizar), otimiza processamento nas modifica\u00e7\u00e3o. Ent\u00e3o ponho will-chand em tudo? n\u00e3o n\u00e9&#8230; As vezes otimizar tudo na verdade \u00e9 n\u00e3o otimizar nada. N\u00e3o tem como otimizar tudo de uma s\u00f3 vez. Will chante n\u00e3o \u00e9 instant\u00e2neo. Demora um pouco. O ideal se for usar no click de um elemento por exemplo melhor por no hover&#8230; Atualmente s\u00f3 funciona no Opera e chrome.<\/li>\n<\/ul>\n<p>Slides da apresenta\u00e7\u00e3o:<\/p>\n<p><script async class=\"speakerdeck-embed\" data-id=\"d225e7204a990132f286624d3aca0ff3\" data-ratio=\"1.77777777777778\" src=\"\/\/speakerdeck.com\/assets\/embed.js\"><\/script><\/p>\n<h2>Componentes\u2028 para a web<\/h2>\n<p>Jean Carlo Emer<br \/>\n<a href=\"http:\/\/twitter.com\/jcemer\">@jcemer<\/a><\/p>\n<blockquote><p>Uma vis\u00e3o cr\u00edtica sobre o hype da vez. Esta palestra tem como norte tirar o ru\u00eddo e fundamentar (inclusive com exemplos) o\u2028 que realmente importa neste papo de componentes.<\/p><\/blockquote>\n<ul>\n<li>Cole\u00e7\u00e3o de padr\u00e3o. Encapsular, compor e reusar na plataforma web<\/li>\n<li>Mais f\u00e1cil usar classes para estilizar do que  criar novos elementos<\/li>\n<p>A partir dos componentes podemos criar sistemas mais complexos. Compor pequenas partes para chegar ao maior.<br \/>\n(Cusstom elements templates shadow dom html import) = components web.<br \/>\nDerrubando web components, n\u00e3o se assuste&#8230;<br \/>\nDefinir elemento n\u00e3o \u00e9 nada novo. Isso ja era poss\u00edvel no IE6<br \/>\nesquema.org pra garant que buscadores v\u00e3o entender melhor. <\/p>\n<li>Polymer divulga uso dos web components (projeto do Google). Exemplo: Elemento select que um comportamento diferente do padr\u00e3o do navegador. Pra que reinventar elementos que j\u00e1 existem?<\/li>\n<li>Pra que reinventar elementos, select por exemplo.<\/li>\n<li>Por o template no JS n\u00e3o no HTML<\/li>\n<li>N\u00e3o mexer em coisa que n\u00e3 \u00e9 tua. Tirar controles de v\u00eddeo por exemplo. <\/li>\n<li>Iframe tem ainda porque \u00e9 a unica maneira ainda de isolar  c\u00f3digo externo.<\/li>\n<li>Web componentes ainda n\u00e3o est\u00e3o prontos para serem usado.<\/li>\n<li>Estude outras coisas antes de web components (Shadow DOM , m\u00f3dulos js&#8230;)<\/li>\n<li>Link para leitura: <a href=\"http:\/\/developer.telerik.com\/featured\/web-components-arent-ready-production-yet\/\">Why Web Components Aren\u2019t Ready for Production\u2026 Yet<\/a><\/li>\n<\/ul>\n<p><strong>Slides da palestra:<\/strong><\/p>\n<p><script async class=\"speakerdeck-embed\" data-id=\"454be26049a601320f0c5603e3ccce24\" data-ratio=\"1.33333333333333\" src=\"\/\/speakerdeck.com\/assets\/embed.js\"><\/script><\/p>\n<h2>Progressive enhancement na pr\u00e1tica<\/h2>\n<p>Luiz Corte Real<br \/>\n<a href=\"https:\/\/twitter.com\/srsaude\">@srsaude<\/a><\/p>\n<blockquote><p>N\u00e3o sabe o que \u00e9 progressive enhancement? Ou sabe mas n\u00e3o consegue colocar na pr\u00e1tica? Nesta palestra, veremos progressive enhancement numa abordagem pr\u00e1tica e abrangente, analisando exemplos de sites reais com problemas comuns. Vamos desmistificar a ideia e ver por que todos deveriam segui-la para construir aplica\u00e7\u00f5es mais robustas, acess\u00edveis e f\u00e1ceis de manter.<\/p><\/blockquote>\n<ul>\n<li>O problema n\u00e3o \u00e9 o IE6 nos sites desconfigurados. Pessoa com leitores de tela, problemas motores, baixa vis\u00e3o, mobile&#8230; Temos um problema sim.<\/li>\n<li>Fazer o site todo bonito depois resolver problemas porque layout quebrou num browser, etc, etc&#8230; da uma depress\u00e3o graceful degradation n\u00e3o \u00e9 legal. O melhor \u00e9 come\u00e7ar por cen\u00e1rios mais limitados<\/li>\n<li>Primeiro o dever depois o prazer.(<a href=\"https:\/\/www.kadunew.com\/blog\/web-design\/melhoria-progressiva-e-mobile-first\">Melhoria progressiva<\/a>)<\/li>\n<li>Come\u00e7ar pelo <a href=\"https:\/\/www.kadunew.com\/blog\/html\/a-importancia-do-html-semantico\" title=\"A import\u00e2ncia do HTML sem\u00e2ntico\">HTML sem\u00e2ntico<\/a>.<\/li>\n<li>No CSS come\u00e7ar com aquelas propriedades que funcionam em navegadores mais antigos, propriedade que ainda n\u00e3o tem suporte, etc<\/li>\n<li>\u00c9 muito mais f\u00e1cil ir evoluindo o layout, pois funciona para todos desde o come\u00e7o.<\/li>\n<li><a href=\"https:\/\/www.kadunew.com\/blog\/web-design\/melhoria-progressiva-e-mobile-first\" title=\"Melhoria Progressiva e Mobile First: Dupla Perfeita\">Mobile first<\/a> n\u00e3o \u00e9 apenas para os front, \u00e9 para todo o projeto.<\/li>\n<li>Depende de JavaScript para funcionar? Ent\u00e3o cria no JavaScript.<\/li>\n<li>Muito importante pensar na sua aplica\u00e7\u00e3o offline<\/li>\n<li>====HOODIE web offline&#8212;&#8212; <a href=\"http:\/\/hood.ie\/\">http:\/\/hood.ie\/<\/a><\/li>\n<li>Resumo design mobile first<\/li>\n<ul>\n<li>Design mobile-first<\/li>\n<li>HTML sem\u00e2ntinco funcional&#8230;<\/li>\n<li>Melhorar com css, fazer media com min-width, recursos mais b\u00e1sicos do CSS, pensar nos navegadores mais antigos primeiro.<\/li>\n<li>JS n\u00e3o obstrutivo, pensar nos navegadores antigo primeiro.<\/li>\n<li>&#8212;-offline first para aplica\u00e7\u00f5es web&#8212;-<\/li>\n<\/ul>\n<\/ul>\n<p><a href=\"https:\/\/docs.google.com\/presentation\/d\/1qu6XfB_Ee1rb9u-W8uyXAHdW1ymAawdD4ndnjdzXAM4\/pub?start=false&#038;loop=false&#038;delayms=3000&#038;slide=id.g36c2719d3_07\">Link dos slides da palestra<\/a><\/p>\n<h2>Offline Web do jeito certo com Service Workers<\/h2>\n<p>S\u00e9rgio Lopes<br \/>\n<a href=\"https:\/\/twitter.com\/sergio_caelum\">@sergio_caelum<\/a><\/p>\n<blockquote><p>Se voc\u00ea j\u00e1 tentou usar a Application Cache API para suportar offline na Web, deve ter sofrido bastante. A nova especifica\u00e7\u00e3o dos ServiceWorkers promete revolucionar o desenvolvimento Web com melhor controle de offline e outros truques que veremos nessa palestra.<\/p><\/blockquote>\n<ul>\n<li>APP cache \u00e9 chato, limitado e complicado<\/li>\n<li>maravilhoso mundo do service workers, \u00e9 uma api javascript. Tem que ter um ponto de entrada para registrar o funcionamento offline (service workers)<\/li>\n<li>Usando workers usu\u00e1rio fecha a a baba mas n\u00e3o o script, como ocorre hoje em dia<\/li>\n<li>CACHE API fazer cache de coisas offline<\/li>\n<li>Com Service Workers podemos montar scripts para cachear p\u00e1gina de acordo com nossas necessidades<\/li>\n<li>Evento onactivate \u00e9 utilizado para ativar o Workers .<\/li>\n<li>Service Worker s\u00f3 funciona em HTTPS por causa da criptografia<\/li>\n<li>Service Workers n\u00e3o tem ainda uma documenta\u00e7\u00e3o conclu\u00edda<\/li>\n<li>Para testar podemos usar o <a href=\"https:\/\/www.google.com\/intl\/en\/chrome\/browser\/canary.html\">Chrome Canary<\/a> habilitando algumas funcionalidade<\/li>\n<li>Esse \u00e9 o futuro da Web<\/li>\n<\/ul>\n<p><strong>Slides da palestra<\/strong><\/p>\n<p><iframe loading=\"lazy\" src=\"\/\/www.slideshare.net\/slideshow\/embed_code\/40646311\" width=\"425\" height=\"355\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" style=\"border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;\" allowfullscreen> <\/iframe> <\/p>\n<div style=\"margin-bottom:5px\"> <strong> <a href=\"\/\/pt.slideshare.net\/caelumdev\/serviceworkers-sergio\" title=\"Offline Web com Service Workers - TablelessConf 2014 - S\u00e9rgio Lopes\" target=\"_blank\">Offline Web com Service Workers &#8211; TablelessConf 2014 &#8211; S\u00e9rgio Lopes<\/a> <\/strong> from <strong><a href=\"\/\/www.slideshare.net\/caelumdev\" target=\"_blank\">Caelum<\/a><\/strong> <\/div>\n<p>Siga-me no Twitter: <a href=\"http:\/\/twitter.com\/kadunew\" rel=\"nofollow\">@kadunew<\/a> ou assine nosso <a href=\"https:\/\/www.kadunew.com\/blog\/feed\">Feed<\/a> e fique por dentro de todas atualiza\u00e7\u00f5es aqui do blog.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aconteceu no dia 08 de novembro mais um evento Front In POA. O Evento contou com participantes renomados na \u00e1rea e conhecidos em eventos de Front-End aqui no Brasil. A organiza\u00e7\u00e3o mandou muito bem ao escolher os assuntos das palestras, ficaram bem variadas, por\u00e9m nunca fugindo do foco principal do evento que era o desenvolvimento [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[],"class_list":["post-3160","post","type-post","status-publish","format-standard","hentry","category-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Front In POA: Anota\u00e7\u00f5es das Palestras<\/title>\n<meta name=\"description\" content=\"Front In Poa: Minhas anota\u00e7\u00f5es de tudo o que rolou no evento Front In Poa 2014. CONFIRA!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kadunew.com\/blog\/web-design\/frontinpoa-anotacoes-das-palestras\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Front In POA: Anota\u00e7\u00f5es das Palestras\" \/>\n<meta property=\"og:description\" content=\"Front In Poa: Minhas anota\u00e7\u00f5es de tudo o que rolou no evento Front In Poa 2014. CONFIRA!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kadunew.com\/blog\/web-design\/frontinpoa-anotacoes-das-palestras\" \/>\n<meta property=\"og:site_name\" content=\"KADUNEW\" \/>\n<meta property=\"article:published_time\" content=\"2014-11-09T17:40:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-05-11T00:00:52+00:00\" \/>\n<meta name=\"author\" content=\"Kadu Oliveira\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kadu Oliveira\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/frontinpoa-anotacoes-das-palestras\",\"url\":\"https:\/\/www.kadunew.com\/blog\/web-design\/frontinpoa-anotacoes-das-palestras\",\"name\":\"Front In POA: Anota\u00e7\u00f5es das Palestras\",\"isPartOf\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\"},\"datePublished\":\"2014-11-09T17:40:12+00:00\",\"dateModified\":\"2015-05-11T00:00:52+00:00\",\"author\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\"},\"description\":\"Front In Poa: Minhas anota\u00e7\u00f5es de tudo o que rolou no evento Front In Poa 2014. CONFIRA!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/frontinpoa-anotacoes-das-palestras#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kadunew.com\/blog\/web-design\/frontinpoa-anotacoes-das-palestras\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/frontinpoa-anotacoes-das-palestras#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kadunew.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/www.kadunew.com\/blog\/category\/web-design\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Front In POA: Anota\u00e7\u00f5es das Palestras\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\",\"url\":\"https:\/\/www.kadunew.com\/blog\/\",\"name\":\"KADUNEW\",\"description\":\"Artigos sobre Front-End e Programa\u00e7\u00e3o web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\",\"name\":\"Kadu Oliveira\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"caption\":\"Kadu Oliveira\"},\"sameAs\":[\"https:\/\/www.kadunew.com\/blog\"],\"url\":\"https:\/\/www.kadunew.com\/blog\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Front In POA: Anota\u00e7\u00f5es das Palestras","description":"Front In Poa: Minhas anota\u00e7\u00f5es de tudo o que rolou no evento Front In Poa 2014. CONFIRA!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.kadunew.com\/blog\/web-design\/frontinpoa-anotacoes-das-palestras","og_locale":"pt_BR","og_type":"article","og_title":"Front In POA: Anota\u00e7\u00f5es das Palestras","og_description":"Front In Poa: Minhas anota\u00e7\u00f5es de tudo o que rolou no evento Front In Poa 2014. CONFIRA!","og_url":"https:\/\/www.kadunew.com\/blog\/web-design\/frontinpoa-anotacoes-das-palestras","og_site_name":"KADUNEW","article_published_time":"2014-11-09T17:40:12+00:00","article_modified_time":"2015-05-11T00:00:52+00:00","author":"Kadu Oliveira","twitter_misc":{"Escrito por":"Kadu Oliveira","Est. tempo de leitura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.kadunew.com\/blog\/web-design\/frontinpoa-anotacoes-das-palestras","url":"https:\/\/www.kadunew.com\/blog\/web-design\/frontinpoa-anotacoes-das-palestras","name":"Front In POA: Anota\u00e7\u00f5es das Palestras","isPartOf":{"@id":"https:\/\/www.kadunew.com\/blog\/#website"},"datePublished":"2014-11-09T17:40:12+00:00","dateModified":"2015-05-11T00:00:52+00:00","author":{"@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05"},"description":"Front In Poa: Minhas anota\u00e7\u00f5es de tudo o que rolou no evento Front In Poa 2014. CONFIRA!","breadcrumb":{"@id":"https:\/\/www.kadunew.com\/blog\/web-design\/frontinpoa-anotacoes-das-palestras#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kadunew.com\/blog\/web-design\/frontinpoa-anotacoes-das-palestras"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.kadunew.com\/blog\/web-design\/frontinpoa-anotacoes-das-palestras#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kadunew.com\/blog"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/www.kadunew.com\/blog\/category\/web-design"},{"@type":"ListItem","position":3,"name":"Front In POA: Anota\u00e7\u00f5es das Palestras"}]},{"@type":"WebSite","@id":"https:\/\/www.kadunew.com\/blog\/#website","url":"https:\/\/www.kadunew.com\/blog\/","name":"KADUNEW","description":"Artigos sobre Front-End e Programa\u00e7\u00e3o web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05","name":"Kadu Oliveira","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","caption":"Kadu Oliveira"},"sameAs":["https:\/\/www.kadunew.com\/blog"],"url":"https:\/\/www.kadunew.com\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3160"}],"collection":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/comments?post=3160"}],"version-history":[{"count":18,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3160\/revisions"}],"predecessor-version":[{"id":3893,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3160\/revisions\/3893"}],"wp:attachment":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/media?parent=3160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/categories?post=3160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/tags?post=3160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}