domingo, 23 de setembro de 2007

Para não errar a mão - Velocidade do site

Vamos finalizar essa série sobre desenvolvimento web falando sobre os cuidados fazer um site que abra um pouco mais rápido que os outros.

Gostaria de dizer que vou dar uma palestra sobre Web Standards, onde irei falar também sobre as dicas que dei nessa série de posts, na 9ª Jornada de Informática da Faculdade de Ciências da UNESP de Bauru, de 22 a 26 de Outubro, ainda não tenho a data e horário da palestra, mas assim que tiver disponibilizo aqui.


Quando você está desenvolvendo um site você deve estar atento ao tamanho do seu site, e não digo apenas o tamanho das imagens e animações em flash, mas também do tamanho dos arquivos HTML, CSS e JavaScript. Se você está pensando que vou falar sobre conexões discadas x banda larga, você está certo, mas não somente isso.

É muito importante que seu site na Internet carregue com um tempo razoável mesmo em conexões discadas, pois algumas vezes as conexões de banda larga podem sofrer problemas de lentidão, e não é interessante afugentar o usuário. E o tamanho dos arquivos também tem influência na banda da sua empresa que está sendo consumida para abrir esse site, se você imaginar uma página com 10 mil acessos diários, uma economia de 5Kb pode significar mais que 1Gb de banda economizada no fim do mês.

Como analisar o tempo de abertura do seu site, e o tamanho dos arquivos é uma tarefa que delego ao Web Page Speed Report (http://www.websiteoptimization.com/services/analyze/index.html), também presente na Web Developer Toolbar do Firefox, que gera um relatório detalhado do seu site, tamanho total do site, tamanho do arquivo HTML, do arquivo CSS, das imagens, além de no final comentar o resultado da análise. Se você for seguir a risca tudo o que está escrito nas recomendações desse site você está ferrado, pois já analisei vários sites nessa ferramenta (Terra, UOL, Google, UNESP) e apenas o do Google recebeu sinal verde em tudo, mas, a página inicial do Google não tem praticamente nada.

O que você deve mais estar atento nessa ferramenta é o tamanho dos seus arquivos HTML, CSS e JavaScript, pois são o núcleo da sua página, as imagens também são importantes, mas esses 3 vão demonstrar quanto tempo vai levar pro seu site estar visível na tela do usuário, evitando que ele fuja devido a demora do site.

O tamanho do arquivo HTML, e em alguns casos do CSS, também é importante devido a possibilidade de dispositivos que utilizem a rede de telefonia celular acessar seu site, já que atualmente no Brasil a navegação na Internet pela telefonia celular é bem lenta.

Percebi que o maior erro que eu cometia no desenvolvimento era utilizar nomes de classes CSS e de id's de div's enormes, como menu-esq-sem-submenu, e acabava tendo que repetir essa palavra pelo arquivo CSS diversas vezes, a diminuição desses nomes pode trazer um ganho de vários Kbs a sua página, principalmente no arquivo CSS.

Dúvidas, sugestões, críticas e outros, entrem em contato, deixem seus comentários.

terça-feira, 18 de setembro de 2007

Apresentações no Google Docs

Já faz algum tempo que você consegue visualizar apresentações de slides do Power Point diretamente na interface do Gmail, e como havia sido anunciado em abril, o Google incorpora a criação de apresentações de slides ao seu serviço Google Docs (http://docs.google.com).

Ainda tem alguns recurso que não testei, mas aparentemente é possível fazer uma apresentação pela Internet usando-se do google talk, podendo inclusive conversar com quem estiver assistindo.

segunda-feira, 17 de setembro de 2007

Impulsionando o Software como Serviço

Semana passada foi anunciado o acordo entre o Google e a Capgemini para que ela atue como integrador do Google Apps junto as empresas que desejam utilizar a suite de softwares. Isso mostra que o que o SaaS (Software como Serviço), que antes parecia um potencial concorrente com as empresas de terceirização de serviços, pode ser uma boa aposta para elas.

Muitas organizações sentiam poderiam sentir receio de utilizar os serviços Google Apps devido a problemas que poderiam ocorrer com a integração desses serviços a empresa, agora, podendo contar com um apoio especializado nessa integração, a adoção do SaaS deve aumentar consideravelmente.

sábado, 15 de setembro de 2007

Para não errar a mão - JavaScript/AJAX

Retomando a série de posts sobre desenvolvimento Web, vamos falar sobre a implementação de JavaScript e AJAX no seu site, que deve ser muito bem pensada, atentando a quem será seu público alvo.

Primeiro pensando em um sistema que rodará na Intranet ou Extranet da sua organização, você sabe quem serão os usuários, portanto se você tem a garantia que todos terão uma versão atualizada de seus navegadores, o uso de recursos de JavaScript e AJAX estão totalmente liberados.

Já pensando em um site na Internet, onde qualquer pessoa pode acessar, e todos precisam utilizar os recursos dele você deve planejar que ele funcione independente de o usuário possuir JavaScript ou AJAX no navegador dele, vocês podem estar pensando, todos os navegadores hoje possuem JavaScript, mas ele pode ser desabilitado, e não são todas as pessoas que sabem fazer esse processo de desabilitar e habilitar o JavaScript, então mostrar uma mensagem como: "O JavaScript da sua máquina está desabilitado, para habilitar siga os seguintes passos...", pode afugentar um usuário que mal sabe que existe JavaScript. A solução, JavaScript não obstrutivo.

Como funciona o JavaScript não obstrutivo?! Na nossa série até agora o site foi inteiro criado sem usar nenhum comando JavaScript, essa é a idéia, o site funciona por completo sem precisar de nenhum recurso do JavaScript, ou seja, o JavaScript apenas dá um toque a mais no site, adiciona algumas "firulas". Para fazer isso você deve colocar todo o código JavaScript em um arquivo separado, e nele você carrega as ações do eventos, portanto você não vai definir o evento onClick ou onBlur de nenhum elemento da página durante a criação do elemento, mas sim durante a execução do JavaScript, mais ou menos seguindo esse exemplo:

window.onload = function() {
x = document.getElementById('id_do_elemento');
x.onclick = function () {
executaFuncao();
}
}

Pensando em implementações usando AJAX, você deve sempre fazer uma alternativa ao não funcionamento do AJAX, por exemplo, no famoso caso dos combos de estado e cidade onde o combo de cidade é carregado com base no estado você pode fazer da seguinte forma: no código HTML você cria um combo com o estado e para a cidade você cria um campo de texto simples, depois usando AJAX você retira esse campo de texto e cria um combo para ser carregado de acordo com o estado, assim, mesmo que o visitante da página não possua AJAX, a página irá ser funcional.

Sempre procure testar o seu código JavaScript/AJAX no maior número de navegadores (browsers) possível, e em diferentes versões deles. Afinal, você não quer perder um possível cliente, fornecedor, parceiro, visitante por possuir um site não compatível com o navegador que ele usa.

No próximo post da série irei falar sobre a otimização do site, como alguns detalhes fazem a diferença.

quinta-feira, 13 de setembro de 2007

IBM apoiando o projeto OpenOffice.org

Dando apenas uma pausa a série de posts que eu estou fazendo.

A IBM anunciou que irá entrar para a comunidade do OpenOffice.org, sendo mais uma empresa de peso a apoiar o projeto, e principalmente o uso do padrão ODF (Open Document Format) para documentos.

Essa decisão foi tomada depois da rejeição do Open XML, da Microsoft, como padrão ISO e do Google incluir o StarOffice no seu pacote Google Pack.

Com essa decisão, a IBM passa a contribuir com códigos para o projeto OpenOffice.org e também com a integração com as suas ferramentas Lotus.

É interessante ver esse apoio da IBM ao OpenOffice.org pois ele foi fundado pela Sun Microsystems, que é rival de longa data da IBM em software e hardware. A Sun já divulgou um comunicado de boas-vindas à IBM.

terça-feira, 11 de setembro de 2007

Para não errar a mão - Desenvolvimento Web Elegante

Continuando a série iniciada no post anterior, vamos falar um pouco sobre como criar um código-fonte elegante, utilizando Web Standards, seguindo conceitos de Web Semântica, JavaScript/AJAX não obstrutivo, tableless, e os cambau, tudo visando tornar o site acessível a todos, rápido e com um código-fonte fácil e ser trabalhado.

No ano passado, quando comecei a trabalhar na Faculdade de Ciências da UNESP de Bauru, tinha a seguinte missão, criar o site da instituição com base no layout imposto pela reitoria da UNESP. Para isso eu tinha arquivos de modelo do layout disponibilizados para mim, mas o código-fonte desses modelos era bastante confuso, o código-fonte HTML das páginas tinha misturado tabelas, com camadas, com diversos arquivos CSS, alguns recursos em JavaScript, e não seguia nenhum padrão. Com isso resolvi desenvolver um código-fonte novo, e com base no conhecimento recém adquirido que tinha, resolvi fazer um site que seguisse os padrões W3C (Web Standards), fosse legível mesmo com o CSS desabilitado, possuísse os conceitos de Web Semântica e possuísse JavaScript não obstrutivo.

Partindo do site da reitoria da UNESP (http://www.unesp.br/), criei o site da Faculdade de Ciências (http://www.fc.unesp.br/) com o mesmo layout, mas código-fonte totalmente novo.

Primeiro passo para escrever o novo site é definir suas partes e ir criando as div's (nada de tabelas) para agrupar o topo, menus laterais, corpo, rodapé e também utilizar todas as tags HTML com base em suas funções de verdade (Web Semântica) sem preocupação com layout, nessa primeira fase o objetivo é fazer um site legível, onde o resultado deve ser um site linear, praticamente texto puro (para ter um exemplo, acesse o site http://www.fc.unesp.br/ e desabilite todos os recursos de CSS, utilize a Web Developer Toolbar do Firefox). Atenção para o uso das tags, títulos devem ser feitos utilizando as tags hn, menus podem ser feitos com combinação ul li, divisões na página podem ser feitas com hr, e assim por diante.

Terminada essa primeira parte você pode validar seu código-fonte no site http://validator.w3.org/ (também presente na Web Developer Toolbar do Firefox), tente sempre fazer um site que possua um código XHTML Transitional ou Strict válido, pois permite uma interpretação mais rápida por parte dos browsers. E você também pode usar um extrator de semântica (http://www.w3.org/2003/12/semantic-extractor.html) para analisar o seu site.

Tendo a "versão texto" do site pronta e validada, é hora de colocar o layout nele, para isso vamos utilizar o CSS. Toda a formatação de texto, posicionamento de conteúdo, e outros deve estar no arquivo CSS, isso criará praticamente duas versões do seu site, uma somente HTML para navegadores bem antigos e uma versão "oficial" com o layout escolhido e visível em navegadores modernos. Ao desenvolver o arquivo CSS você poderá encontrar muitos problemas com a compatibilidade com o Internet Explorer e o Firefox, principalmente se seu layout for muito complicado. Você também pode validar o CSS criado no site http://jigsaw.w3.org/css-validator.

Pronto, você possui um site rápido, seguindo Web Standards, Web Semântica, e que até esse ponto possui um arquivo .html apenas com comandos XHTML válidos, um arquivo .css também válido e os arquivos de imagem, ele não deve possuir nenhuma linha de código JavaScript, pois agora iremos criar todo o código JavaScript para que ele seja não obstrutivo, ou seja, seu site vai funcionar mesmo que o visitante não possua JavaScript na máquina dele.

Esse assunto vou tratar no próximo post, apenas fica uma dica, se você é acostumado a fazer o submit de formulários, utilize a tag input type="submit" para o formulário funcionar mesmo sem JavaScript.

Até mais.

segunda-feira, 10 de setembro de 2007

Para não errar a mão - Público Alvo

Em um post anterior meu, "Errando a mão" (http://leonardofortunato.blogspot.com/2007/08/errando-mo.html), eu falei sobre como a busca por tornar os serviços web 2.0 mais próximos dos softwares que rodam fora da web tem levado alguns a cometer erros básicos, como falta de compatibilidade entre navegadores, e até problemas com a velocidade da conexão, e percebi que o assunto é bom pois um amigo gerente de projeto disse que começou a ficar atento a essas particularidades nos sistemas web desenvolvidos pela equipe dele.

Eu vou aproveitar o assunto e vou citar alguns detalhes importantes que devemos levar em consideração quando estamos fazendo um sistema, site, hot-site... Como são várias coisas, vou acabar dividindo em vários posts, para poder detalhar melhor o assunto.

Até exatamente novembro de 2006 a minha única preocupação quando desenvolvia um site era fazer ele compatível com o Internet Explorer e o Firefox, e não importava que medidas seriam necessárias para isso, era muita gambiarra, e eu também gostava de abusar do JavaScript básico e também do AJAX, mas em dezembro, durante a PHP Conference 2006, eu assisti duas palestras do Diego Eis e do Elcio Ferreira do site Tableless (http://www.tableless.com.br/) que me abriu a mente para um desenvolvimento Web mais elegante.

Para começar o desenvolvimento de um site você deve primeiro analisar quem será a audiência do seu site, o público alvo, se será a grande massa, qualquer pessoa, ou somente o pessoal de vendas da sua empresa. Basicamente, existem os sites que estão na Internet que qualquer um pode entrar, necessitar de algo que esteja nele, e essa pessoa pode utilizar um computador velho com Windows 95 e Internet Explorer 5 ou um Live CD do Kurumin com Firefox 2, e tem os sites dedicados a um público exclusivo, normalmente são sistemas que rodam em Intranets e Extranets nos quais você tem controle que os colaboradores que irão acessar sempre possuem as últimas versões dos principais navegadores.

Baseando nisso, você pode pensar quais tecnologias podem ser utilizadas no seu site, por exemplo, o site de onde eu trabalho (http://www.fc.unesp.br/) pode ser acessado por qualquer pessoa que esteja querendo se informar sobre vestibular, sobre os cursos que a faculdade possui, sobre pesquisa e outros, por isso ele tem diversas características que mesmo que alguém entre nele com o Internet Explorer 3, consiga ver o site em uma forma legível, e obter as informações que precisa. Esse site será a base de muitas coisas que iremos falar, pois ele possuí um código-fonte HTML válido, um código CSS válido e o pouco JavaScript é compatível com todos os browsers modernos, além de ser não obstrutivo.

Um outro exemplo, se você estiver fazendo um formulário para o cadastro em um evento você precisa ter certeza que todos que acessarem poderão fazer a inscrição, e não será uma firula feita usando AJAX que irá impedir a inscrição do visitante.

Já no sistema Web que você está fazendo para sua Intranet pode usar a vontade os recursos em AJAX, colocar detalhes em Flash, pois você terá a garantia que todos os usuário utilizarão o Firefox 2 com o plug-in do Flash instalado.

Nessa discussão tem um ponto que causa bastante polêmica, existem sites que, mesmo estando na Internet, possuem um público alvo específico, por exemplo, empresas que prestam serviços para executivos de empresas de tecnologia, que com certeza contarão com computadores modernos, browsers atualizados e conexões de banda larga, fazem com que os autores do site coloquem AJAX, Flash e tudo mais, mas apesar de nesse post eu falar para analisar o público alvo, eu não concordo com isso, sou mais a favor da análise a partir de onde está publicado o site, ou seja, se está na Internet, todos podem algum dia estar interessados em acessar.

No próximo post dessa série irei começar a falar sobre como escrever um código-fonte elegante.

terça-feira, 4 de setembro de 2007

Live + Windows

Aproveitando o comentário do Daniel Assad (http://daniel-assad.blogspot.com/) no meu post anterior, em que ele citou os serviços Live da Microsoft, e eu comentei e citei também sobre uma nova ferramenta para integrar os serviços Live com o Windows, o Blog do Juliano Barreto da INFO trás um post sobre esse assunto (http://info.abril.com.br/blog/juliano/20070903_listar.shtml), vale a pena dar uma olhada.

O post fala sobre a existência da nova ferramenta que irá integrar os serviços Live ao Windows, o que irá facilitar muito a vida para quem usar os serviços, e como, seguindo essa tática, a Microsoft desbancou softwares que fizeram história, como Netscape, ICQ e Real Player.

ODF x OpenXML - O Google entra na briga?

Domingo passado a ISO recebeu os votos das entidades responsáveis pelas normas técnicas de cada país filiado a ela (no caso o Brasil é a ABNT) sobre a aprovação do OpenXML, padrão de aberto de documentos criado pela Microsoft (http://www.microsoft.com.br/), como um padrão ISO, o que abriria caminho para uma adoção maior do OpenXML, principalmente por governos, que tem dado preferência ao ODF, que já é um formato com padrão ISO, e é utilizado principalmente no OpenOffice.org e no StarOffice.

Não quero entrar no mérito de qual formato é o melhor, de se o OpenXML deve ou não virar padrão ISO. Mas hoje, diante do preço alto do pacote Office da Microsoft, muitas empresas tem migrado para o OpenOffice.org (BrOffice.org no Brasil) que possui a maior parte dos recursos utilizados por usuários de escritório. E visando essa migração, o Google parece querer tirar proveito, a três semanas o Google Pack (http://pack.google.com.br/), seu pacote de softwares para download gratuito, conta com o StarOffice 8, da Sun Microsystems (http://br.sun.com/), como uma de suas opções.

O StarOffice é um pacote pago, vendido por 70 dólares pela Sun, que estará disponível gratuitamente no Google Pack. E é o projeto pai do OpenOffice.org (que é apoiado pela Sun), que foi criado com base no seu código fonte liberado pela Sun em 2000.

Uma pergunta que fica é porquê o Google optou pelo StarOffice e não pelo OpenOffice.org, visto que a diferença entre os dois é que o primeiro possui alguns componentes proprietários, inclusive para a migração para o Office.