Clauber Stipkovic Halic – CSH

De uns tempos pra cá, a W3C(World Wide Web Consortium) vem se lembrando dos desenvolvedores, e passou a pensar em uma atualização da linguagem mais popular na web, o HTML.

Não só a W3C esta se movimentando nos últimos anos, mas varias empresas como a Apple, Mozilla, Opera(as quais formaram o WHATWG) também estão se preocupando com os novos rumos da web, dos desenvolvedores também.

Com tudo isso, novos pontos de vista e idéias surgem para melhor(ou pelo menos tentar) o que hoje ainda é um caos(para os que desenvolvem realmente, para a web e não para um browser apenas).

Duas vertentes surgiram no começo dessa nova maré de pensamentos A primeira foi a WHATWG, que defende a atualização do HTML, para uma versão que seja funcional para o cenário de Web que temos hoje, e a outra é a da W3C, que atualizar o XHTML.

HTML 5 Draft doc(W3C) – http://www.w3.org/TR/2008/WD-html5-20080122/
HTML 5 Draft doc(WHATWG) – http://www.whatwg.org/specs/web-apps/current-work/
Differences between HTML 5 and HTML 4(W3C) – http://www.w3.org/TR/html5-diff/
Web Forms(WHATWG) – http://www.whatwg.org/specs/web-forms/current-work/
O futuro do HTML – http://aindaapensar.blogspot.com/2006/11/o-futuro-do-html.html

Para quem quiser testar as novas funcionalidades de HTML5, o Mozilla Firefox 3.5 já da suporte a alguns dos novos recursos!.

Desenvolvimento Web, apple, blogices, css, firefox, mozilla, openSource firefox, fx35, mozilla, web, Web Development

Hoje, dia 30 de Junho de 2009, o Firefox 3.5 será lançado. A idéia é criar uma onda social e assim foi criado este projeto Shock. Cada país vai twittar, blogar, comentar, enviar e-mails, publicar – exatamenta as 3:50PM. Tudo começa no Brasil … e depois terminamos todos juntos no outro dia depois que todos os paises e timezones fizerem suas ondas…

Veja como as “Andas de Choque” vão ficar:

Link para a Campanha Shiretokoshock, Firefox 3.5

Desenvolvimento Web, blogices, css, eventos, firefox, mozilla fx35

Lendo o post sobre o “CSS3 Panel Slides from SXSWi” no blog da Molly E. Holzschlag, achei interessante dar uma olhada também no material das pessoas envolvidas no “panel”, então, gostaria de compartilhar alguns pontos interessantes sobre eles.

Para quem quiser baixar o Mozilla Firefox 3.1 BETA3 basta acessar o link abaixo – aproveite e baixe a versão em Português do Brasil :
http://www.mozilla.com/en-US/firefox/all-beta.html

Lembrando que o Mozilla Firefox 3.1 BETA 3 é apenas para testes ainda.

• opacity and rgba() – A possibilidade de aplicar opacidade nos objetos com RGBA;
• border-image – Com CSS3 será possí­vel colocar multiplas bordas com imagem, facilitando a aplicação de bordas arredondadas em objetos, por exemplo;
• Columns – Dividir o texto de um objeto em colunas, sem ter que colocar cada parte do texto em um objeto e depois utilizar a propriedade “float”, por exemplo;
• text-shadow – Essa propriedade vai ajudar muito a diminuir a quantidade de imagens colocadas como titulos, por exemplo, já que hoje, quando precisamos desse efeito, recortamos o texto como uma imagem e aplicamos no HTML/CSS uma técnica chamada de Image-Replacement, para ter um efeito como o do text-shadow;
• box-shadow – Mais uma propriedade que ira facilitar muito o desenvolvimento de interface web, pois hoje, temos que colocar uma imagem de fundo no objeto para obter esse, e isso causa um problema, se não for bem implementado, pode não deixar a box flexivel o bastante, mas com a propriedade box-shadow, esse problema será quase nulo, e também diminue o problema de performance, já que se essa imagem for colocada via CSS(o que é o normal de se fazer) gera uma requisilção HTTP a mais no site;
• border-radius – Borda arredondada em objetos sem pre é um problema na hora de desenvolver o site, mas com essa propriedade CSS3, essa tarefa também ficara mais fácil;
• word-wrap: break-word – Essa opção é interessante, pois mantem a semantica do (x)HTML, sem precisar de um </br> (elemento de quebra de linha), por exemplo;
• transform – uma das opções da propriedade “transform” será a opção “rotate”, que rotaciona um objeto;

Essas são só algumas das novidades que estarão disponiveis na implementação de CSS3 nos browser novos.

Mas, como toda nova tecnologia baseada nos browser tem uma propagação muito demorada, como porgo exemplo, a demora na adoção de um browser mais novo, isso lembrando da utilização do IE6 por muitas pessoas ainda. Acredito que muitos dos desenvolvedores web ainda vão demorar para utilizar essas novas implementações, já que, uma das preocupações quando se fala de desenvolvimento web, é de que todos que acessam a página, independente de qual browser esteja usando, deve ter acesso normal.

Por tanto, aproveito para lembrar que há uma campanha para conscientizar os usuários de IE6 a fazerem a atualização do seu browser, não importando qual sejá ele, Mozilla Firefox, Opera, Safari, Google Chrome ou Internet Explorer 7/8.

Para quem quiser participar da campanha nacional “Atualize seu Browser”, basta acessar o link abaixo:
http://imasters.uol.com.br/crossbrowser/pt-br/

Desenvolvimento Web, acessiblidade, css, firefox, mozilla, openSource

Participe da sessão interativa Mozilla 2010 Goals nesta Quinta-feira as 21:00 no auditório do ICMC USP em São Carlos. O projeto 2010 Goals[1] tem o objetivo organizar e documentar um conjunto de discussões para definir metas para os próximos 2 anos do projeto Mozilla. Existe um processo organizado[2] por líderes da fundação Mozilla e diversos contribuidores [3] que estão auxiliando na execução destas discussões pelo mundo. O Brasil é uma das constituições que participam.

A semente deste projeto inicia-se com a pergunta:  “What can Mozilla do with our products and our product development processes to move the Internet toward our vision of an open, decentralized, participatory place in the next two years?”

Para ajudar as discussão e busca das respostas estamos seguindo um modelo do tipo ” preencha as metas ” — referido como Goals no projeto. Este modelo sugere áreas principais. Nas sessões de discussões podemos sempre documentar outras coisas, caso algo não se encaixe. Segue abaixo estas Goals:

1. Internet as Centerpiece
2. Data
3. Mobile
4. Mindshare
5. Beyond Products ( foundation )

Veja descrição das Metas iniciais no Wiki Goals.

[1] Semente 2010 Goals
[2] Wiki Process
[3] Brazilian participation
[4] Initial Goals Description 

A sessão em São Carlos será uma discussão aberta, com breve introdução do formato e metas iniciais apresentadas para iniciar discussões. Os resultados da sessão serão documentados e publicados no Wiki 2010 Goals e compartilhados. O modelo da sessão será utilizado para que outros contribuidores possam melhorar ou criar outras sessões em outras localidades.

Categorias do Technorati mozilla, goals, 2010, mozilla brasil, firefox, mobile, internet, data, mindshare

Desenvolvimento Web, firefox, mozilla, openSource

Se você lendo este post, é por que o Firefox Download Day já esta acontecendo.

Queremos estabelecer um Recorde Mundial no Livro dos Recordes Guinness para o software mais baixado em 24 horas. Com o auxilio da nossa comunidade e a sua ajuda temos certeza de que conseguiremos. Quer saber como você pode nos ajudar ainda mais?

CLIQUE AQUI PARA BAIXAR O FIREFOX 3.0

O Firefox Download Day aqui no Brasil, tem inicio às 14hs (Horário de Brasília), e a partir desse horário você pode baixar o Firefox 3, ajudando assim a estabelecer o recorde mundial para o Firefox.

Desenvolvimento Web, firefox, linux, mozilla, openSource download day, firefox, guinness book, mozilla, spread firefox

Sei que esse é só mais um relato sobre o FISL 9 (e bem atrasado, diga-se de passagem), mas acho que é legal contar como foi a primeira participação oficial da Mozilla(junto com o grupo de usuários local, Moz/BR) no evento.

O FISL 9.0, diferente dos outras que participei, foi quase um divisor de águas(para mim, pessoal e profissionalmente falando), pois foi o primeiro evento no qual eu participei representando a Mozilla(a comunidade brasileira e a Foundation também), e posso dizer que foi um prazer fazer isso.

Mas vamos ao que interessa, os relatos da minha saida de São Paulo até a minha volta(infelizmente).

Read more…

Desenvolvimento Web, blogices, eventos, firefox, linux, mozilla, openSource evento, firefox, FISL9, mozila workshop, mozilla, mozilla brasil

Aconteceu em Abril, o Workshop Mozilla 2008 (no qual eu tive o prazer de ser convidado a palestrar), como um evento dentro do FISL, em Porto Alegre.

Para quem quiser ler mais sobre o Pós FISL, basta acessar o link abaixo para ter acesso a todos os videos do workshop, e para as fotos das palestras.

http://wiki.mozilla.org/FISL:2008:posfisl

E para quem quiser ver o video da minha palestra, pode verificar no video abaixo:

Firefox – A Developer\’s Best Friend ( portuguese ) – Mozilla Workshop -> FISL 9

Update: Abaixo, os slides da palestra

Desenvolvimento Web, acessiblidade, blogices, css, eventos, firefox, linux, mozilla, openSource Add-on, firefox, FISL, FISL9, mozilla, Web Development, Web Standards

Conversando sobre Boas Práticas(na área de programação) com um amigo essa semana, achei interessante falar um pouco sobre isso aqui no blog.

Primeiro, o significado de boas práticas vem do inglês “best practices”, que denomina os melhores métodos para se realizar uma tarefa, ou seja, o meio que tem mais chance de levar até o resultado esperado sem muitos problemas.

Muitas profissões tem criado as suas “Boas práticas” relacionadas a área, para otimizar processos ou encaminhar melhor os novos profissionais que estão chegando.

Na área de computação não é muito diferente. Temos várias “boas práticas”, para a grande maioria das tarefas de informática que ajudam e muito no dia-a-dia.

O Desenvolvimento Web também tem as suas “boas práticas”, que ajudam na hora de desenvolver um site, e é sobre algumas delas que eu vou falar.

Doctype – DTD(Document Type Definition)

Essa boa pratica é o começo de tudo, ou seja, é a primeira coisa que o user agent do seu browser procura para saber qual é o tipo de Linguagem de marcação(que por muitos é conhecido também como HTML ) que ele terá que interpretar(parsing) no momento em que a página for solicitada.

Quando ele é informado na página, o browser saberá qual tipo de marcação deverá interpretar, e assim a página será carregada muito mais facilmente.

Para saber mais sobre Doctype, visite os links abaixo:

• Revolução Etc – Artigo sobre Doctypes
• Tableless – Doctypes e Browsers Modes

Quirks Mode e Strict Mode

Dentro do doctype, nós temos como informar para os Browsers dois tipos de renderização de CSS. O modo “antigo”( ou Quirks Mode ) e o modo “estrito” ( ou Strict Mode ).

O Quirks mode, é considerado o modo “antigo”, pois é a implementação que na época dos Browser Internet Explorer 4/5 e Netscape 4 (onde ambos não faziam parte da W3C, e assim, não seguiam os padrões, apesar de na época, o Internet Explorer interpretar muito melhor o CSS do que o Nestcape) permitia que os browsers passassem a interpretar os padrões(Strict Mode), que estavam começando a ganhar espaço, ou o modo “antigo”(dai o Quirks mode).

Para saber mais sobre Quirks Modes, visite os links abaixo:

• Revolução ETC – O que é Quirks Mode?
• Quirks Mode – Quirks Mode and Strict Mode(inglês)

Por tanto, verifique sempre, qual será o destino final do seu site, ou da sua aplicação web, para saber qual modo utilizar. Mas nunca se esqueça de utilizar os Doctypes e os Modos de renderização certos para a sua aplicação.

Mais alguns site para uma boa leitura:

• 24 ways – Transitional vs. Strict Markup(inglês)
• Mozilla Developer Center – Mozilla’s DOCTYPE sniffing(inglês)

Technorati Tags: dtd, doctype, best practices, boas práticas, quirks mode, strict mode, user agent, parsing, development, desenvolvimento

Boas Praticas, Desenvolvimento Web, acessiblidade, css, firefox, mozilla, problemasSolucoes

Depois de ler alguns artigos sobre Wireframe, e ver que realmente isso é importante no processo de criação de sites. Resolvi criar um post sobre isso.

Hoje é muito comum ver sites sendo desenvolvidos sem nenhum planejamento, pois ele precisa ser desenvolvido rapidamente e precisa estar no ar logo(entre outras coisas que os gerentes e clientes falam).

Muitas vezes, isso causa vários retrabalhos de código, seja em client-side(CSS, HTML, Javascript …) ou server-side(PHP, ASP.NET, JSP …), pois não ouve um planejamento de como fazer, ou do que o site realmente deveria ter.

Se pensarmos em um site como um projeto de automóvel, por exemplo, vamos ver que não adianta saber que o todo carro possue motor, rodas, freios, etc. Precisamos saber qual será o tamanho do carro, a disposição do motor, como será a disposição do painel(onde estão o radio, porta luvas, etc).

É nesse ponto que entra os desenhos do projeto para o automóvel. Nada sei da cabeça do projetista e vai direto para a linha de montagem.

Antes mesmo do carro conceito(como é chamado o protótipo), é feito um estudo para verificar a usabilidade dos controles do carro, como será o espaço interno, se a aerodinâmica ir prejudicar a estabilidade, entre outros fatores, que podem influenciar no sucesso ou no fracasso do produto.

A criação de um site, também segue(ou pelo menos deveria seguir) esse conceito, mas infelizmente, muitas empresas ainda não gastam um tempo do projeto para essa tarefa, e muitas vezes, pagam por não ter planejado e projetado uma interface(ou até mesmo os controles do site) mais intuitivos e dinâmica.

Para diminuir esse impacto de projeto, e até mesmo, de tempo e dinheiro gasto no desenvolvimento, o Wireframe é um excelente passo.

Basicamente, o Wireframe consiste em um “esboço” de como será o layout do site, dizendo onde os elementos serão posicionados , e descrevendo quais elementos serão utilizados(isso dependendo é claro, qual o nivel de detalhamento que o seu Wireframe terá), de acordo com o que, muito provavelmente, será o layout final.

Há também a possibilidade de uma pratica e rápida mudança antes do layout definitivo, evitando que muitos imprevistos aconteçam no decorrer do desenvolvimento, e ajudando ainda na analise de usabilidade de interface do site.

Alguns links interessantes sobre Wireframe estão listados abaixo:
http://usabilidoido.com.br/quanto_mais_simples_o_wireframe_melhor.html
http://webinsider.uol.com.br/index.php/2003/12/09/wireframe-documento-cada-vez-mais-importante/

Você deve esta se perguntando agora se há alguma ferramenta para “desenhar” os Wireframes?!?!

Bem, eu procurei várias ferramentas para isso, mas a que mais me agradou, e que mais me deu produtividade, foi o Inkscape.

Além de ser open source e multi-plataforma(Windows, Linux e MacOS), o inkscape tem uma interface muito fácil de usar.

Mas você pode testar outras ferramentas como o GIMP, PhotoShop, Flash(sim, já vi pessoas usando o Flash para desenhar wireframes), ou alguma ferramenta que você tenha mais habilidade para desenhar.

Grande abraço, e comentem

Technorati Tags: wireframe, usabilidade, acessibilidade, web, desenvolvimento, firefox, open souce, inkscape

Boas Praticas, Desenvolvimento Web, acessiblidade, blogices, css, firefox, openSource, problemasSolucoes

Pra não dizer que o carnaval não foi divertido, ai vai uma tirinha retirada do site “Nerdson não vai à Escola”

Bom carnaval à todos!!!

Desenvolvimento Web, blogices, css css, hack, html, IE6, nerdson, w3schools, web