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

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

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?

Pure
http://beebole.com/pure/
Unobtrusive Templating (HTML longedalógica).
ExtensívelaojQuery.

{
"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"
}

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

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

by jwalendowsky

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 16

Statistics

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

http://paper.li	14
http://twitter.com	2