O mercado de tecnologia da informação tem buscado profissionais capazes de analisar criticamente o ambiente de desenvolvimento web, com visão orientada para qualidade e melhoria de processos. Atento a esse cenário, o Centro Universitário Senac lança a pós-graduação Engenharia Web, a primeira dessa categoria no Estado de São Paulo. Duas unidades, Senac Lapa Tito e Senac Santo André, vão oferecer o curso no próximo ano, capacitando em 366 horas interessados em planejar e coordenar projetos nesse segmento.

“Definida como o uso sistemático da engenharia no desenvolvimento, na implantação e manutenção de aplicações web de alta complexidade, trata-se de uma nova área do conhecimento, ainda pouco explorada. No Brasil, percebe-se que esse trabalho representa uma parte significativa da produção de empresas de softwares”, comenta Richard Martelli, técnico da área de tecnologia da informação do Senac São Paulo. Além dessas organizações, o engenheiro web pode atuar em instituições de comércio eletrônico, de design, de publicidade, portais de conteúdo, comunidades virtuais, bem como órgãos governamentais e ONGs.

Apesar de fortemente baseado na engenharia de software, o curso apresenta como diferencial ao aluno o tratamento multidisciplinar, tendo como público-alvo é formado por profissionais de análise de sistemas, ciências da computação, sistemas de informação, engenharia de software, web design e mídias interativas, além de pessoas que já atuam na área e desejam uma compreensão mais abrangente.

Mais informações podem ser obtidas em www.sp.senac.br ou diretamente no Senac Lapa Tito e Senac Santo André.

Análise de Investimentos

Minerando opiniões sobre as Eleições

A maior novidade é que já criei também um conjunto para analisar as Eleições 2010, ou melhor, analisar as opiniões sobre os presidenciáveis num conjunto de blogs, portais e no Twitter. Serra e Dilma já estão sendo minerados pelo sistema, que vai medir o feeling das postagens relacionadas em diversos sites nacionais, blogs diversos e também citações no Twitter. Claro, essa nova investida vai demandar uma série de atualizações no sistema, muitas delas já planejadas desde o ano passado, mas também algumas que vão surgir nesse novo período. Certamente, mudanças esperadas no ciclo de evolução de um sistema dinâmico na Webesfera.

E nesse ponto, as críticas e dicas dos usuários serão muito importantes! Como nunca, aguardo comentários, críticas e sugestões de todos que utilizarem e avaliarem o opSys, para deixá-lo sempre melhor. Confira agora mesmo: http://www.opsys.com.br

Novidades chegando

Nesse momento, já temos algumas pessoas com habilidades distintas colocando seus skills para funcionar, arquitetando mudanças para o opSys, que o tornaram mais fácil de navegar e “consumir”. Designers, Arquitetos da informação, marketeiros… Logo logo, poderão conferir mais novidades! Aguardem!

Você conhece a história dessa rede mundial que você está utilizando agora? Bom, praticamente todos usuários com mais de 16 anos tem uma breve idéias sobre. Mas é bom saber mais sobre essa coisa que você utiliza todos os dias, para não dizer todas as horas.

Então, para facilitar a coisa, posto aqui um excelente PodCast (por natureza) falando sobre a história da Internet. Recomendo ouvir o quanto antes! Transmitido diretamente da Campus Party 2010, com a presença de personagens de grande  referência no assunto. Não se preocupam apenas em explicar o início físico da rede, mas também de explicar como ela chegou até a grande “entidade” que é hoje.

Para ouví-lo, basta seguir esse link.

Nos últimos dias, temos brigado muito por coisas muito pequenas, as vezes passageiras. Cada migalha desperdiçada é motivo para um nova discussão que acaba mudando o rumo das coisas… Calma gente, não estou tendo problemas de relacionamento não, são apenas discussões sadias de trabalho para se melhorar os níveis de performance nos aplicativos.

Quando se atinge um certo número de usuários de uma única aplicação, devemos tomar certos cuidados. Muitas vezes, ignoramos alguns pontos que podemos melhorar, deixando 1KByte, 2KB mais leves, pois afinal, para um usuário parece tão pouco, mas quanto representa 2KB multiplicado por 100 mil usuários? 195 MB. É, assusta, e as cifras só tendem a aumentar.

Com o advento da computação em nuvem, alguns perceberam que realmente deveriam otimizar suas aplicações, pois cada KB gasto vai representar algum valor que será, com certeza, debitado num cartão de crédito futuramente. Enquanto antigamente, bastava planejar a compra de uma máquina muito além das necessidades e ter um custo fixo, agora, a briga é para sempre diminuir a conta no fim do mês, como numa economia doméstica (certa vez, ouvi que toda economia é de migalhas. Concordo).

Mas muitas vezes, desenvolvedores de aplicações esquecem de alguns detalhes como por exemplo, o peso dos arquivos da camada de apresentação de suas aplicações. Na Web, isso também deve entrar na conta: tamanho do HTML, CSS, JS e imagens. E hoje em dia, são relativamente conhecidas técnicas para aprimorar esses estáticos para uma melhor experiência do usuário. Digo relativamente porque ainda me deparo com muitos websites, sistemas e gadgets por aí sem nenhuma otimização nesse sentido. No Brasil ainda temos muitos usuários que não dispõe de banda larga, e eles agradecem cada byte salvo.

Primeiro passo: Limpeza

Um arquivo limpo de tudo que não é necessário é muito melhor, sem dúvida. Elimine dos arquivos aquelas linhas velhas, cheias de comentários inúteis, atributos desnecessários, funções que não são usadas, variáveis zumbis (que estão ali apenas para … nada). Em minha última façanha do tipo, deu pra economizar cerca de 10KB. Como vamos usar uma ferramenta mais pra frente, não precisa deletar nada do arquivo ainda, a não ser que queira ver o quanto você ganhou com esse processo. Comentários podem ser mantidos, e métodos “depreciados” podem ser mantidos comentados também (eu faço isso para armazenar código que venha a ser útil ou que queira manter no histórico para referência rápida).

Reavaliação

Depois desse passo, é a hora de fazer uma certa mágica. Esse passo depende de experiência do usuário, e que tenha um bom conhecimento de lógica e da linguagem em si: reavaliar seu código, diminuindo estruturas de código sem aumentar a quantidade de cálculos, quando não diminuindo o custo computacional (análise assintótica). Isso pode envolver uma análise mais  matemática do código, estimando o número máximo de comparações e operações que ele pode executar. Por isso demanda um profissional graduado. Mas lembre-se: não sacrifique o processamento em troca de tamanho de código! Diversas vezes um código maior e mais específico pode rodar muitas vezes mais rápido. Também, outras vezes, uma simples instrução a mais pode representar um laço a menos.

Comprimindo o código: YUI Compressor

Esse compactador transforma seus arquivos JS e CSS em versões minificadas: com sintaxe reduzida, sem quebras e espaços desnecessários, sem comentários, tudo numa única linha. Isso pode reduzir drasticamente o tamanho do arquivo sem alterar seu conteúdo (eu consegui em minha última utilização a marca de reduzir um .js de 135KB para 84KB!!!), o que é o que buscamos (afinal, quem quer codificar duas vezes a mesma coisa? Otimizar tempo também é muito importante! O YUI Compressor é muito prático e rápido para essa tarefa.

Apenas para exemplificar: ele também altera as assinaturas das suas funções/classes:

function xyz(value_1, value_2) {
    this.param_1 = value_1;
    this.param_2 = value_2;
    ....

Ficará assim, num primeiro momento, assim:

function xyz(f, g) {
    this.param_1 = f;
    this.param_2 = g;
    ....

E depois, assim:

function xyz(f,g){this.param_1=f;this.param_2=g;....

Não se preocupe! Tudo vai funcionar normalmente. Mas podemos perceber que esse compressor realmente vai diminuir seus arquivos. Na tabela abaixo, pode ver o que esses três métodos podem fazer com o peso da sua aplicação:

Um ganho de ~50% no peso total da aplicação, apenas na parte de storage e fileserv.

A União faz a Força Velocidade

Se possível, junto todos os arquivos num único. Tem vários .js? Faça apenas um. O mesmo para os CSS. No protocolo HTTP/1.1, temos uma definição que recomenda não ter maiss de duas requisições sendo processadas ao mesmo tempo para o mesmo servidor. Alguns browsers, como o I.E., seguem isso a risca. Logo, quanto mais arquivos tiver para carregar, pior: mais conexões serão necessárias para atender a demanda, e como o browser só fará duas ao mesmo  tempo, o usuário vai ter que esperar. Aposto que você até teve aquele momento “lâmpada sobre a cabeça” agora, imaginando se poderia fazer isso também para as imagens… e poderá! Veja a seguir no próximo tópico. Uma outra dica para sanar esse problema das conexões simultâneas é manter arquivos em vários servers diferentes.

Sprites

Essa já é mais complicada (principalmente para os desenvolvedores não designers, pelo skill necessário), mas pode significar um gadget/site muito mais rápido para o usuário final. Assim, imagine você carregando vários arquivos .png, os ícones da sua aplicação, por exemplo. Seguindo esse conceito, eles vão ser carregados apenas 2 a 2, mesmo que o usuário tenha uma banda larga suficiente e seu servidor um canhão para carregar muito mais do que isso (falando em tamanho).

Para sanar essa deficiência indireta, uma técnica utilizada são os sprites: você coloca todas as imagens num único arquivo .png (pode ser outra extensão, se aplicável, mas eu recomendo essa), e com os comandos CSS, você seleciona apenas a parte que deseja. Assim será possível usar todo o potencial da banda disponível para trazer todos seus ícones numa única conexão com o servidor, enquanto a segunda concorrente pode ser uma fonte de dados essencial para seu funcionamento.

Nesse tutorial do A List Apart você encontra uma extensa referencia sobre a técnica de sprites.

Concluindo

Bom, com estas ações simples, aposto que sua aplicação será bem melhor carregada, economizará até alguns $$$ para poder me pagar uma cerveja. Sendo assim, deixe seus comentários e dicas nos comentários, caso eu tenha deixado passar alguma! Em breve, um artigo sobre otimização de banco de dados e de fluxo de aplicações.

Como dito num dos links acima, o objetivo não é criar mais redes sociais voltadas para leituras. O diferencial fica pelo aproveitamento que faz do poder social já criado, utilizando-se da rede de amigos que você já tem no Orkut para enviar novidades e conhecer o que sua roda de amigos gosta de ler. Também ajuda a divulgar suas leituras e encontrar mais fãs dos autores preferidos, quando posta suas atualizações e comentários diretamente para o Twitter. E não para por aí. Ele também tira proveito do coletivo, nos seus rankings. É possível acompanhar a lista de livros mais lidos, mais comentados e mais desejados em tempo real, enquanto as pessoas vão alimentando esses dados.

Você fica sabendo dos livros que seus amigos estão querendo e não erra na hora do amigo secreto. Aproveite e mantenha sua lista “Quero Ler” atualizada, para aumentar as chances de ganhar aquele BestSeller que você tanto gostaria. Em breve irei comentar mais sobre o projeto, tecnicamente. Linguagens, servidores, técnicas e ‘cositas’ mais. Enquanto isso, gostaria de ter opiniões dos usuários, sejam elas boas ou ruins. Queremos desenvolver o melhor aplicativo social para o nosso público alvo: os usuários. Os comentários estão aí para vocês! Em breve lançaremos a ferramenta também no Facebook, e quem sabe sua dica já não se concretiza lá, não é mesmo?

[youtube]HKKAr42Xgls[/youtube]

No vídeo, parece uma brincadeira. Mas com certeza, muitas pessoas atualizam seus status nas redes sociais tão logo cheguem de volta de suas viagens de lua de mel (ou quem sabe, até do hotel, se tiver uma área wi-fi ou uma lan-house por perto). Eu já presenciei esse fato. Não, eu não tive nenhum contato com computadores durante minha lua de mel!

Essa informação com certeza é muito importante para empresas que vendem produtos e serviços para recém-casados. Imaginem se fosse possível definir um status indicando que você pretende se casar? Melhor ainda, pois já podem trabalhar em ações para suprir suas listas de presentes de casamento.

• Facebook facilitando a autenticação de aplicações – Um tutorial ensinando a integrar sua aplicação PHP com o Facebook Connect.
• E lá vem o CSS3, que venha logo! – Você cansou de brigar com layout em monitores widescreen?
• Confira algumas listas interessantes no Twitter
• Cursos Gratuitos Online na FGV – Diversos, desde técnicos até gerenciais
• THLopes e o comércio eletrônico
• VEJA Meus Livros: Faça sua Biblioteca Virtual no Orkut, divulgue para seus amigos e confira o que eles estão lendo agora
• Learn Something Everyday – Pra você que  gosta de aprender um pouquinho todo dia.
• GuanaCast com Paulino Michelazzo – Empreender com Software Livre, no GuanaBara Cast
• Beautiful Souped Up – Uma ferramenta GUI para testar queries Beautiful Soup
• Convites do novo Orkut – Alguém quer?

Independente disso, vejo que uma forma de brigar pelo mercado agora é investir no desenvolvimento de novos aplicativos (gadgets) e games para as redes sociais. Quanto mais fácil e prático a rede social for para os desenvolvedores nesse sentido, melhor. Basta comparar a quantidade e qualidade dos aplicativos presentes nas redes. A diferença é esmagadora. Mas segundo alguns gurus, isso vai mudar e o foco no desenvolvimento das funcionalidades e novidades do Orkut vai ser nos aplicativos. Tomara! Os desenvolvedores aqui agradecem.

Falando em novo Orkut, eu ainda tenho alguns convites. Alguém aí quer? Os interessados, favor manifestar nos comentários.

Como a maioria de vocês deve ter visto, o Arena Info já chegou ao seu fim faz algum tempinho (e ufa!, finalmente consegui algum tempinho para postar aqui!). Infelizmente, não fui vencedor com o opSys, mas me considero um, graças ao voto de confiança de 177 pessoas que atestaram sua preferência pelo sistema extrator de opiniões. Para mim, um final vencedor, mesmo não sendo o primeiro. Esse concurso levou o opSys ao conhecimento geral, permitindo algumas parcerias bacanas (uma delas com um dos grupos participantes do concurso) que irão permitir seu desenvolvimento ao longo desse 2010 que vem, e assim participar de outros concursos mais.

Obrigado pessoal! Fiquem com um preview do novo logotipo do projeto.

Em alguns lugares onde trabalhei, ele já foi motivo de re-trabalho. Todos diziam: “Terminou? Agora tem que fazer funcionar no IE6“, ou até “Você sabe o que é POIE? Programação orientada a Internet Explorer“. Uma outra famosa: “Faça funcionar no IE6, e funcionará em todo o resto!“. Sim, na maioria dos casos. Mas a que custo? Acabar com todos os standards, e ter que gerar versões específicas de CSS para cada um dos browsers? Eu me recuso a re-trabalhar na maioria das vezes. Sigo os standards, e faço adaptações apenas em seções muito cruciais para o funcionamento do trabalho.

Muitos sistemas e redes sociais já colocaram avisos quando você roda o browser empoeirado, pedindo que instale uma versão mais recente ou até mesmo um outro browser. E acho isso muito certo. Até quando vamos dar suporte a tecnologia antiga? Já é quase uma década de vida… aspirando a morte. Os computadores recém-adquiridos já vem com sistemas atualizados, e claro, com browsers atualizados. (Qualquer versão do Windows Vista vem com pelo menos o Internet Explorer 7).  Qualquer distribuição decente tem um sistema de atualizações automáticas que alertará para o uso de uma versão atualizada do browser atual. Não seja antiquado! Atualize esse browser meu rapaz!

Eu faço minha parte: sigo os standards, e nego suporte até onde posso. Mas se você ainda não pode abandonar esse “aposentando browser”, e fez tudo seguindo os standars e testando apenas no Firefox, e na hora de rodar no windows liso (padrão de fábrica), você deve estar procurando ajuda agora. Infelizmente, ainda não podemos apenas abandonar os browsers da Microsoft, pois detem uma boa parte do público, mas podemos tomar algumas medidades “mágicas” que vão tornar o convívio mais pacífico. Vou deixar algumas dicas que podem poupar, e muito, seu tempo no projeto atual e permitir que você estude alguma coisa bem legal! Vamos lá

Doctype

Certo, se você seguiu os standards, não deveria ter esquecido isso, mas pode acontecer. Então, se você terminou o layout do html que renderiza bonitinho no FF (FireFox) mas não fica bom no IE6 (e provavelmente nos demais IE’s também), verifique se seu arquivo .html tem um cabeçalho parecido com esse:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Isso fará com que os browsers renderizem o HTML de acordo com o que você programou, e não conforme eles pensam ser o melhor jeito. Veja aqui nesse link uma lista completa de DOCTYPES que estarão de acordo com o que você programou. Isso ajuda a resolver alguns problemas bizarros, como quando o browser parece renderizar elementos fantasmas, como labels repetidos e texto sujo na tela (principalmente se você o gera usando javascript. Também já resolve boa parte dos problemas de layout decorrente de má interpretação de CSS.

Javascript

Não preciso nem dizer que usar frameworks como jQuery para programar seu Javascript é essencial num mundo cross-browser. Deixe para ele todas aquelas minúcias de cada browser. Exatamente, alguém, já esquentou a cabeça e perdeu vários fios de cabelo para que você pudesse ter noites melhores de sono.

Mas vou deixar uma dica aqui sobre um erro muito, mas muito chato mesmo. Chato porque esse é um erro comum, mas que passa desapercebido nas primeiras revisões que você faz no seu código. Esquecer as vírgulas nas definições de objetos. Tudo funciona muito bem no FF, porém, coisas estranham acontecem quando você roda no quase-defunto IE6. Quando você definir um objeto javascript:

var objeto = {
    atribute1: value1,
    atribute2: value2,
    atributeN: valueN
}

nunca esqueça de limpar a vírgula do último atributo, ou então, escrever a vírugula separadora de atributos no começo de cada linha:

var objeto = {
    atribute1: value1
    ,atribute2: value2
    ,atributeN: valueN
}

Assim, você evitar deixar a vírgula ali, sempre que copiar o atributo anterior para adicionar um novo irá manter a ordem dos mesmos. E assim, não vai perder várias horas, pois os IE’s raramente vão indicar onde ela está perdida… Esse padrão para atributos é adotado em projetos do EXTJS e em vários outros. Numa primeira olhada, a sintaxe parece estranha, mas te garanto: você vai adorar ter umas horinhas extras para dar aquela atenção ao seu feedreader invés de ter que caçar bugs!

Outro problemas não tão comum, mas que também pega desenvolvedores de surpresa: a instrução for (item in collection). Quando você utiliza a seguinte estrutura:

for (item in array) {
    // suas instruções
}

A sintaxe fica muito mais legível, e as coisas rodam execelentemente… menos no Internet Explorer! Então, tome cuidado, e vá já fazer aquele refactoring esperto para trocar os fors como o de cima pelo for tradicional do javascript.

CSS

Quando você utilizar frameworks CSS (Blueprint, grid960, etc), alguns atributos são resetados (com o quase onipresente reset.css que acompanham o kit de cada framework). Porém, alguns atributos css não são processados como deveriam no IE6 e em seus irmãozinhos. Principalmente o border-colapse, para as tabelas. Então, quando seu layout parecer estar de ressaca, tente setar o border-colapse: 0; antes de arrancar mais cabelos. Outra coisa que ajuda bastante na hora de adaptar CSS ao IE, é usar um seletor de ID invés de classe/elemento, principalmente quando se trata de elementos de formulários. Dê um nome exclusivo ao campo/input, e a chance dele renderizar corretamente no seu IE.

Cuidado com os efeitos! Lembre-se que no IE, os valores para opacity são valores entre 0 e 100,  e não entre 0 e 1.0 como na definição padrão (mais uma vez, um tiro contra os padrões e regras de boa vizinhança na Web).

E quando nem tudo tiver jeito

Bom, você que usa bastante a internet já deve ter percebido que muitos do grandes sites e redes já sabe da morte do browser, e convida os usuários a abandonar o barco antes que ele afunde, mostrando uma mensagem do tipo “É necessário atualizar seu navegador”, conforme a do Facebook, que você encontra clicando na imagem ao lado. Recomendo a você fazer o mesmo, pois algumas vezes não há erros, nem warning,s nem EXPLICAÇÕES! Seu sistema simplesmente não vai funcionar no IE6 (ou parecer um zumbi) simplesmente porque ele (ou seus criadores) não quiseram que funcionasse por tanto tempo assim. No meu último projeto, há uma função que não gera nenhum erro de processamento ou script, mas simplesmente não executa, misteriosamente sendo apenas mais uma instrução como todas as outras anteriores. Não vou ficar gastando o dinheiro de meu cliente! Vamos logo abandonar o defunto do IE6, e concentrar nossos esforços em trazer mais funcionalidades e compatibilidade. Coloque uma bela mensagem  convidando seus queridos usuários a usar um broser mais atual ou melhor.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">