SlideShare uma empresa Scribd logo
1 de 37
Edição de Homes com Javascript End to End iG – Internet Group
Agenda Cenário Problemas Premissaspara a Solução Sacadas Um pouquinho de tecnologia Futuro
Cenário
Cenário
Problemas Usabilidade Pop-ups everywhere. PoucoIntuitivo Burocracia (muitasetapas). Ediçãoinvasiva. Trocas de layout (Mudarposição de blocos)
Problemas Performance Lentidão Consumo (CPU, memória, etc.) Tarefasdesnecessárias (Geração de Cortes). Demoraparacriarnovosagendamentos.
Problemas Dados duplicados. Dificuldadeparatransmitiroconhecimentosobre a ferramenta. Inexistência de ediçãosimultânea.
Premissas Manutenção das coisas boas do CMS anterior (ex.: facilidadeparatrocarchamadas, edição de cortes). Intuitividade. Menosburocracia (pop-ups, confirmações...). Agilidade. Ediçãonãoinvasiva. Preview “quase” desnecessário.
Premissas Facilidadeparatrocar layout. Criaçãorápida de novosagendamentos. Facilidadeparadesenvolvernovoscomponentes. Ediçãosimultânea. Melhorar performance. Liberarservidores.
Sacadas Interface Intuitiva Idéias de interfaces de games. Tudoqueénecessárioparaeditarumapáginanaprópriapágina. Facilidadeparaacessaroconteúdo, paleta de componentes, navegarporseções... Arrastaresoltarpara a maioria das tarefas. Undo/Redo.
Sacadas Usarmais as máquinas dos editores Parque de máquinaspadronizado 2Gb Ram FF e Chrome Maisatividadesnasmáquinas dos editores. Renderização, em tempo de edição, nasmáquinas dos editores Cargado que for estritamentenecessário.
Sacadas ServidoresLeves Arquivosestáticos X conteúdodinâmico. REST. NoSQL (MongoDB). Linguagemconhecidapelosprogramadores de frontend (webdevs) Javascript. CSS Selectors (JQuery like).
Sacadas Modelo de dados simples eflexível (JSON). Facilidadepara: Adicionarcampos, trocartipos de componentes. Realizar undo/redo. Versionar. Enviar deltas de alteraçõesparaoutrasmáquinas (ediçãosimultânea). Criação de Agendamento = Cópia de JSON Natividade no JS. Integração com NoSQLs.
Frontend
Renderização / Templates Premissa de usar a máquina do editor. O queusar? Applets? Flash? Javascript! Como assim?
Renderização / Templates Pure http://beebole.com/pure/ Unobtrusive Templating (HTML longedalógica). ExtensívelaojQuery.
Renderização / Templates {                         "dados": {                             "chamada": {                                 "titulo": "Soumelhor do quebonita",                                 "olho": "Trêsmulheresextraordináriasmostramquehámais do quebeleza entre as suasqualidades",                                 "link": "http://delas.ig.com.br/comportamento/sou+melhor+do+que+bonita/n1597180210444.html",                                 "imagem": "",                                 "data": "Mon, 29 Aug 2011, 05:57:07 -0300",                                 "imagens": {                                     "imagem_316_237": "http://i0.ig.com/bancodeimagens/0y/gq/nk/0ygqnkhmdanz7pv5c3ef4pqq8.jpg",                                     "corte_316_237": "103991"                                 },                                 "chapeu": null,                                 "externo": false                             }                         },                         "tipo": "CHE00206",                         "especie": "componente",                         "id": "8ABE3E6B-9EB2-47D3-A39F-90222F102257"                     }
Renderização / Templates LÓGICA {         "a@target" : function(obj) {             return (obj.context.chamada && obj.context.chamada.externo) ? "_blank" : "";         },         "div > a img@src" : "chamada.imagens.imagem_316_237",         "div a@href" : "chamada.link",         "div a@title" : "chamada.titulo",         "div div h2 a" : "chamada.titulo",         "div div cite a" : "chamada.olho"     } HTML <div class="CHE00206 gd6 fl">     <div class="wrapper">         <a href=""  target="_self"><imgsrc="" width="316" height="237" alt="" /></a>             <div>                 <h2><a href=""></a></h2>                 <cite><a href=""></a></cite>             </div>     </div> </div>
Vamos ver como ficou?
Edição WYSIWYG – What you see is what you get! Edição só é perceptível quando passamos o mouse por cima dos componentes. Undo/Redo. Editores só são carregados se for solicitada a edição. Lógica de edição fora do HTML do componente.
Edição {         "componente" : {             "fonte" : "chamada",             "outline" : {                 "formulario" : FORMULARIO_PADRAO_CHAMADA             }, 	  "parametros" : {                 "resolucoes_cortes" : [                     {                         "largura" : 316,                         "altura" : 237                     }                 ]             }         }     }
Integrações Independência do CMS anterior Nãoconsumirserviços dele. Conteúdospersonalizadospor site (blogs de colunistas, galerias, etc.) SOLR REST paraconsumirconteúdo editorial (notícias, artigos, colunas, receitas, etc.). Rapidezparapesquisar/atualizarconteúdo.
Integrações Banco de Imagens Porenquanto, pop-up. Blogs eParceiros RSS de colunistas. Catálogo de Componentes. Futuro:  Trending Topics do Twitter relacionadosao site? Mapa de calordapágina? Teste A/B
Drag and Drop Conteúdosintegráveis, arrastáveisesoltáveis! :D {         "componente" : {             "fonte" : "chamada”,             … 	   "drag" : DRAG_PADRAO_CHAMADA,             "drop" : DROP_PADRAO_CHAMADA,              …             "parametros" : {                 "resolucoes_cortes" : [                     {                         "largura" : 316,                         "altura" : 237                     }                 ]             }         }     }
Backend
NodeJS.org Server-side Javascript Baseado no V8 (engine Javascript do Chrome). Muitoleve Orientado a eventos Processos > threads > ciclos Um thread tratadiversasrequisições. Tudoassíncronoparaque a mágicafuncione.
NodeJS.org Muitosmódulosdisponíveis. Contribuições no Github NPM sudonpm install modulo var mod = require(“modulo”);
Tratamento de Requisições Express http://expressjs.com/ Roteamento Tratamento das requisições (marshalling/unmarshalling de JSON). var app = express.createServer(); app.get('/', function(req, res){ res.send('Hello World'); }); app.listen(3000);
Publicação e Preview Como publicarestaticamente de maneiraprevisível no servidor? O queusar? PorquenãoJavascript? No servidor? Janela de browser no servidor?
Publicação e Preview JSDOM Módulodo NodeJS. https://github.com/tmpvar/jsdom Container DOM parainterpretarodocumento. Worker processes Renderizarconsomemuita CPU.
EdiçãoSimultânea Google Docs Like? Almost.  Comandosremotos. Undo/Redo remotos. Controle de versões das alterações. Reserva de componentese containers. Conteúdo “desreservado” considerado pronto parapublicação.
Edição Simultânea HTML5. Web Sockets. NodeJS workers. Incrivelmentefácil.
O que vem por aí… Edição do conteúdo (notícias, colunas, artigos…) Edição Inline? Com HTML5? Touch Screen? Dispositivosmóveis? Open source?
That’s all folks! @jwalendowsky jwalendowsky@ig.com

Mais conteúdo relacionado

Mais procurados

Construindo Diretivas com AngularJS
Construindo Diretivas com AngularJSConstruindo Diretivas com AngularJS
Construindo Diretivas com AngularJSRodrigo Branas
 
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JSDesenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JSRomulo Fagundes
 
O Poderoso AngularJS
O Poderoso AngularJSO Poderoso AngularJS
O Poderoso AngularJSBeto Muniz
 
Conhecendo o Struts 2 - Java Tech Day 2007
Conhecendo o Struts 2 - Java Tech Day 2007Conhecendo o Struts 2 - Java Tech Day 2007
Conhecendo o Struts 2 - Java Tech Day 2007Jaime Schettini
 
Aplicações rápidas para a Web com Django
Aplicações rápidas para a Web com DjangoAplicações rápidas para a Web com Django
Aplicações rápidas para a Web com DjangoFreedom DayMS
 
GUIA DE REFERÊNCIA RÁPIDA Código HTML
 GUIA DE REFERÊNCIA RÁPIDA  Código HTML GUIA DE REFERÊNCIA RÁPIDA  Código HTML
GUIA DE REFERÊNCIA RÁPIDA Código HTMLEduardo D'Avila
 
Simplificando o full stack - desenvolvimento web na prática
Simplificando o full stack - desenvolvimento web na práticaSimplificando o full stack - desenvolvimento web na prática
Simplificando o full stack - desenvolvimento web na práticaMarianna Cruz Teixeira
 
Desafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerceDesafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerceEduardo Shiota Yasuda
 
Workshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseWorkshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseLuiz Duarte
 
Java mais ágil que nunca no desenvolvimento Web
Java mais ágil que nunca no desenvolvimento WebJava mais ágil que nunca no desenvolvimento Web
Java mais ágil que nunca no desenvolvimento WebBruno Borges
 
Um futuro chamado Web Components
Um futuro chamado Web ComponentsUm futuro chamado Web Components
Um futuro chamado Web ComponentsZeno Rocha
 
Performance e boas_praticas_de_web
Performance e boas_praticas_de_webPerformance e boas_praticas_de_web
Performance e boas_praticas_de_webThiago Verly
 

Mais procurados (18)

Aula 07 acessibilidade
Aula 07  acessibilidadeAula 07  acessibilidade
Aula 07 acessibilidade
 
Construindo Diretivas com AngularJS
Construindo Diretivas com AngularJSConstruindo Diretivas com AngularJS
Construindo Diretivas com AngularJS
 
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JSDesenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
 
Labs JavaScript - AIT
Labs JavaScript - AITLabs JavaScript - AIT
Labs JavaScript - AIT
 
O Poderoso AngularJS
O Poderoso AngularJSO Poderoso AngularJS
O Poderoso AngularJS
 
Java script aula 10 - angularjs
Java script   aula 10 - angularjsJava script   aula 10 - angularjs
Java script aula 10 - angularjs
 
Conhecendo o Struts 2 - Java Tech Day 2007
Conhecendo o Struts 2 - Java Tech Day 2007Conhecendo o Struts 2 - Java Tech Day 2007
Conhecendo o Struts 2 - Java Tech Day 2007
 
Aplicações rápidas para a Web com Django
Aplicações rápidas para a Web com DjangoAplicações rápidas para a Web com Django
Aplicações rápidas para a Web com Django
 
GUIA DE REFERÊNCIA RÁPIDA Código HTML
 GUIA DE REFERÊNCIA RÁPIDA  Código HTML GUIA DE REFERÊNCIA RÁPIDA  Código HTML
GUIA DE REFERÊNCIA RÁPIDA Código HTML
 
Zend Framework
Zend FrameworkZend Framework
Zend Framework
 
Simplificando o full stack - desenvolvimento web na prática
Simplificando o full stack - desenvolvimento web na práticaSimplificando o full stack - desenvolvimento web na prática
Simplificando o full stack - desenvolvimento web na prática
 
Desafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerceDesafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerce
 
Workshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseWorkshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + Mongoose
 
Java mais ágil que nunca no desenvolvimento Web
Java mais ágil que nunca no desenvolvimento WebJava mais ágil que nunca no desenvolvimento Web
Java mais ágil que nunca no desenvolvimento Web
 
Um futuro chamado Web Components
Um futuro chamado Web ComponentsUm futuro chamado Web Components
Um futuro chamado Web Components
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
 
Performance e boas_praticas_de_web
Performance e boas_praticas_de_webPerformance e boas_praticas_de_web
Performance e boas_praticas_de_web
 
Html5
Html5Html5
Html5
 

Destaque

Tx history-ch-20.3
Tx history-ch-20.3Tx history-ch-20.3
Tx history-ch-20.3AvantK
 
Solarizacija javnih objekata Grada Varaždina
Solarizacija javnih objekata Grada VaraždinaSolarizacija javnih objekata Grada Varaždina
Solarizacija javnih objekata Grada Varaždinaivugrinec
 
Harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3). info liburan murah ke bali,...
Harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3). info liburan murah ke bali,...Harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3). info liburan murah ke bali,...
Harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3). info liburan murah ke bali,...Wisata Jawa
 
Computacion dia positivas
Computacion dia positivasComputacion dia positivas
Computacion dia positivasalexdiaz1992
 
Harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3). . informasi wisata murah ke...
Harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3). . informasi wisata murah ke...Harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3). . informasi wisata murah ke...
Harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3). . informasi wisata murah ke...Wisata Jawa
 
Pterjium epidemiyoloji
Pterjium epidemiyolojiPterjium epidemiyoloji
Pterjium epidemiyolojikebaplik
 
Agricultura ecològica
Agricultura ecològicaAgricultura ecològica
Agricultura ecològicagessamina
 
Ինչպես հայթայթել և օգտագործել տեղեկատվությունը սոցիալական ցանցերում
Ինչպես հայթայթել և օգտագործել տեղեկատվությունը սոցիալական ցանցերումԻնչպես հայթայթել և օգտագործել տեղեկատվությունը սոցիալական ցանցերում
Ինչպես հայթայթել և օգտագործել տեղեկատվությունը սոցիալական ցանցերումGayane Mirzoyan
 
эгшигт гийгүүлэгч
эгшигт гийгүүлэгчэгшигт гийгүүлэгч
эгшигт гийгүүлэгчPuujee75
 
Apresentação venda online
Apresentação venda onlineApresentação venda online
Apresentação venda onlineBonnano Studio
 
Ботанические сады России
Ботанические сады РоссииБотанические сады России
Ботанические сады РоссииИрина Иванова
 
Liburan murah ke bali, harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3), pak...
Liburan murah ke bali, harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3),  pak...Liburan murah ke bali, harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3),  pak...
Liburan murah ke bali, harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3), pak...Wisata Jawa
 
Lançamento ThermoSub
Lançamento ThermoSubLançamento ThermoSub
Lançamento ThermoSubMarco Coghi
 

Destaque (20)

Quiznator
QuiznatorQuiznator
Quiznator
 
Tx history-ch-20.3
Tx history-ch-20.3Tx history-ch-20.3
Tx history-ch-20.3
 
Ismai
IsmaiIsmai
Ismai
 
Katla 1
Katla 1Katla 1
Katla 1
 
Solarizacija javnih objekata Grada Varaždina
Solarizacija javnih objekata Grada VaraždinaSolarizacija javnih objekata Grada Varaždina
Solarizacija javnih objekata Grada Varaždina
 
Harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3). info liburan murah ke bali,...
Harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3). info liburan murah ke bali,...Harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3). info liburan murah ke bali,...
Harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3). info liburan murah ke bali,...
 
Computacion dia positivas
Computacion dia positivasComputacion dia positivas
Computacion dia positivas
 
Harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3). . informasi wisata murah ke...
Harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3). . informasi wisata murah ke...Harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3). . informasi wisata murah ke...
Harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3). . informasi wisata murah ke...
 
機械受注3月度
機械受注3月度機械受注3月度
機械受注3月度
 
Pterjium epidemiyoloji
Pterjium epidemiyolojiPterjium epidemiyoloji
Pterjium epidemiyoloji
 
Agricultura ecològica
Agricultura ecològicaAgricultura ecològica
Agricultura ecològica
 
Ինչպես հայթայթել և օգտագործել տեղեկատվությունը սոցիալական ցանցերում
Ինչպես հայթայթել և օգտագործել տեղեկատվությունը սոցիալական ցանցերումԻնչպես հայթայթել և օգտագործել տեղեկատվությունը սոցիալական ցանցերում
Ինչպես հայթայթել և օգտագործել տեղեկատվությունը սոցիալական ցանցերում
 
шоколадное дерево
шоколадное деревошоколадное дерево
шоколадное дерево
 
эгшигт гийгүүлэгч
эгшигт гийгүүлэгчэгшигт гийгүүлэгч
эгшигт гийгүүлэгч
 
Apresentação venda online
Apresentação venda onlineApresentação venda online
Apresentação venda online
 
Ботанические сады России
Ботанические сады РоссииБотанические сады России
Ботанические сады России
 
Liburan murah ke bali, harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3), pak...
Liburan murah ke bali, harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3),  pak...Liburan murah ke bali, harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3),  pak...
Liburan murah ke bali, harga rp 250 rb 2hr 1 mlm. hub 08563776704 (im3), pak...
 
Ion Gaina
Ion GainaIon Gaina
Ion Gaina
 
Lançamento ThermoSub
Lançamento ThermoSubLançamento ThermoSub
Lançamento ThermoSub
 
Lixac powerpointpræsentation
Lixac powerpointpræsentationLixac powerpointpræsentation
Lixac powerpointpræsentation
 

Semelhante a Edição de conteúdo web usando Javascript de ponta a ponta

Introdução ao framework CakePHP
Introdução ao framework CakePHPIntrodução ao framework CakePHP
Introdução ao framework CakePHPigorpimentel
 
Aplicações Web TV no Meo
Aplicações Web TV no MeoAplicações Web TV no Meo
Aplicações Web TV no Meocodebits
 
Cobol Web com Net Express 5.1 - Parte 3
Cobol Web com Net Express 5.1 - Parte 3Cobol Web com Net Express 5.1 - Parte 3
Cobol Web com Net Express 5.1 - Parte 3Altair Borges
 
Alta Performance em Aplicações Web
Alta Performance em Aplicações WebAlta Performance em Aplicações Web
Alta Performance em Aplicações WebAnderson Aguiar
 
Javascript
JavascriptJavascript
Javascriptnasjo
 
NoSQL - Por que e quando usar?
NoSQL - Por que e quando usar?NoSQL - Por que e quando usar?
NoSQL - Por que e quando usar?Nico Steppat
 
RIA - Conhecendo o Adobe Flex 2
RIA - Conhecendo o Adobe Flex 2RIA - Conhecendo o Adobe Flex 2
RIA - Conhecendo o Adobe Flex 2elliando dias
 
Projeto Redesign ACIC
Projeto Redesign ACICProjeto Redesign ACIC
Projeto Redesign ACICBarbara Dutra
 
isk-daemon: busca visual de imagens para todos
isk-daemon: busca visual de imagens para todosisk-daemon: busca visual de imagens para todos
isk-daemon: busca visual de imagens para todosRicardo Cabral
 
Workshop Ruby on Rails dia 2 ruby-pt
Workshop Ruby on Rails dia 2  ruby-ptWorkshop Ruby on Rails dia 2  ruby-pt
Workshop Ruby on Rails dia 2 ruby-ptPedro Sousa
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Sérgio Vilar
 
Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Rodrigo Urubatan
 
Prototype Framework Javascript
Prototype Framework JavascriptPrototype Framework Javascript
Prototype Framework JavascriptMarcio Romu
 
Django + extjs pelos forms
Django + extjs pelos formsDjango + extjs pelos forms
Django + extjs pelos formsMoacir Filho
 
Apps Web em Wicket e Scala no GlassFish Java EE 6
Apps Web em Wicket e Scala no GlassFish Java EE 6Apps Web em Wicket e Scala no GlassFish Java EE 6
Apps Web em Wicket e Scala no GlassFish Java EE 6Bruno Borges
 

Semelhante a Edição de conteúdo web usando Javascript de ponta a ponta (20)

Wicket 2008
Wicket 2008Wicket 2008
Wicket 2008
 
Introdução ao framework CakePHP
Introdução ao framework CakePHPIntrodução ao framework CakePHP
Introdução ao framework CakePHP
 
Aplicações Web TV no Meo
Aplicações Web TV no MeoAplicações Web TV no Meo
Aplicações Web TV no Meo
 
Cobol Web com Net Express 5.1 - Parte 3
Cobol Web com Net Express 5.1 - Parte 3Cobol Web com Net Express 5.1 - Parte 3
Cobol Web com Net Express 5.1 - Parte 3
 
Alta Performance em Aplicações Web
Alta Performance em Aplicações WebAlta Performance em Aplicações Web
Alta Performance em Aplicações Web
 
Javascript
JavascriptJavascript
Javascript
 
NoSQL - Por que e quando usar?
NoSQL - Por que e quando usar?NoSQL - Por que e quando usar?
NoSQL - Por que e quando usar?
 
Mini curso html5 slides
Mini curso html5   slidesMini curso html5   slides
Mini curso html5 slides
 
Driver Flash para o ISFramework
Driver Flash para o ISFrameworkDriver Flash para o ISFramework
Driver Flash para o ISFramework
 
RIA - Conhecendo o Adobe Flex 2
RIA - Conhecendo o Adobe Flex 2RIA - Conhecendo o Adobe Flex 2
RIA - Conhecendo o Adobe Flex 2
 
Projeto Redesign ACIC
Projeto Redesign ACICProjeto Redesign ACIC
Projeto Redesign ACIC
 
Ruby On Rails Regis
Ruby On Rails RegisRuby On Rails Regis
Ruby On Rails Regis
 
isk-daemon: busca visual de imagens para todos
isk-daemon: busca visual de imagens para todosisk-daemon: busca visual de imagens para todos
isk-daemon: busca visual de imagens para todos
 
Workshop Ruby on Rails dia 2 ruby-pt
Workshop Ruby on Rails dia 2  ruby-ptWorkshop Ruby on Rails dia 2  ruby-pt
Workshop Ruby on Rails dia 2 ruby-pt
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
 
Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_
 
Prototype Framework Javascript
Prototype Framework JavascriptPrototype Framework Javascript
Prototype Framework Javascript
 
Django + extjs pelos forms
Django + extjs pelos formsDjango + extjs pelos forms
Django + extjs pelos forms
 
04_Introducao_JavaScript.pdf
04_Introducao_JavaScript.pdf04_Introducao_JavaScript.pdf
04_Introducao_JavaScript.pdf
 
Apps Web em Wicket e Scala no GlassFish Java EE 6
Apps Web em Wicket e Scala no GlassFish Java EE 6Apps Web em Wicket e Scala no GlassFish Java EE 6
Apps Web em Wicket e Scala no GlassFish Java EE 6
 

Edição de conteúdo web usando Javascript de ponta a ponta

  • 1. Edição de Homes com Javascript End to End iG – Internet Group
  • 2. Agenda Cenário Problemas Premissaspara a Solução Sacadas Um pouquinho de tecnologia Futuro
  • 5.
  • 6. Problemas Usabilidade Pop-ups everywhere. PoucoIntuitivo Burocracia (muitasetapas). Ediçãoinvasiva. Trocas de layout (Mudarposição de blocos)
  • 7. Problemas Performance Lentidão Consumo (CPU, memória, etc.) Tarefasdesnecessárias (Geração de Cortes). Demoraparacriarnovosagendamentos.
  • 8. Problemas Dados duplicados. Dificuldadeparatransmitiroconhecimentosobre a ferramenta. Inexistência de ediçãosimultânea.
  • 9.
  • 10. Premissas Manutenção das coisas boas do CMS anterior (ex.: facilidadeparatrocarchamadas, edição de cortes). Intuitividade. Menosburocracia (pop-ups, confirmações...). Agilidade. Ediçãonãoinvasiva. Preview “quase” desnecessário.
  • 11. Premissas Facilidadeparatrocar layout. Criaçãorápida de novosagendamentos. Facilidadeparadesenvolvernovoscomponentes. Ediçãosimultânea. Melhorar performance. Liberarservidores.
  • 12.
  • 13. Sacadas Interface Intuitiva Idéias de interfaces de games. Tudoqueénecessárioparaeditarumapáginanaprópriapágina. Facilidadeparaacessaroconteúdo, paleta de componentes, navegarporseções... Arrastaresoltarpara a maioria das tarefas. Undo/Redo.
  • 14. Sacadas Usarmais as máquinas dos editores Parque de máquinaspadronizado 2Gb Ram FF e Chrome Maisatividadesnasmáquinas dos editores. Renderização, em tempo de edição, nasmáquinas dos editores Cargado que for estritamentenecessário.
  • 15. Sacadas ServidoresLeves Arquivosestáticos X conteúdodinâmico. REST. NoSQL (MongoDB). Linguagemconhecidapelosprogramadores de frontend (webdevs) Javascript. CSS Selectors (JQuery like).
  • 16. Sacadas Modelo de dados simples eflexível (JSON). Facilidadepara: Adicionarcampos, trocartipos de componentes. Realizar undo/redo. Versionar. Enviar deltas de alteraçõesparaoutrasmáquinas (ediçãosimultânea). Criação de Agendamento = Cópia de JSON Natividade no JS. Integração com NoSQLs.
  • 18. Renderização / Templates Premissa de usar a máquina do editor. O queusar? Applets? Flash? Javascript! Como assim?
  • 19. Renderização / Templates Pure http://beebole.com/pure/ Unobtrusive Templating (HTML longedalógica). ExtensívelaojQuery.
  • 20. Renderização / Templates { "dados": { "chamada": { "titulo": "Soumelhor do quebonita", "olho": "Trêsmulheresextraordináriasmostramquehámais do quebeleza entre as suasqualidades", "link": "http://delas.ig.com.br/comportamento/sou+melhor+do+que+bonita/n1597180210444.html", "imagem": "", "data": "Mon, 29 Aug 2011, 05:57:07 -0300", "imagens": { "imagem_316_237": "http://i0.ig.com/bancodeimagens/0y/gq/nk/0ygqnkhmdanz7pv5c3ef4pqq8.jpg", "corte_316_237": "103991" }, "chapeu": null, "externo": false } }, "tipo": "CHE00206", "especie": "componente", "id": "8ABE3E6B-9EB2-47D3-A39F-90222F102257" }
  • 21. Renderização / Templates LÓGICA { "a@target" : function(obj) { return (obj.context.chamada && obj.context.chamada.externo) ? "_blank" : ""; }, "div > a img@src" : "chamada.imagens.imagem_316_237", "div a@href" : "chamada.link", "div a@title" : "chamada.titulo", "div div h2 a" : "chamada.titulo", "div div cite a" : "chamada.olho" } HTML <div class="CHE00206 gd6 fl"> <div class="wrapper"> <a href="" target="_self"><imgsrc="" width="316" height="237" alt="" /></a> <div> <h2><a href=""></a></h2> <cite><a href=""></a></cite> </div> </div> </div>
  • 22. Vamos ver como ficou?
  • 23. Edição WYSIWYG – What you see is what you get! Edição só é perceptível quando passamos o mouse por cima dos componentes. Undo/Redo. Editores só são carregados se for solicitada a edição. Lógica de edição fora do HTML do componente.
  • 24. Edição { "componente" : { "fonte" : "chamada", "outline" : { "formulario" : FORMULARIO_PADRAO_CHAMADA }, "parametros" : { "resolucoes_cortes" : [ { "largura" : 316, "altura" : 237 } ] } } }
  • 25. Integrações Independência do CMS anterior Nãoconsumirserviços dele. Conteúdospersonalizadospor site (blogs de colunistas, galerias, etc.) SOLR REST paraconsumirconteúdo editorial (notícias, artigos, colunas, receitas, etc.). Rapidezparapesquisar/atualizarconteúdo.
  • 26. Integrações Banco de Imagens Porenquanto, pop-up. Blogs eParceiros RSS de colunistas. Catálogo de Componentes. Futuro: Trending Topics do Twitter relacionadosao site? Mapa de calordapágina? Teste A/B
  • 27. Drag and Drop Conteúdosintegráveis, arrastáveisesoltáveis! :D { "componente" : { "fonte" : "chamada”, … "drag" : DRAG_PADRAO_CHAMADA, "drop" : DROP_PADRAO_CHAMADA, … "parametros" : { "resolucoes_cortes" : [ { "largura" : 316, "altura" : 237 } ] } } }
  • 29. NodeJS.org Server-side Javascript Baseado no V8 (engine Javascript do Chrome). Muitoleve Orientado a eventos Processos > threads > ciclos Um thread tratadiversasrequisições. Tudoassíncronoparaque a mágicafuncione.
  • 30. NodeJS.org Muitosmódulosdisponíveis. Contribuições no Github NPM sudonpm install modulo var mod = require(“modulo”);
  • 31. Tratamento de Requisições Express http://expressjs.com/ Roteamento Tratamento das requisições (marshalling/unmarshalling de JSON). var app = express.createServer(); app.get('/', function(req, res){ res.send('Hello World'); }); app.listen(3000);
  • 32. Publicação e Preview Como publicarestaticamente de maneiraprevisível no servidor? O queusar? PorquenãoJavascript? No servidor? Janela de browser no servidor?
  • 33. Publicação e Preview JSDOM Módulodo NodeJS. https://github.com/tmpvar/jsdom Container DOM parainterpretarodocumento. Worker processes Renderizarconsomemuita CPU.
  • 34. EdiçãoSimultânea Google Docs Like? Almost.  Comandosremotos. Undo/Redo remotos. Controle de versões das alterações. Reserva de componentese containers. Conteúdo “desreservado” considerado pronto parapublicação.
  • 35. Edição Simultânea HTML5. Web Sockets. NodeJS workers. Incrivelmentefácil.
  • 36. O que vem por aí… Edição do conteúdo (notícias, colunas, artigos…) Edição Inline? Com HTML5? Touch Screen? Dispositivosmóveis? Open source?
  • 37. That’s all folks! @jwalendowsky jwalendowsky@ig.com

Notas do Editor

  1. Pesquisainterna com a área de conteúdo.