Partilhar esta Entrada

Estou de facto ansioso pela versão que agrupa o email e SMS, o que o vai tornar num excelente centro de mensagens para o browser. O que mais me entusiasma é que posso pesquisar por uma determinada mensagem independentemente da fonte.

A versão que neste momento se encontra disponível permite ver as mensagens de forma muito semelhante a um cliente de email. Existe mesmo um projecto separado para o Mozilla Thunderbird.

Para os corajosos que pretendem testar o projecto podem faze-lo através da página oficial do projecto, no entanto é necessário ter em conta que se trata de um protótipo, portando com muitos bugs, que pode colocar em risco as mensagens que gere.

Partilhar esta Entrada

No vídeo não foram utilizadas câmaras ou luz, mas sim duas tecnologias para captar imagens 3D: Geometric Informatics e Velodyne LIDAR. A primeira para captar imagens que estão próximas, enquanto que a segunda permite captar ambientes maiores. No vídeo, foram utilizados 64 lasers que rodam e gravam numa amplitude de 360º, 900 vezes por minuto. Está disponível no site um vídeo que demonstra a forma como foram captadas as imagens e como o vídeo foi feito.
É possível ainda interagir com o vídeo, que é como quem diz com a captação das imagens a 3D, utilizando o rato podemos manipular a informação e criarmos as nossas próprias visualizações, o que significa é possível rodar a cabeça do Tom Yorke (vocalista) enquanto a música toca e ele canta…
Se realmente conseguirmos criar uma visualização dos dados que queremos partilhar podemos aceder ao grupo House of Cards no Youtube e disponibilizar.

O director do vídeo referiu que o projecto é um reflexo do estado actual da sociedade, onde tudo são dados computorizados, em que estamos tão dependentes que as nossas vidas se tornam quase digitais, o vídeo acaba por demonstrar isso mesmo.

Os Radiohead já se consciencializaram que a música neste momento não pode estar limitada a simplesmente ser ouvida tem de ser algo mais, a promoção da mesma tem de ser inovadora, tem de chamar a atenção… Trazer o chamado valor acrescentado!

Partilhar esta Entrada

Normalmente não existe muita originalidade nos anúncios de emprego, os de Portugal são normalmente um verdadeiro tédio de ler, é necessário ter profundo conhecimento sobre 20000 tecnologias distintas e uma vida de experiência…
Tenho por hábito seguir a lista de anúncios de emprego no CrunchBoard, que por norma apresenta verdadeiras “pérolas”, seguem alguns desta semana:

• Fulltime Senior AJAX/PHP Web Developer
• QA Engineer
• Software Support Specialist
• GoodBarry .NET Web Development Ninja
• Head of Web Design & Front-End Development
• Quality Assurance Cowboy
• Web Developer
• Operations Support Engineer
• Technical Architect
• Ruby Developer

Tenho obviamente de destacar o Ninja de .NET Web Development e o Quality Assurance Cowboy, o primeiro começa da seguinte forma:

“We’re looking for a smart, motivated, hands-on .NET developer with a desire for world domination. You’d need multi-faceted web development skills, being able to tap dance across .NET (C# & VB), SQL, XHTML and javascript routines. You’d probably think that in a pinch, you could code a new, better version of GMail in a couple of weekends.”

Simplesmente delicioso, adorei a parte da melhor versão do Gmail em poucas semanas!

Por vezes é necessário este espírito para seduzir as pessoas, não basta acenar com as notas, apesar de ser importante o dinheiro não é tudo. Um bom ambiente de trabalho permite-nos acordar e não sentir aquela mágoa por ter de ir trabalhar, permite-nos encarar os projectos e as dificuldades com maior dedicação. Não quero dizer com isto que as empresas não necessitam de apresentar um estilo formal, digo apenas que deve ser balanceado, como em tudo deve existir um equilíbrio…

Partilhar esta Entrada

O Google Webmaster Tools é um recurso que permite perceber a visibilidade das páginas no Google. Permite identificar que termos de procura normalmente direccionam tráfico para as páginas e permite verificar através de que palavras ou conjunto de palavras o site está incluído nos primeiros resultados de pesquisas. Também permite identificar o conteúdo mais visitado e visualizar quais as palavras utilizadas por outros sites que ligam a esse conteúdo.

O Google Analytics é uma ferramenta muito mais conhecida que a primeira, que permite ter uma visão de todo o tráfego de uma página web, se é proveniente de um pesquisa do Google, através de anúncios ou outros meios. É igualmente possível identificar de que regiões o site recebe mais visitas, assim como as principais páginas de chegada.

O Google Website Optmizer permite identificar que zonas do site necessitam de melhorias. Permite combinar diferentes tipos de conteúdo para determinar que tipo é mais vantajoso para permitir um maior número de visitas ao site.

Neste momento todas as estas ferramentas são totalmente independentes, no entanto usar as três ferramentas em conjunto permite adquirir um conhecimento completo e detalhado das visitas que um determinado site recebe, permitindo assim fazer alterações no conteúdo ou desenho do site.

Este primeiro webinar conjunto destas ferramentas terá lugar no dia 8 de Julho pelas 9h da manhã (Hora do Pacífico – 17h em Portugal), para assistir é necessário registo através do site do evento.

Para quem não tiver disponibilidade para assistir ao vivo, será posteriormente disponibilizada uma versão da apresentação através do mesmo link do registo. Também será possível visitar o Google Webmaster Central para ver todas as ferramentas disponibilizadas pelo Google.

Partilhar esta Entrada

Upgrade da versão 7.10 para 8.04 LTS

Upgrade via Web

É bastante fácil realizar o upgrade para a nova versão, basta seguir o procedimento apresentado:

1. Aceder a System > Administration > Updata Manager

2. Clicar no botão Check para verificar se existem updates.

3. Se existirem updates para instalar, utilizar o botão Install Updates. Depois de concluido pressionar novamente o botão Check.

4. Uma nova mensagem deverá aparecer informando que existe uma nova distribuição disponível, assim como um botão para Upgrade.

5. Clicar no botão Upgrade.

6. Seguir as instruções que vão surgindo no ecrã. De notar que o upgrade necessita de descarregar vários pacotes, portanto o tempo de instalação também está dependente da velocidade de ligação à net.

Upgrade da versão 6.06 LTS para 8.04 LTS

Upgrade via Web

1. Certificar que o canal de software “dapper-updates” se encontra activo.

2. Realizar todos os updates antes de iniciar o upgrade.

3. Pressionar Alt+F2 e escrever “gksu update-manager -d”

4. Uma nova mensagem deverá aparecer informando que existe uma nova distribuição disponível, assim como um botão para Upgrade.

5. Clicar no botão Upgrade.

6. Seguir as instruções que vão surgindo no ecrã. De notar que o upgrade necessita de descarregar vários pacotes, portanto o tempo de instalação também está dependente da velocidade de ligação à net.

Upgrade a partir do CD/DVD

Este método é apenas aconselhado se a máquina não se encontrar ligada à Internet.

1. Download da imagem do Ubuntu 8.04 LTS e Gravar o CD de instalação utilizando um qualquer programa de gravação.

2. Inserir o CD/DVD na drive.

3. Uma caixa de diálogo será apresentada disponibilizando uma opção para fazer o upgrade usando o CD/DVD.

4. Seguir as instruções do ecrã

NOTA: Se a caixa de diálogo não for apresentada pressionar Alt+F2 e escrever o seguinte comando:

gksu sh /cdrom/cdromupgrade

Fonte: Página de Upgrade Oficial do Ubuntu 8.04 LTS

Partilhar esta Entrada

A Canonical conseguiu reunir no Ubuntu 8.04 o melhor que o mundo open-source tem para oferecer. Esta distribuição está neste momento preparada para ser um concorrente de peso ao Microsoft Windows em desktops e portáteis.

Para o crescimento da utilização deste sistema operativo é também necessário que grandes empresas se cheguem à frente e reconheçam o produto. O Ubuntu ganhou muitos pontos quando em 2007 a Dell começou a colocar em alguns dos seus portáteis e desktops este sistema operativo. Isto permitiu ganhar um aliado de grande renome, mostrando deste modo aos utilizadores que podem ter um sistema operativo sem custos adicionais, seguro, robusto e acima de tudo fácil de utilizar.

Claro que para este sucesso é também importante o reconhecimento do software open source, para isso também tem contribuido o crescimento do browser Mozilla Firefox assim como o OpenOffice, não esquecendo aplicações como o Amarok, Gimp e Pidgin.
E mesmo para aplicações do Windows para as quais não existe uma alternativa em Linux (o que é raro) é sempre possível utilizar o Wine.

Outro aspecto que destaco no Ubuntu é o facto de ser lançado de modo regular e previsível. De 6 em 6 meses é lançada uma nova versão. É possível utilizar a versão estável corrente ou então a versão que se encontra em desenvolvimento. Cada versão é suportada durante 18 meses. No entanto a cada 2 anos é lançada uma distribuição LTS (Long-Term-Support), com um tempo de suporte de 3 anos para a versão Desktop e de 5 anos para a versão Server.

Este blog tem vindo a acompanhar o desenvolvimento da versão que agora é lançada oficialmente (8.04 LTS) . Pouca coisa mudou relativamente às ultimas Release Candidate, ou mesmo relativamente à última review mais exaustiva que fiz no blog, na altura a versão Alpha 4. Mas vamos falar de novo um pouco de tudo, fazer um ponto geral das novidades em relação à versão 7.10.

Novidades de Sistema

Gnome 2.22.1
Esta versão do Ubuntu vem com o GNOME 2.22.1, que inclui diversos recursos e uma quantidade significativa de novos programas. O maior destaque vai sem dúvida para o GVFS, um sistema de arquivos virtual (VFS) que oferece uma camada de abstracção que permite a exposição de vários dispositivos de armazenamento por meio de uma única API, facilitando deste modo o acesso transparente a arquivos em rede por meio de diferentes protocolos. O GVFS oferece suporte a SFTP, FTP, DAV, SMB e ObexFTP no Nautilus e noutros programas. Este GVFS foi criado de raíz para resolver diversos problemas que o seu predecessor possuia e oferecer uma solução mais transparente e eficiente. De modo geral, a mudança para o GVFS é totalmente transparente ao utilizador porque actua sob a superfície e usa os elementos da interface já existente. Na migração para o GVFS existiram algumas melhorias na interface do Nautilus. Agora uma única janela exibe todas as operações de transferência de arquivos, em vez de termos uma nova janela para cada transferência.

O PolicyKit é outro avanço no GNOME, esta framework é capaz de garantir o aumento de privilégios a programas e ferramentas de maneira mais segura e flexível que as soluções actuais, com o PolicyKit, é possível isolar acções privilegiadas e torná-las acessíveis a programas por meio do D-Bus. Este método oferece uma gestão minuciosa das operações disponíveis aos utilizadores, reduzindo a exposição do sistema a riscos de segurança decorrentes da gestão de privilégios.
O PolicyKit funciona de maneira transparente e só se apresenta ao utilizador comum quando necessita de autenticação para garantir o acesso a determinadas operações mais delicadas. A grande vantagem é que já não necessitamos do comando gksudo.

O Vinagre, que substitui o xvnc4viewer,também foi incluído nesta versão, um cliente de VNC, que suporta várias conexões simultaneamente.

O Evolution, aplicação de e-mail, suporta agora o uso dos calendários remotos do Google. Os utilizadores podem aceder e manipular calendários do Google directamente da interface do Evolution, no entanto ainda só consegui colocar o meu Evolution a aceder e visualizar o meu calendário do Google, no entanto não ainda não consegui marcar compromissos.

Linux Kernel 2.6.24
O Ubuntu 8.04 inclui a versão do kernel 2.6.24-16.30 que tem como base a 2.6.24.3. Existem várias melhorias e correcções, como o suporte para amd64 ao dynticks, permitindo ao processador usar menos energia e produzir menos calor, o que para os portáteis significa mais tempo de duração das baterias. Surgiu igualmente o Completely Fair Scheduler que fornece melhorias significativas ao nível da performance.

PulseAudio
O Servidor de Som PulseAudio vem pré-instalado, que permite obter um maior controlo sobre o hardware de áudio e igualmente sobre o software. Podemos definir por exemplo qual a placa de som que um determinado software X utiliza e controlar o volume de um outro software Y. Para além disso é possível utilizar placas de som remotas.

Xorg 7.3
O Xorg 7.3 já vem integrado, o que irá permitir uma melhor usabilidade nas configurações, permitindo um arquivo de configuração mínimo. No entanto aqui não há novidades pois já tinha sido lançado no dia 9 de Setembro do ano passado, portanto a sua integração era mais do que aguardada.
No entanto esta versão traz uma nova ferramenta para a Resolução de Ecrã que permite aos utilizadores configurar dinamicamente a resolução, refresh rate, e a rotação de um segundo monitor. Isto é particularmente útil para utilizadores de portáteis que se conectem a um projector ou a um monitor externo.

Mais Software

Firefox 3 Beta 5
O Firefox 3 Beta 5 é o browser que é disponibilizado com esta versão, à semelhança do que vinha a ser habitual nas versões de desenvolvimento. Esta versão do browser da “raposa de fogo” está mais rápido e diminui consideravelmente o consumo de memória RAM relativamente à versão 2.

Brasero
O Ubuntu traz agora o Brasero em substituição ao Serpentine, no entanto continua a manter o Nautilus como a aplicação de gravação. O pedido de inclusão do Brasero já não é novo, já existia em wishlist desde Abril do ano passado. Na verdade o Brasero faz o mesmo que o Nautilus e até mais, no entanto a decisão passou por manter o segundo. Esta decisão criou algum desacordo inicial na comunidade do Ubuntu, mas a explicação acaba por ter lógica. Em primeiro lugar porque quando iniciamos o Brasero este pergunta se o queremos utilizar como a aplicação predefinida para gravar CD/DVD mas os adeptos do Nautilus, que apenas necessitam de arrastar ficheiros para um CD e gravar, continuarão a ter esta opção. Deste modo não serão alterados os hábitos dos utilizadores do Ubuntu actuais e são disponibilizadas mais funcionalidades através do Brasero. No que diz respeito ao Serpentine, apesar de fácil de utilizar, existiam alguns bugs e o desenvolvimento da aplicação era bastante lento. O Nautilus e o Brasero não são exactamente o mesmo, mas o Serpentine e o Brasero funcionam de maneira semelhante, portanto se um é melhor do que o outro faz todo o sentido optar pela sua substituição

Transmission
O cliente de Torrents é agora o Transmission, que não é mais do que a versão GTK do popular BitTorrent.

World Clock Applet
A Applet World Clock é realmente deliciosa, permite seleccionar várias cidades do mundo e verificar a hora relativamente à cidade onde nos encontramos, que podemos graficamente identificar pois possui uma imagem de uma casa do lado direito, neste caso encontro-me em Lisboa, para além disso podemos identificar graficamente em que locais do mundo é dia e em quais já é noite, podemos observar isso através da mancha mais escura no mapa ou então através da cor dos relógios.

Uncomplicated Firewall
como o nome indica é uma aplicação firewall que permite de uma forma fácil gerir uma firewall para utilizadores comuns. Neste momento, ufw tem uma interface via linha de comandos para gerir a firewall.

Totem
O leitor de vídeo Totem permite agora que os utilizadores naveguem no YouTube e outras fontes de vídeo na web e que partilhem os seus vídeos entre si. Integra ainda o Myth TV, permitindo ver os programas de TV no computador.
De notar que o plugin não fica activo, é necessário aceder a Edit > Plugins no menu principal do Totem e seleccionar “YouTube browser”, uma barra lateral surge à direita onde podemos introduzir um termo de procura e seleccionar um vídeo dos resultados

Inkscape
Introduz um suporte nativo ao formato PDF, disponibilizando uma solução open source para editar texto e imagem em documentos PDF. Os utilizadores podem fazer os seus flyers, posters ou outro tipo de documentos, guardar como PDF através do inkscap, e envia-los para impressão sem que seja necessário sair do Ubuntu ou ter de utilizar uma ferramenta proprietária.

Novo e Melhor Suporte

ActiveDirectory integration
A aplicação Likewise Open encontra-se disponível no repositório Universe, e permite a integração do Ubuntu numa rede que utilize Active Directory. Os utilizadores poderão utilizar as suas credenciais de Active Directory para se autenticarem nas máquinas Ubuntu e acederem a serviços disponibilizados por um servidor Ubuntu.

umenu
O WinFOSS e o Windows software open source foram substituídos pelo umenu, que não é mais do que um menu que apresenta as opções existentes quando o Live CD é iniciado, permitindo ao utilizador instalar o Ubuntu no Windows utilizando o Wubi.

Wubi
A opção para usar o Live CD antes de instalar já não é nova, no entanto a esta junta-se a opção que permite aos utilizadores instalar e desinstalar o Ubuntu como se de uma aplicação Windows se tratasse, isto é possível através do Wubi. Deste modo o utilizador terá outra opção para poder experimentar o Ubuntu antes de fazer uma instalação completa, não é requerida uma partição dedicada.
No entanto é importante lembrar que este modo deve servir unicamente para experimentar o sistema operativo, não deve ser usado de forma permanente. A qualquer momento se pode iniciar a instalação do Ubuntu com recursos do disco dedicados, o que é algo muito simples de fazer

Virtualization
O KVM é agora uma opção para a virtualização, a libvirt e virt-manager também foram integrados no Ubuntu, permitindo uma gestão máquinas virtuais de forma muito mais simples. O kernel sofreu igualmente melhorias significativas para optimização dos recursos quando utilizados em virtualização. O Ubuntu JeOS foi aprimorado para opmitizar aplicações virtuais e deixar pronto para serem utilizadas em ambientes VMWare ou KVM em qualquer sistema.

SELinux Support
Para além de suportar o AppArmor, o Ubuntu 8.04 LTS inclui agora suporte para o SELinux, este recurso fornecer um mecanismo de controlo de acesso mais especializado, tornando-se uma ferramenta para aqueles que se preocupam com a segurança dos seus sistemas e a confidencialidade dos dados.

Conclusão

As novidades presentes no Ubuntu não são tão visíveis como eram as que surgiram na versão 7.10, no entanto elas existem e conseguem melhorar a experiência do utilizador de forma considerável. O Ubuntu é neste momento um sistema agradável de utilizar e que permite ao utilizador com menos conhecimentos técnicos usufruir de um sistema estável, através do qual poderá facilmente ouvir música, ver filmes, navegar de forma segura e rápida na web, comunicar através de mensagens instântaneas e/ou de vídeo, ou mesmo jogar alguns jogos (bastante divertidos) que são disponibilizados com o sistema. O que neste momento ainda poderá manter os utilizadores fieis ao Windows são os jogos mais recentes, apesar de já existir uma grande gama de jogos para Linux e ser possível correr muitos de Windows através do Wine ou Cedega, a verdade é que a instalação, na maior parte das vezes, não é tão transparente para o utilizador.

Continuo a verificar que muitos utilizadores continuam a procurar versões pirateadas do Windows, Office, Photoshop, Kaspersky ou Norton, entre outros, para uso “caseiro”, pois consideram as licenças demasiado caras, no entanto apenas utilizam 5% das funcionalidades que estas ferramentas disponibilizam, então porque não usar software livre? Porquê a procurar serials, key generators, patchs, cracks e afins quando existe software livre de excelente qualidade que faz exactamente aquilo que necessitamos que faça? Experimentem não se vão arrepender, podem começar por fazer o download do Ubuntu 8.04 LTS… Se ainda não estiverem com vontade de experimentar, pode ser que este vídeo do YouTube faça mudar de opinião!

Link para um Vídeo do YouTube que apresenta as potencialidades do Ubuntu com o Compiz.

Partilhar esta Entrada

Este artigo centra-se no termo “modelo de caixas” (em inglês “box model”). É verdade que muitas pessoas utilizam este modelo em layouts construidos com base em CSS, no entanto nem todas as pessoas compreendem o seu significado nem a sua tremenda importância.

Um elemento HTML pode ser considerado uma caixa (box), deste modo o box model aplica-se a todos os elementos HTML (e XHTML).

O box model é a especificação que define como o elemento e os seus atributos se relacionam entre si. Podemos dizer que o box model diz aos browsers que uma box tem de largura 100 pixels e de altura 50 pixels, portanto terá de ser apresentada de acordo com estas especificações.

O box model detalha as opções de ajuste de margem (margin), contorno (border), espaçamento interno (padding) e conteúdo (content) para cada elemento.

Como é possível visualizar através da imagem uma box é constituida por partes distintas. A margin é invisível, não possui cor de fundo e não esconde elementos. O border permite visualizar os limites visíveis da box. O padding define o espaço entre o conteúdo e o border. De notar que a única parte visível da box apresentada na imagem seria o border, portanto toda a zona a tracejado não estaria visível.

Quando definimos a largura e a altura de uma box utilizando CSS, estamos a definir a área de conteúdo e não a soma de todos os elementos (content, padding, border e margin). Para calcular o espaço total de uma box é necessário obter a largura e altura do conteúdo e somar o padding, border e margin.

box{
    width: 200px;
    border: 10px solid #ccc;
    padding: 20px;
    margin: 20px;
}

O exemplo anterior define uma box que ocupa um total de 300 pixels em termos horizontais, no entanto apenas 200 pixels são ocupados pelo conteúdo.

Na figura anterior, a área a azul tem uma largura total de 240 pixels (200 pixels do conteúdo mais os 20 pixels de padding de cada lado). O border tem 10 pixels, tanto na direita como na esquerda, o que faz um total de 260 pixels. Como a margin é de 20 pixels em cada lado, perfaz um total de 300 pixels.

Compatibilidade
Toda esta teoria é de facto simples de perceber, faria todo o sentido todos os browsers respeitassem estas regras certo? Na verdade não é bem isso que acontece, nem todos os browsers tratam o box model de forma idêntica. Portanto é necessário conhecer a forma como estes interpretam as boxes e conhecer a forma para ultrapassar os problemas apresentados.

Os browsers mais recentes já não apresentam problemas com as boxes e apresentam-nas de forma correcta, ou seja Opera 6+, Firefox, Internet Explorer 5 para Mac, o Internet Explorer 6 (se o Document Type Definition estiver especificado de forma correcta) e o Internet Explorer 7+.

O problema existe realmente devido ao Internet Explorer 5 que em vez de considerar apenas a largura do conteúdo, utiliza a propriedade largura como a soma da largura do conteúdo, padding e border. Ou seja no exemplo anterior o browser iria considerar que a largura total da box seria de 240 pixels, pois identificava os atributos padding e border como fazendo parte dos 200 pixels, ou seja retira espaço ao conteúdo em vez de somar.
Uma das formas de evitar que isto aconteça passa por procurar evitar adicionar padding a boxes que tenham uma largura fixa, procurando adicionar margins ou paddings aos elementos pai ou filho.

No próximo artigo irei utilizar este box model para explicar os Modelos de Posicionamento em CSS. Fiquem atentos, ou se preferirem subscrevam os artigos do blog via RSS para estarem actualizados.

Partilhar esta Entrada

A elaboração de um site como qualquer aplicação necessita de passar por diferentes fases antes do seu lançamento: Requisitos, Elaboração, Construção e Lançamento. Obviamente que poderão existir outras sub-fases, como Análise Funcional, Análise Técnica, Desenho Técnico, mas aí entraríamos por uma questão de metodologias, que não é objectivo do presente artigo.

Em traços gerais a fase de Requisitos concentra-se na identificação, especificação e descrição dos requisitos do site, ou seja as necessidades que o sistema deve cumprir. Na fase de Elaboração são definidos os diferentes módulos e como o Site se deverá comportar. São também definidos os guias para o desenho, código e convenções dos nomes assim como o estilo e recursos a utilizar na construção do site. Na fase de Construção situa-se toda a fase de desenvolvimento, construção do design, programação do sistema, montagem do conteúdo e testes. Finalmente o Lançamento (Deploy ou simplesmente Entrada em Produção) é a fase em que o Site é disponibilizado ao utilizador final, por norma engloba formação e divulgação.

Este artigo procura focar-se na elaboração do documento que define os guias para o desenho, código e estilo que toda a equipa de desenvolvimento deverá seguir. Portando-se assim como um documento de orientação.

Poderão fazer o download do documento em formato PDF.

1. Standards do Código

1.1. Validação

São definidas as especificações segundo as quais o site deverá ser desenhado por exemplo XHMTML 1.0 Transitional e CSS2.1 disponibilizas pelo W3C (World Wide Web Consortium). Todas as páginas necessitam de ser validadas segundo estas especificações.

• Validação HTML
• Validação CSS

1.2. Declaração DOCTYPE

Para estar de acordo com o ponto 1.1. é necessário que todas as páginas do site sejam iniciadas com a declaração DOCTYPE.

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

1.3. Acessibilidade

É incompreensível que nos dias de hoje ainda existam webdesigners que não têm a mínima preocupação com a acessibilidade dos sites que produzem. Lembro que existem leitores de ecrãs para deficientes visuais, teclados virtuais para portadores de deficiência motora ou com dificuldades de coordenação motora, e sintetizadores de voz para pessoas com problemas de fala. Assim é necessário respeitar as recomendações do W3C, que visam permitir que todos possam ter acesso à informação nos websites, independentemente de terem alguma deficiência ou não. Assim recomenda-se respeitar as regras de acessibilidade Web disponíveis no W3C, costumo utilizar o site Tawdis para realizar uma análise aos sites que produzo, deste modo é possível avaliar o nível de acessibilidade: A, AA ou AAA, o primeiro garante os requisitos mínimos de acessibilidade e o último garante um nível de acessibilidade máximo.

1.4. Browsers

É muito complexo produzir um layout que seja visualizado da mesma forma em todos os Browser e/ou versões destes. Assim costumo fazer uma lista de Browsers e o nível de suporte mínimo que quero garantir:

• Não Suportado - Browsers com muitos bugs e que já não são suportados.
• Parcialmente Suportado - Browsers antigos, apesar de não suportar oficialmente o conteúdo presente deverá ser visualizado de forma correcta
• Suportado - Browsers antigos mas ainda bastante populares. Todo o conteúdo e funcionalidades necessitam de funcionar com degradação minima.
• Browsers Alvo - Browser actuais e muito populares. Todo o contéudo e funcionalidades necessitam de funcionar como pretendido.

Exemplo:

• Browsers Alvo: IE6+, Firefox 2.x, Safari 3.x, Opera 9.x
• Suportado: IE5.5, Opera 8.x, Firefox 1.x
• Parcialmente Suportado: IE5.0, IE4.0, IE5.x/Mac
• Não Suportado: IE4.0/Mac

1.5. Character Set

Por norma utilizo o Unicode UTF-8 character set.

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

Todos os caracteres especiais devem ser especificados através do correcto nome da entidade ou do equivalente Unicode de modo a que a página possa ser processada correctamente através de browsers.

1.6 Título, Palavras-Chave e Descrições

Para permitir uma navegação mais intuitiva e acima de tudo melhorar o ranking nos motores de busca, todas as páginas necessitam de contar com um título, descrição e palavras-chave. De preferência estes elementos devem ser criados dinamicamente, ou seja através de um Gestor de Conteúdo.

Lembrar que o título deve ser simples, descritivo e distinto. Definir um template para o título:

<title>[Site] - [Secção]:[Página]</title>

A descrição da página deve resumir o conteúdo e o propósito da página em poucas palavras.

<meta name="Description" content="Listagem das diferentes distribuições Linux." />

As palavras-chave devem ser utilizadas para adicionar sinónimos e significado adicional a uma página, não devem ser utilizadas para adicionar palavras que não se encontram associadas ao conteúdo apresentado.

<meta name="keywords" content="linux, open source, sistema operativo" />

1.7. Texto Alternativo para as Imagens

O texto alternativo é OBRIGATÓRIO para cada elemento imagem de um site. Este texto deve fornecer descrição adequada do conteúdo da imagem. Como estamos a falar de conteúdo este deve ser igualmente criado, sempre que possível, pelo gestor de conteúdo.

<img src="/img/xxxx.gif" mce_src="/img/xxxx.gif" alt="Logotipo da Distruição Debian" width="xx" height="xx" />

1.8. Links

O texto dos links deve ser único e deve descrever o destino do link. Ou seja evitar links como “clique aqui” ou “Mais”.

<a href="maisdistribuicoes.php" mce_href="maisdistribuicoes.php">Ver Mais Distribuições Linux</a>

Para além disso Links que abram numa nova janela devem ser evitados, no entanto se existir uma razões a nível de usabilidade para isso, o link deve informar o utilizador.

<a href="ajuda.php" mce_href="ajuda.php">Ajuda (abre numa nova janela)</a>

Links para documentos disponíveis para download - como PDFs - devem conter o tamanho do ficheiro, formato e o facto de que vai ser feito um download.

<a href="listagem.pdf" mce_href="listagem.pdf">Download da Listagem das Distribuições Linux no formato PDF (32KB)</a>

Também se aconselha a fornecer informação adicional, como tool-tip, através do atributo title.

<a href="noticias.php" mce_href="noticias.php" title="Arquivo de Notícias">Ver mais Notícias</a>

1.9. HTML com Relevância

Utilizar código HTML relevante e não apenas de apresentação. Os motores de pesquisa adoram estas tags pois assim conseguem avaliar a informação mais relevante num site, por exemplo:

• h1, h2, hx
• ul, ol e dl
• strong e em
• blockquote e cite
• fieldset, legend e label

1.10. Abreviaturas e Acrónimos

Abreviaturas e Acrónimos devem ser marcados e definidos na primeira vez que surgem em cada página.

<abbr title="UK">United Kingdom</abr>

<acronym title="NATO">North Atlantic Treaty Organisation</ acronym >

1.11. Tabelas

As tabelas não devem ser utilizadas em momento algum para o layout de uma página, são reservadas unicamente para a apresentação de dados. Procurar utilizar elementos e atributos com significado: <th>, <td>, <thead>, <tbody> e <tfoot> assim como summary, id e headers.

2 Estilo

Nesta secção devem ser colocados os detalhes utilizados no site.

2.1. Fontes
2.2. Cores
2.3. Imagens Inline
2.4. Estilo dos Cabeçalhos
2.5. Estilo dos Links
2.6. Classe de Erros
2.7. Classe de Formulários
2.8. Classe de Caixas Informativas

3 Recursos

Finalmente devem ser disponibilizados recursos genéricos como a discrição dos ficheiros HTML e CSS, Templates gráficos (Gimp, Photoshop) e outros recursos do código.

3.1. Templates Gráficos

• Página Inicial
• Página de Login
• Página de Listagens
• Página de Detalhe

3.2. Templates HTML

Templates que devem ser utilizados para construir qualquer página do site.

• Página Inicial
• Página Login
• Página de Listagens
• Página de Detalhe

3.3. Ficheiros CSS

• Layout - O aspecto da estrutura da página. Este ficheiro é o que menos modificado, apenas é alterado que a estrutura da página for alterada.
• Geral - Cores, Fontes, tudo o que não seja estrutural.
• Formulários - Estilos dos formulários. Normalmente apenas coloco estes estilos num ficheiro separado se existirem muitos formulários e de diferentes tipos.
• Print - Estilo para Impressão.

3.4. Links Úteis

Normalmente são colocados aqui alguns links úteis, por exemplo para o Prototype.

Ficheiro de Exemplo

Download do ficheiro com as especificações para desenvolvimento Web no formato PDF (19KB)

Partilhar esta Entrada

Neste exemplo vou utilizar 3 acções bastante comuns: O Guardar, Mudar Password e Cancelar. Seleccionei estas três acções pois irão permitir definir igualmente associar cores a cada acção. Facilmente atribuimos o verde à acção de Guardar, enquanto atribuimos o vermelho à acção de Cancelar, no entanto não conseguimos definir uma cor standard para acção Mudar Password, portanto neste caso vou optar pelo amarelo, mas também poderia optar pela cor azul que também não me parecia descabido. Uma forma complementar de atribuir mais significado aos botões é através de imagens, aqui vou utilizar icons a partir da galeria do FAMFAMFAM, de preferência uma verde, amarela e vermelha.
Ou seja procuro algo semelhante a estes botões.

O HTML

<div class="buttons">
    <button type="submit" class="guardar">
        <img src="apply.png" alt=""/>
        Guardar
   </button>

  <a href="#">
        <img src="edit.png" alt=""/>
        Alterar Password
    </a>

    <a href="#" class="cancelar">
        <img src="cancel.png" alt=""/>
        Cancelar
    </a>
</div>

O objectivo é criar botões agradáveis a nível visual, evitando deste modo que se recorra abusivamente a imagens criadas no Photoshop. Quando olhamos para o código html apresentado reparamos que dois dos botões na verdade são links, isto é útil porque permite manter uma consistência nas acções disponíveis ao utilizador, sejam estas construídas através de botões ou de simples links.

O CSS deste exemplo não é complexo, mas para funcionar correctamente em determinados browsers foi necessário ajustar o atributo padding.

O CSS

.buttons a, .buttons button{
display:block;
float:left;
margin:0 7px 0 0;
background-color:#f5f5f5;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;

font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:100%;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#B5AD64;
cursor:pointer;
padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
*:first-child+html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
}

button:hover, .buttons a:hover{
background-color:#F5EDA4;
border:1px solid #D5CD84;
}
.buttons a:active{
background-color:#6299c5;
border:1px solid #6299c5;
color:#fff;
}

/* Guardar */

button.guardar, .buttons a.guardar{
color:#529214;
}
.buttons a.guardar:hover, button.guardar:hover{
background-color:#E6EFC2;
border:1px solid #C6D880;
color:#529214;
}
.buttons a.guardar:active{
background-color:#529214;
border:1px solid #529214;
color:#fff;
}

/* Cancelar */

.buttons a.cancelar, button.cancelar{
color:#d12f19;
}
.buttons a.cancelar:hover, button.cancelar:hover{
background:#fbe3e4;
border:1px solid #fbc2c4;
color:#d12f19;
}
.buttons a.cancelar:active{
background-color:#d12f19;
border:1px solid #d12f19;
color:#fff;
}

No final ficamos com três acções bastante identificativas daquilo que é suposto as mesmas despoletarem.

Resultado Final do Exemplo Apresentado.

Fonte: Rediscovering the Button Element

Partilhar esta Entrada