Marco Moura

Blog em novo endereço

2010-08-26T15:31:00.003-03:00

Tentei mudar para o blogspot mas não deu .. vou continuar com o wordpress , então acessem marcomoura.wordpress.com

;-)

meu primeiro code dojo...

2010-08-11T15:44:00.005-03:00

Aconteceu terça-feira (10/08/10) um code dojo na empresa (Canção Nova), e como diz o ditado a primeira vez a gente nunca esquece.. eu terei boas recordações pq foi ótimo =D

leia o post completo no meu outro blog .. hehe ..

http://marcomoura.wordpress.com/2010/08/11/meu-primeiro-code-dojo/

:)

Hotsite Interativo Cen

2010-05-14T14:56:00.006-03:00

O Interativocen é um HotSite para ser utilizado na cobertura do evento CEN (Congresso Eucarístico Nacional) 2010/XVI.

Hotsite CEN 2010

É um agregador de conteúdo que busca por CEN2010 no flickr, youtube, webtcn, podcast cn e twitter, permitindo que os internautas acompanhem tudo que acontece no evento e colaborarem com a cobertura online, basta adicionar a tag cen2010, mais informações no site do interativocen.

Foi produzido pela TI da Canção nova (FJPII) e participaram deste projeto: Marco Moura(programação), Marcos Paiva (webdesign), equipe do cpd, João Mariano (marketing), Ivanilson Thurler (gerente desenvolvimento) e André Bittencourt (gerente desenvolvimento).

O layout e a conversão HTML/CSS foi feito por Marcos Paiva.

Trecho de código HAML e Ruby on Rails do interativocen

A programação foi feita por Marco Moura, que fez a app em Ruby On Rails,a conversão do html para o template HAML , a programação JavaScript com Prototype/Script.aculo.us, e os ajustes do fork do Mashup.cancaonova para funcionar como backend para consulta das API youtube, flickr, twitter.

trecho de código limpo em ruby on rails

Neste projeto foi feito um experimento utilizando conceitos de Código limpo de Uncle Bob (Clean Code), apesar de ser uma aplicação simples e essa ter sido a primeira vez que o conceito foi utilizado, foi possível observamos os benefícios que um código organizado, descritivo e objetivo proporcionam, se quiser conferir o código está disponível no github .

O site é uma colaboração da Canção Nova ao evento e será doado aos organizadores, e torcemos que este projeto seja útil a todos aqueles que de alguma maneira irão participar do evento.

É isso ai , até a próxima ;-)

Marco Moura

texto originalmente criado para o blog.cancaonova.com/desenvolvimentoti

Ruby+Rails no mundo real 2010 – eu fui!!...

2010-05-30T14:04:00.002-03:00

Estive no evento Ruby on Rails no Mundo Real (http://www.temporealeventos.com.br/?area=130), organizado pelo Guru-SP, no sábado dia 29/05/2010.

Gostei do evento, os palestrantes mostram bom conhecimento dos assuntos, a apresentação sobre o Rails 3 apresentada por Hugo Barauna foi muito boa, que entre as novidades da nova versão eu destaco sua explicação sobre javascript no rails, que agora ficou fera demais.

Mas gostei pricipalmente das palestras sobre processamento em Batch e sobre o Rhodes, assuntos que me surpreenderam, pois não estava interessado por elas mas agora estou ansioso por uma oportunidade de utilizar, sai para o evento na expectativa por ver as apresentações de metaprogramação e refactoring, assunto do qual tenho pesquisando atualmente, talvez por causa desta expectativa que criei não apreciei tanto as apresentações, acho que poderiam ter sido melhor.. que certamente é uma tarefa difícil quando se aborda assuntos complexos como estes.

O evento foi show parabéns ao @guru_sp e a todos os palestrantes.. =D

O Rodrigo Ribeiro fez um post que cobriu todo o conteúdo e a programação do evento http://templariodatecnologia.wordpress.com/2010/05/31/minhas-impressoes-rubyrails-no-mundo-real-2010-290510/

Scrum Meeting 2.0 .. eu fui !!!

2009-11-28T10:44:00.000-02:00

Dia 26/11/2009 estive em São José dos Campos/SP participando do Scrum Meeting 2.0, evento criado pela Dextra Sistemas eTeamware do Brasil, com apoio do MIC - Microsoft Innovation Center para disseminar a cultura ágil em projetos de software.

A proposta do evento foi apresentar aos participantes o valor que o conceito de Business Agility proporciona aos projetos de software. Scrum permite alta velocidade de entrega, grande capacidade de ajustes a mudanças, alta produtividade, riscos minimizados e forte alinhamento entre TI e negócios.

Foram duas palestras, a primeira com o tema "Abordagem ágil em relação ao modelo de gestão tradicional", ou seja, a transição do trabalhador 1.0 (era industrial) para o trabalhador 2.0 (era do conhecimento). apresentado por Juan Barnabó da Teamware

E depois um caso prático de desenvolvimento em Scrum de plataforma de gestão de mídias digitais para a Globosat com equipe de projeto do fornecedor a 600km de distância, que foi apresentado por Marcos Alves - Dextra

para mais informações : http://www.dextra.com.br/noticias/sao-jose-dos-campos-recebe-dia-26-o-evento-scrum-meeting-2.0.htm

Rails summit 2009.. Eu fui!!

2009-10-15T08:14:00.000-03:00

Aconteceu nos dias 13 e 14 de outubro o Rails Summit , evento com palestrantes nacionais e internacionais sobre o universo Rails.

[caption id="" align="alignnone" width="240" caption="Marco Moura, Matheus Muller, e Ronan Gimenes no Rails Summit 2009"][/caption]

Foi ótimo, com palestras do melhores profissionais de rails do mundo, e os palestrantes nacionais não devendo nada, em termos de qualidade, para os estrangeiros, como a do José Valim.

[caption id="" align="alignnone" width="240" caption="Fabio Akita, palestrante e organizador do evento"][/caption]

A organização foi perfeita, parabéns aos organizadores.

até o summit 2010 ;-)

Player para o podcast Canção Nova

2009-05-05T07:51:00.000-03:00

A Canção Nova tem mais um serviço na internet, é oPodcast CN, e fizemos um player personalizado e sob medida para ele, e como de costume o blog vai ser o canal para explicar seu funcionamento e para você mandar suas criticas e sugestões.

Compartilhamento de podcast
Como já aconteceu com o player para WebTvCN, o podcast da canção tem a intenção de espalhar-se por blogs e sites, por isso há no site do podcast e também no próprio player duas maneiras para compartilhar:

via embed: que é o código html para adicionar o player em seu site.

via email: enviando o link(url) da página do podcast para um amigo ouvir.

Teclas de atalho
Para quem utilizar o player com freqüência, poderá usar os recursos de atalho para controlar do player, as teclas de atalho são:

play ou pause = barra de espaço

avança tempo = seta direita

retrocede tempo = seta esquerda

Cronômetro
Há também a opção para alterar a contagem do tempo, clicar no cronômetro para alterar a ordem do tempo para crescente ou decrescente.

Atalho para página do podcast
Clickando no logo do Podcast no canto inferior do player você será redirecionado para a página do canal do podcast

Para experimentar confira abaixo um podcast com a Equipe da Redação do Portal Canção Nova.

O trabalho foi realizado por Marco Moura, que fez o design no illustrator e no flash, e a programação cliente-side em Action-Script 3.

E por Patricia Fernades, que fez a programação serve-side PHP, arquivos de xml e o script de envio de e-mail.

* Post originalmente escrito no blog Artificeweb

Catálogo multimídia para a modernidade moveis

2008-10-02T23:44:00.002-03:00

[caption id="" align="alignnone" width="500" caption="modernidade móveis cd-rom"][/caption]

Projeto realizado para meu amigo, Eder Prado, o desenvolvimento do catálogo multimídia (CD–rom multimídia) dos produtos da loja Modernidade Móveis.

[caption id="" align="alignleft" width="240" caption="detalhes do produto"][/caption]

Desenvolvimento

O design foi feito no illustrator e depois exportado para o flash onde recebeu os retoques finais.

A interatividade e funcionamento foi feita programando em action script 3

Mas a parte mais trabalhosa foi organizar as imagens, que eram muitas.

Gostei muito de fazer esse job e adorei o resultado final.

É isso, se alguém quiser me presentear com um belo sofá ou saber mais sobre a loja pode acessar www.modernidademoveis.com .

Videocoisas – seu canal de anúncios

2008-09-12T10:26:00.002-03:00

Se você quer anúncios com recursos além do bom e velho texto e imagem, eu apresento-lhe videocoisas.com, um trabalho meu para a BrazilWeb.

Uma plataforma dedicada à publicação de vídeo-anúncios de seus usuários, ou seja, anúncios de produtos, serviços e habilidades pessoais no formato de vídeo–classificados.

O público anunciante pode classificar seus vídeo-anúncios de acordo com uma série de categorias e localidades. Além disso, podem criar canais, onde todos seus anúncios ficam agrupados, facilitando o contato com os visitantes interessados em seus vídeos.

São aceitos diversos formatos de vídeos, como AVI, MPEG, Quicktime, Real, OGV, e Windows Media e os arquivos dos anúncios devem ter até 50MB (cerca de 10 minutos de duração). A publicação de vídeo-anúncios no Videocoisas é gratuita.

O desenvolvimento

O trabalho realizado foi:

criação do logotipo

arquitetura do site

layout do site

programação serve-side

programação cliente-side (ajax)

design e programação do player de vídeo

criação de um gerenciador para o moderador

configuração do servidor

O Logotipo e o layout foi todo feito no illustrator.

Houve um cuidado especial com a url, a regra foi deixa-la legível e auto-explicativa (URL amigáveis, permalink ), para melhorar a indexão dos buscadores e facilitar a troca de url entre as pessoas .

Cada canal possui seu próprio subdomínio, para que futuramente o serviço possa ser personalizado para cada cliente, onde cada canal terá seu próprio layout e plugins.

As páginas estão seguindo os padrões Web ( webstandards ) o que proporcionou:

o tamanho das páginas foi otimizado, deixando-as com uma excelente performance no tempo de resposta

melhora no SEO (otimização nos sistemas de busca)

acessibilidade

E o restante da sopa de letrinhas de tecnologia utilizado no site é:

Microformats

Gravatar

Ajax

Tag-cloud por categorias e localização

RSS organizado por canal, categoria e localidade

Então, faça seus vídeos e divulgue produtos, venda, aluguel, ofereça prestação de serviços... ou qualquer outra coisa...

Livros de tipografia

2008-06-04T16:25:00.002-03:00

Como Webdesign é 95% tipografia!, lá foi eu estudar sobre o assunto, li dois livros de tipografia e vou deixar uma pequena análise e comentários a respeito, espero poder ajudar quem estiver em dúvidas sobre qual deles comprar, primeiro foi o ótimo Pensar com tipos da Ellen Lupton, e depois foi o Elementos do estilo tipográfico de Robert Bringhurst.

Pensar com tipos está na lista dos melhores livros que já li, gosto de seu acabamento, de seu papel e tem um excelente conteúdo, a autora é divertida com um assunto sério e monótono, e no fim de cada capitulo deixa um pequeno exercício, sem dúvida este são os diferencias deste que também é um livro de referência sobre o assunto, li duas vezes e tenho vontade de ler novamente.

Elementos do estilo tipográfico já é um livro mais sério, mas muito bem escrito, seu autor também já publicou livros de poesia, explica mais afundo sobre questões que envolvem tipografia, por isso o consideram a bíblia da tipografia, mas é de leitura mais difícil e demorada, mas quando tenho alguma dúvida vou direto nele.

Aconselho quem estiver iniciando no assunto ou mesmo quiser adquirir estes livros a ir nessa ordem de leitura , como foi o meu caso, pois o primeiro é mais fácil para se ler e acaba sendo uma introdução para o outro.

Estes livros aumentaram meu interesse pelo assunto grid, que é um assunto relacionado com tipografia, então agora estou lendo o livro grids - construção e desconstrução

Podcast Canção Nova

2008-04-30T15:20:00.002-03:00

Layout que fiz para ser utilizado na administração e pelos moderador do podcast Canção Nova

Mais detalhes e informações veja no blog da equipe de internet da CN

http://blog.cancaonova.com/artificeweb/podcast-cancao-nova/

Administrador Podcast Canção Nova

2008-04-30T07:56:00.000-03:00

Está em desenvolvimento o on-line o novo canal de podcast da Canção Nova, desenvolvimento do qual teve a singela participação de um membro da equipe Artifíce Web, Marco Moura.

Marco Moura foi o responsável por desenvolver o layout que será utilizado para a administração dos podcast e para o moderador da comunidade. Então se você vier a ter um podcast na CN, irá utilizar essa interface.

Essa é a página de gerenciamento de autores. Foi feita por Marco Moura (webdesign) e Luciana (programação)

O layout do cliente foi feito pelo Nelson, e assim que puder divulgaremos algumas imagens.

Com o layout todo pronto, agora as programadores Luciana e Patricia estão a todo vapor para concluir a programação e logo o novo site de podcast da Canção Nova estará disponível a todos .

Este texto foi originalmente postado no blog artificeweb

Web Design vs. Graphic Design

2007-12-07T11:33:00.002-02:00

“Quando um logotipo funciona, ele faz você lembrar... sobre a empresa, sua influência, seu área de atuação... isso é a marca... Quando um website funciona... você está usando ele para algo. Está utilizando o web site... interagindo com ele, tendo uma experiência que, ao contrário dos logotipos, faz você se envolver... O problema é que muitas pessoas estão julgando website sem antes utilizar. Eles apenas, estão olhando...”

Joshua Porter, Do Canonical Web Designs Exist?

WebTypographer

2007-09-11T16:06:00.002-03:00

Webdesign é 95% tipografia!

Depois de otimização, padrões e usabilidade, agora é a vez da tipografia , que foi negligenciada por muitos, mas um site eficiente se comunica com o mínimo de dificuldades para seus usuários, e descuidar da tipografia poderá faltar legibilidade, contraste no texto, grid, alinhamento...

É o assunto que venho estudando e gostando muito, afinal é uma habilidade muito importante, depois quem sabe amplio meus negócios para o mundo dos impressos... rss

alguns links para quem quiser saber mais sobre o assunto
http://del.icio.us/marco.moura/tipografia

Player de vídeo WEBtvCN

2007-07-25T15:35:00.002-03:00

Player em flash que fiz para a webtvcn.com

Mais detalhes e informações no blog da equipe de internet da CN

http://blog.cancaonova.com/artificeweb/webtvcn-em-todo-lugar-com-novo-player-de-video/

Algumas novidades sobre o HTML 5

2007-06-21T09:07:00.002-03:00

Não sei quando os browser iram implementar , mas o HTML 5 tem novidades para facilitar nosso trabalho e melhorar a semântica dos documentos.
Vou listar o que achei mais significativo:

Mudança no modelo de conteúdo, os elementos block deveram conter em sua raiz um elemento in-line ou um block , mas não ambos .

Este é um exemplo do que será permitido:

<div>
<p><em>...</em></p>
</div>

mas isto não :

<div>
<p>...</p>
<em>...</em>
</div>

Novos elementos introduzidos

Alguns para melhorar a estrutura dos documentos, como:

section : poderá ser utilizado junto com H1-H6 para indicar a estrutura do documento

article : representa um pedaço independente de um conteúdo ou documento, como o post de um blog ou um artigo

aside: um trecho de conteúdo q tem pouco relacionamento com o resto do conteúdo

header: cabeçalho de uma seção

footer: o rodapé de uma seção , e pode ter informações sobre o autor,copyright, etc...

nav: para ser utilizado como menu de navegação

dialog: pode ser utilizado para marca um dialogo

figure: pode ser utilizado para adicionar titulo em gráficos e videos

<figure>
<img src='teste.jpg'/>
<legend>Example</legend>
</figure>

e outro elementos como :

progress: representa o status de uma tarefa

e o elemento input tem mais attributos:

datetime

datetime-local

date

month

week

time

number

range

A intenção deste novos atributos para o input é de melhorar a comunicação com o browser, por exemplo no auto preenchimento dos formulários

Novos atributos:

autofocus: para o elemento imput, como pode se imaginar é para focar o elemento após o carregamento da página

require: para o elemento input, para indicar que o campo precisa ser preenchido antes do formulário ser enviado

inputmode: dá uma dica (hint) ao user sobre qual tipo de resposta se espera

autocomplete

draggable

Um dos atributos quem não será mais padrão e o rev para o elemento link e charset, mas utilizamos esse atributo com microformats que talvez sofra modificações por causa disto

No dom, getElementsByClassName foi adicionada e innerHTML agora é padrão

As mudanças não são grandes e muito do que ele propõe já é feito com javascript, mas quando utilizarmos HTML 5 certamente iremos precisar de menos javascript

fonte : HTML5 differences from HTML4

9º ELPI em Sampa.. Eu Fui!!!

2007-06-14T10:58:00.002-03:00

No dia 12 de junho teve em São Paulo 9º ELPI - Encontro locaweb de profissionais de internet.

As palestras, a maioria foi de patrocinadores vendendo o peixe, teve algumas execeções , mas deu para tirar alguma informação e aprender um pouco.

Gostei muito das palestras:

"Microformats, a web semântica com letra minúscula" - Elcio Ferreira

"Ajax e Design de Interação: dois lados da mesma moeda" - Frederick Van Amstel

"100 Essential Lessons in internet Product Management" - Marty Cagan (eBay)

E olha nota 10 para a organização, não tenho nada a reclamar.

Gostei e no 10º ELPI espero ir novamente.

Hot-site: Homenagem Musical para o Dia dos Pais

2007-06-08T08:04:00.000-03:00

Para comemorar o dia dos pais 2007, o canal de Música do Portal Canção Nova fez a promoçãoHomenagem Musical para o Dia dos Pais. Três vídeos serão escolhidos pelo portal Canção Nova e serão premiados com kits do Departamento de Audiovisuais (DAVI) e ainda um CD adicional, do qual poderá ser escolhido um dentre vários.

Parabéns pela iniciativa do Anderson (responsável pelo canal de música), o apoio do departamento Davi, e a todos que participaram neste projeto: Tatiane Bastos , Marco Moura (design da página) e a equipe da programação.

Texto originalmente postado no blog artíficeweb

Tem CSS? YES! Tem AJAX? YES! E não esqueça do HTML!

2007-04-16T11:18:00.002-03:00

Uhhuuu tamo na webinsider !!

CSS, Ajax, tudo bem. Mas não esqueça o HTML

Não vai esquecer de deixar seu comentário lá .. hehehehhe

Redesign do Sites Católicos

2007-04-07T08:08:00.000-03:00

Olá pessoal.

O primeiro post traz uma “novidade” para o nosso portal. O redesenho da página dos Sites Católicos. O objetivo foi aperfeiçoar e atualizar a página, adicionar novos recursos e melhorar seu aspecto visual.

A página traz links de diversos sites católicos espalhados pelo mundo. As novidades são inúmeras, uma delas é que agora você pode enviar o link do seu próprio site católico.

"Seguindo o aspecto visual da capa do Portal, foi optado em manter a semelhança para melhorar a identidade da capa.", diz Marco Moura, Web Developer desenvolvedor do redesign.

O "Sites Católicos" possui conceitos sobre acessibilidade que irá contribuir com acesso de qualquer pessoa e em qualquer dispositivo.

"Para deixá-lo com cara de Web 2.0, mudamos o sistema de classificação dos links, agora o conteúdo é organizado com tags."

O conteúdo fica mais fácil de ser acessado, foi implantado um sistema de busca interna dos links cadastrados.

"Essa nova página possui conceitos sobre acessibilidade que irá contribuir com acesso de qualquer pessoa e em qualquer dispositivo"

Os links para as páginas católicas estão com o recurso de "Preview", permitindo visualizá-los antes de acessar.

O site está preparado para a umas das tendências na internet, microformats, que logo nos será tão útil como é o RSS.

Para participar do novo conceito de "Sites Católicos" do Portal Canção Nova, acesse o Portal Canção Novawww.cancaonova.com/sitescatolicos

Bom pessoal. Espero que tenham gostado e que participem enviando seus próprios links para que o Sites Católicos cresça em seu objetivo

Dúvida? Sugestão? Crítica? Deixe nos um comentário!

Abraço a todos e fiquem com Deus.

Atualização 23-07-2007

O formulário de sugestão foi turbinado com ajax, quando o formulário é enviado não ocorre o recarregamento da página, tornando mais rápido e prático o envio de sugestão, e foi melhorado a verificação do formulário para checar se o nome e o endereço da sugestão não está vazio.

Atualização 05/10/2007

Foi alterado o método de visualização da imagem de amostra do site, agora é embutido direto na página

Texto originalmente postado no blog artíficeweb

Citação do Get Real sobre bugs e lançamento de serviço

2007-03-22T11:23:00.002-03:00

Retornei a leitura do getReal, e vou fazer uma camisa deste trecho . kkkkkk

Se existirem pequenos bugs, lance tão logo tenha os cenários principais pregados e disponibilize as correções dos bugs gradualmente depois disso. Quanto mais rápido tiver o feedback do usuário, melhor...

Trecho retirado do livro Get Real

E digo mais burocracia serve só para dificultar a vida do peão.

Microsoft e suas mensagens de alerta

2007-03-14T14:57:00.002-03:00

"Erro em tempo de execução desconhecido"

Foi com essa mensagem que eu vivi por 2 dias, até descobrir que, apenas no IE (pensei que isto acontecia apenas com CSS), não é possível utilizar innerHTML para alterar parte do conteúdo de dentro da tabela ( tbody, tr, td, etc..), pois a função innerHTML tem permissão apenas de leitura no tbody, não sei por quê desta restrição, parabéns microsoft .
Tudo bem quanto a restrição de acesso, mas graças a mensagem de erro super explicativa, "Erro em tempo de execução desconhecido", demorei para encontrar a solução do bug.

Para quem escreveu as mensagens de alerta do IE, quase todos os erros de javascript deve ser desconhecido, talvez esqueceram de lhe passar a documentação desta jossa .. hahahahha
ou pior, deve ser um documentador genérico da microsoft , o mesmo que escreveu "Error, no keyboard - press F1 to continue". hahahahhahahah
Página da microsoft com documentação do innerHTML .

A mal compreendida Web - Web Misunderstandards

2007-03-07T08:55:00.002-03:00

Achar que webdesign é meramente algo visual é como achar que o oceano é como algo azul, sem caracteristícas e sólido. Mas tanto em webdesign e no oceano, existe um rico ecosistema abaixo da superfíce, com suas exigências especifícas

fonte:http://www.andyrutledge.com/web-misunderstandards.php

Conselhos para utilizar HTML/CSS em um e-mail

2006-11-10T09:21:00.002-02:00

Quando utilizamos CSS em arquivo HTML que será visualizado via browser precisamos conhecer quais são as restrições imposta pelos Browsers, temos que evitar utilizar alguma propriedade CSS que não seja suportada ou que tenha diferença de render entre browsers, ou seja, o uso de CSS devido a diferença de fabricantes e o suporte aos padrões que cada um propõe tem suas limitações, se temos estas e outras preocupações com os browser imagine com um “Leitor de e-mail” que tem ainda mais fabricantes, os software off-line(Outlook,Eudora) e os on-line( Gmail,Yahoo), e todos atrasados no suporte ao CSS.
Para enviar um e-mail (newsletter, mensagem automática) no formato HTML com CSS temos que evitar algumas propriedades do CSS, os leitores de e-mail retiram ou então não suportam algumas propriedades que possam comprometer a sua segurança.
Não utilize as propriedades position e float. Muitos softwares não permitem elas.
Ex: Imagine lendo um e-mail via browser(gmail,yahho) e você recebe um mensagem que através de CSS posiciona um link invisível sobre o logo do site, e este link redireciona para um outro site !!

Um conselho, você não pode alterar o fluxo do conteúdo com POSITION e FLOAT, tente evitar o layout com colunas, ou então, utilize a propriedade display e text-align para as colunas.

Um outro problema é que o leitor apenas interpreta STYLE IN-LINE, para não houver conflito com o próprio estilo (CSS STYLE) do leitor de e-mail ele remove do arquivo o elemento STYLE, LINK e qualquer classe, id e seletor CSS que contiver em sua mensagem.

Ex:

Isto não irá funcionar :

<style> #logo{text-align:center} </style>

<link href="http://site.com/newsletter.css" type="text/css" rel="stylesheet" />

#logo{text-align:center}

.teste{color:red}

p{font-size:2em}

Isto funciona

<h1 style="text-align:center">Logo</h1>

<span style="color:red">Alerta</span>

<p> style="font-size:2em">Loren Lipsun</p>

Então não utilize css externo nem coloque seu css no cabeçalho da pagina, utilize style in-line diretamente nas TAGs.

Segue alguns links com mais informações sobre o assunto
http://del.icio.us/marco.moura/css-email

Boss — Por quê fazer o redesign de um site usando Tableless?

2006-10-31T13:58:00.002-03:00

Este é uma documento que fiz para a empresa onde trabalho, acho que pode ter utilidade quando precisar falar sobre as vantagens de desenvolver utilizando padrões, tableless, CSS, etc ….

——ƒ——

“Redesign de um site usando tableless”.

Atualização, organização e otimização.

Atualmente o site possui o layout feito com 'tabelas', há por volta de 800 linhas de html, css e Java script em um único arquivo. Também existem vários erros de aninhamento de tags na página.

Ao substituir tabelas por layout tableless e corrigir o aninhamento diminuiremos o tempo de carregamento da página para o cliente, e por diminuir o consumo de banda teremos uma melhora na performace do servidor.

Dividiremos o desenvolvimento em 3 arquivos: conteúdo (HTML), layout (CSS) e comportamento (JS), organizando e facilitando a manutenção.
O aspecto visual não será mudado, será adaptado o existente.

O custo deste projeto é o mesmo de um projeto com tabelas, também estaremos sujeitos a empecilhos e imprevistos. Uma outra questão, em alguns sites que utilizam tabelas para o layout ainda existe diferenças de aspecto visual entre diferentes browsers, problemas com alinhamento de boxes e alinhamento de blocos de texto. Podemos solucionar estes problemas como também pode vir a ocorrer outros que certamente poderemos solucionar.
Custos

Conhecimento de CSS para atualizar.

Alterações futuras precisam ser feitas com cuidado para não prejudicar o projeto e trazer de volta a estrutura desorganizada e ultrapassada.

Talvez alguma área do layout precise ser alterada no alinhamento e/ou no tamanho, existem algumas diferenças entre tabelas e CSS.

Um prazo estipulado em 3 à 4 semanas, calculo que seja feito em menor período, mas o prazo adjacente seria para imprevistos que possam aparecer no desenvolvimento do projeto.

Benefícios:

Diminuir o tamanho do arquivo (estimado em até 20% a 30%), diminuir tempo de donwload, diminua consumo de banda do servidor, diminua o tempo de render no browser.

O usuário precisará baixar o estilo em CSS uma única vez, o css fica em cache.

Melhorar a semântica, melhorar a acessibilidade, melhorar a indexação dos engines de busca.

Melhorar o acesso a diversos dispositivos (leitores de telas, mobile).

Facilitar o redesign, diminuir o numero de linhas, separar as camadas (conteúdo, layout, comportamento) em arquivos.

Substituição de metodologia de desenvolvimento web ultrapassada por uma metodologia atual.

A pagina atual:

A pagina possui layout a base de 'tabelas', aumentando o tamanho do arquivo e o tempo de render.

Possui vários erros de aninhamento de tags pela página, aumentando o tempo de render no browser.

A alguns CSS embutidos no arquivo HTML, impossibilitando o cachê para arquivo css.

Um arquivo, espaguete de HTML, CSS, JAVASCRIPT; com 800 linhas.

A pagina após o redesign:

Estrutura no conceito tableless, seria feito a remoção das tabelas e sua substituição por tags html apropriadas.

Correto animanhento das tags (diminuindo o tempo de render no browser).

Arquivo CSS externo (o usuário faz o donwload uma única vez ou quando houver atualização no CSS), isto colabora para diminuir o total de bytes transferidos.

Diminuir o numero de linhas no arquivo e organizar as camadas.

——ƒ——

Qualquer sugestão para melhorar o discurso será bem recebida.