Pixel eXperience

Coleção de Wallpapers para 2010!

Fernando Matos — Fri, 01 Jan 2010 09:12:23 +0000

Feliz ano novo!

Um brinde ao ano novo pixels!

Para todos vocês um ano de muitas alegrias, grandes conquistas e realização de sonhos!

Devemos começar o ano bem inspirados! Para isso vamos precisar de uma boa fonte de inspiração, nada melhor do que uma dose no maior estilo 2010 para que isso aconteça.

Abaixo você confere 36 lindos wallpapers feitos por designers ao redor do mundo, uma dica é além de utilizá-los em seu desktop, trocá-los constantemente, isso fará com que sua criatividade esteja sempre em alta!

A Web têm padrões, você precisa segui-los!

Fernando Matos — Tue, 22 Dec 2009 08:35:48 +0000

Construir páginas para Web seguindo padrões de acessibilidade pode não ser uma tarefa tão simples quanto a de construir uma página sem essa preocupação. Primeiramente, a maneira como os programas, – cujo objetivo é facilitar a criação de páginas – tratam os códigos, não é muito adequada para o conceitos de códigos válidos.

Pela grande flexibilidade dos navegadores na interpretação de códigos, certas vezes um código incorreto acaba sendo renderizado corretamente em um determinado navegador. Para os desenvolvedores de primeira viagem isso basta, pois acreditam que se estão vendo corretamente, tudo está certo. É aí que entram os padrões da Web, uma página desenvolvida seguindo os Padrões da Web tem a mesma visualização sendo exibida por qualquer tecnologia ou software, já uma página que não segue tais padrões possivelmente terá diferentes apresentações em diferentes meios, isso em certos casos até impede a navegação.

Este artigo tem por objetivo de explicar o que são, suas vantagens, quem está por trás e como passar a utilizar os famosos Web Standards (padrões da web). Uma série de links úteis serão apresentados durante este artigo, vale muito a pena mantê-los nos favoritos do seu navegador, pois servirão de material de consulta para todas as vezes que estiverem desenvolvendo projetos para a internet.

Métodos para construção de páginas:

Existem dois métodos para a construção de páginas para a Web, um deles – o mais utilizado – é com certeza o método gráfico. O método gráfico logicamente é mais prático que o método código, – chamaremos dessa maneira – o primeiro é mais utilizado por um motivo um tanto peculiar em todas as coisas de nossas vidas, é mais fácil aprender por imagem e símbolos do que por palavras.

Mas apenas clicar em botões deixando para que o programa faça toda a inserção do código pode ser bom para o aprendizado, mas não é uma boa maneira de se construir um site. Quando o usuário opta por utilizar o método gráfico, o código de seu web site será escrito e organizado da maneira que o programa em que estiver trabalhando achar conveniente, porém devido a imensa gama de possibilidades que às vezes pode sair de uma única linha de código, o editor utilizado não terá como saber realmente o que estamos buscando com aquele código e pode tanto incluir informações desnecessárias a uma situação como excluir informações importantes.

A melhor maneira de se trabalhar na construção de um web site é utilizar os dois métodos simultaneamente, utilizar o método gráfico para acelerar o processo de criação, – para isso os editores foram feitos – mas sem deixar de lado o código criado. É preciso ficar de olho no que o programa faz, muitas vezes serão necessárias intervenções no código, sejam elas com objetivo de estruturar melhor, adicionar ou até mesmo remover partes dele.

O código e sua importância:

Exemplo de parte do código fonte de uma página da web.

Na internet tudo que é mostrado ao usuário provem de códigos, estes, quando agrupados, formam sintaxes e estas exibem textos, cores, imagens, animações, vídeos e tudo mais que podemos ver na tela do navegador, além de todo o trabalho dinâmico que faz em linguagens como JavaScript, PHP, ASP etc.

Antigamente um web site não era algo tão elaborado quanto hoje, na verdade, em palavras diretas, era algo extremamente simples para os dias atuais, mas era o que antes, – com a tecnologia da época –era possível de se fazer.

E qual é o grande lance?

O grande lance é o seguinte, antigamente com a tecnologia pouco desenvolvida na área de desenvolvimento web, tudo era rudimentar, as sintaxes dos códigos, por exemplo, ainda que maiores no tamanho, – comparada as de hoje – nem chegariam perto da quantidade de códigos que uma página tem atualmente.

A partir do momento em que as coisas começaram a tomar volume, ao mesmo tempo em que a informação também começava cada vez mais a se valer da internet para se propagar, foi necessário além do desenvolvimento de novos códigos e linguagens de programação, alguma coisa que organizasse e padronizasse todos aqueles códigos para que a Web pudesse se desenvolver melhor e de maneira mais uniforme no que diz respeito ao trabalho com os códigos.

Foi aí que em 1994 Tim Berners-Lee fundou o World Wide Web Consortium, o W3C, o qual por meio do desenvolvimento de protocolos comuns fosse possível levar a Web ao seu potencial máximo, assegurando-lhe sua interoperabilidade e acessibilidade. Desde então, o trabalho que vem sendo realizado pelo W3C ao longo dos anos vem possibilitando melhoras significativas tanto para desenvolvedores quanto para usuários.

As vantagens dos padrões na Web:

Algumas das vantagens do desenvolvimento de web sites seguindo os Web Standards são:

Sites quando desenvolvidos tendo a preocupação com padrões web podem ser acessados a partir de qualquer tecnologia independentemente do hardware ou software utilizado, o que possibilita uma maior acessibilidade, ou seja, seguindo os padrões seu web site pode ser acessado tanto de um computador como de um celular por exemplo.
Sites escritos de maneira semântica tendem a fornecer informações mais relevantes a mecanismos de busca do que sites não-semânticos. Quando um robô de busca acessa um site semântico ele aproveita da melhor maneira possível a organização proporcionada pelos padrões da web. Uma boa organização dessas informações previamente facilitará lá na frente à obtenção de resultados mais precisos sobre assuntos pesquisados.
Softwares podem ainda, de maneira muito mais rápida, acessar as informações contidas num documento que segue os padrões do W3C, pois neste estará presente apenas o código necessário às situações. Suprimir o código inútil fará com que o tráfego de dados se reduza além de um carregamento bem mais rápido das informações ao usuário e o servidor será poupado.

“O ESPN consumia 2 Terabytes por dia, que dava um total de 730 Terabytes por ano! Eles conseguiram economizar cada um desses bytes redesenhando o site usando padrões Web. O site do ESPN é um portal de informação que recebe muitas visitas por dia, logo a principal vantagem que eles obtiveram quando adotaram os padrões foi a diminuição de código desnecessário, fazendo com que os arquivos ficassem menores e por sua vez possibilitando uma enorme economia de banda já que os usuários baixavam arquivos muito menores.”

Portando, é um dever de todo desenvolvedor Web respeitar e seguir os padrões de acessibilidade do W3C, pois de outro modo poderá impor barreiras tecnológicas a diversas pessoas, desestimulando e até mesmo impedindo o acesso a suas páginas.

Diferença entre HTML e xHTML:

HTML - (x)HTML

Uma dúvida que muitos podem ainda não ter conseguido sanar é a diferença entre HTML e xHTML!

O HTML é uma linguagem de marcação amplamente utilizada na Web, essa denominação significa que um conjunto de códigos é estabelecido cuja função deles é adicionar características particulares a textos ou dados. O que ocorre é que desde sua criação o HTML ele vem sendo uma linguagem bem flexível, isso ajuda aqueles que não têm prática com a criação de páginas, mas por outro lado cria um mau hábito difícil de ser perdido. A flexibilidade citada acima, se relaciona também a capacidade dos navegadores de interpretar códigos HTML que estão bem longe de serem considerados válidos.

Já o xHTML não se trata de uma outra linguagem, pois é apenas uma reformulação da linguagem HTML. O xHTML tenta deixar menos flexível o HTML, utilizando regras e padrões faz com que o HTML seja mais simples de ser processado e entendido.

Para esclarecer melhor o que foi dito acima, aqui vão dois exemplos de duas diferenças entre HTML e xHTML, lembrando que existem várias outras.

HTML

Isso é um parágrafo.

xHTML

Isso é um parágrafo.

O que podemos ver aqui é que no HTML não há a preocupação com o código sendo escrito em caixa alta ou baixa. No HTML seria perfeitamente aceitável que o código de tabela fosse escrito

Outro exemplo é a ordem dos atributos, vamos novamente a dois exemplos:

HTML

Isso é um parágrafo.

xHTML

Isso é um parágrafo.

Aqui, o que podemos observar aqui é que no HTML tanto faz a ordem do código, estando fechadas as tags, são consideradas válidas. Já no xHTML precisamos ficar atentos para fechar nossas tags na ordem em que forem abertas.

Iniciando com os Web Standards:

Document Type Definition

Para começarmos a utilizar os padrões da Web em nossas páginas devemos ficar atentos para uma linha de código em especial. Essa linha chama-se “Document Type Definition” (Doctype), cuja tradução é Definição do Tipo de Documento, ela dirá para ferramenta que está acessando nosso documento qual é a maneira certa de processá-lo.

Na linha Doctype informamos a linguagem básica que utilizamos em nossa página e a sua versão.

Por não existir apenas um Doctype, quando este não é definido no documento os navegadores ficam perdidos ao tentar reproduzi-los, muitas vezes vão estabelecer erroneamente algum Doctype o que acarretará em maior lentidão no carregamento e possíveis falhas na apresentação do mesmo.

Vou citar apenas os tipos de declaração Doctype do xHTML, pois como vimos, em relação ao HTML é bem melhor a utilização do xHTML para a estruturação básica da página. Vale lembrar que a declaração Document Type Definiton deverá ser a primeira linha do documento, antes de toda e qualquer linha inclusive a tag .

Esta é a mais rígida das declarações. Os documentos xHTML no modo Strict não admitem qualquer item de formatação dentro dos elementos e nem elementos em desuso “deprecated” segundo as recomendações do W3C. São indicados para uso com folhas de estilo em cascata, com marcação totalmente independente da apresentação

Esta declaração permite uma maior flexibilidade e é indicada para documentos que ainda utilizem elementos em desuso (“deprecated”), regras de apresentação embutidas em tags e também para documentos destinados a exibição em browsers sem suporte para CSS. Não admite qualquer tipo de marcação para frames.

Esta declaração permite tudo da declaração transitional e mais os elementos específicos para frames.

Ainda, dentre as principais, há uma quarta opção de Doctype para xHTML, é a versão 1.1 Strict que é ainda mais rígida que a 1.0 Strict. Para declará-la em seu documento faça da seguinte maneira.


html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Uma curiosidade sobre as versões Strict do xHTML é que ela não permite o atributo target, ou seja, utilizando essas versões do xHTML não se pode definir por exemplo que uma URL abra em uma nova janela, essa escolha cabe ao usuário e portanto não devemos interferir. Chato? Eu também achava!

Recomendo a todos trabalharem com xHTML 1.0 Strict e caso haja necessidade, – alguns sistemas dinâmicos podem precisar – utilizar xHTML 1.0 Transitional.

Desenvolver códigos seguindo normas:

Tendo sido feita a escolha do Doctype é preciso que o código seja desenvolvido para tal, não adianta simplesmente escolher a declaração mais rígida, sendo que na verdade ele não está.

Para escrever seus códigos de acordo com os padrões estabelecidos é preciso, – enquanto não se tem a prática necessária – consultas constantes a materiais desenvolvidos pelo própria W3C e por usuários. Eles têm o objetivo de mostrar através de guias e validadores qual é a maneira certa de se trabalhar com uma linguagem.

O site http://www.w3.org fornece muitos materiais bem como os guias de referência oficiais das linguagens. Os materiais encontrado lá estarão em inglês, diante disso para aqueles que preferem um material em português, o site do escritório do W3C no Brasil fornece guias de referência CSS e xHTML bem como um link para os documentos oficiais da W3C que tiveram traduções para o português feitas por voluntários.

Validadador de Códigos

O W3C além dos materiais citados ainda disponibiliza, gratuitamente, validadores para documentosxHTML e CSS . A partir de uma URL ou upload de um arquivo o sistema irá analisar e fornecer um relatório completo de erros por ventura existentes. São ótimas ferramentas e essenciais para quaisquer desenvolvedores.

Validador (x)HTML: http://validator.w3.org/
Validador CSS: http://jigsaw.w3.org/css-validator/

Ainda há outros validadores disponíveis, a página onde você poderá encontrar todos os validadores é:
http://www.w3.org/QA/Tools/

Checklists

Outro material muito útil para o desenvolvimento de páginas pode ser encontrado no Blog Web Standards, lá é possível encontrar, além de todo um conteúdo voltado a padrões da Web, duas checklists uma para (x)HTML e outra para CSS. Estas checklists são como aquelas listas que fazemos para viagens quando queremos ter a certeza de que nada será deixado para trás, só que neste caso são para não deixarmos nada para trás quando desenvolvermos nossa página.

Uma parte extremamente útil destas checklist é a ordem dos atributos, como sabemos códigos HTML e CSS trabalham com atributos, o que muitas vezes pode passar despercebido a ordem correta que esses atributos deverão ser escritos:

Checklist para (x)HTML
Checklist para CSS

Links úteis e referências:

Documentos Oficiais W3C Traduzidos para o Português
Até a presente data há 60 documentos já traduzidos.
Manual Oficial W3C do xHTML 1.0 (Traduzido)
Manual completo com todos as especificações sobre xHTML.
Manual Oficial W3C do CSS 2.1 (Inglês)
Manual completo com todos as especificações sobre xHTML.
Tutorial xHTML
Tutorial completo sobre xHTML incluindo as diferenças deste para o HTML.
Uma das Vantagens dos Padrões
Artigo falando do uso de Web Standards para diminuição de tráfego.
Quais são as Vantagens de se Adotar os Padrões Web
Artigo falando sobre vantagens no uso de padrões.
Não Esqueça o Doctype do seu Documento
Artigo referente ao uso do Doctype nos documentos.
Não Obrigue o Usuário a Abrir Link em uma Nova Janela
Artigo explicando o porquê de não utilizar o atributo traget.

We are back!

Fernando Matos — Thu, 17 Dec 2009 00:36:42 +0000

Olá pixels!

Estou muito feliz em poder dar vida novamente ao Pixel XP! Sabem aquela história do Nescau, igual, mas diferente? Agora o PXP volta à tona como Pixel Experience, e tal como Nescau, bem igual, mas muito diferente!

Para aqueles que não nos conhecem, aqui vai um breve resumo:

Um fórum é criado, temas sobre design e desenvolvimento são abordados, este passa atrair pessoas com gostos parecidos, amizades são formadas, pessoas aprendem, pessoas ensinam, um acervo de tutoriais bem grande vai sendo formando, o fórum é elogiado pela organização, as estatísticas crescem, novos usuários aparecem, bem como novos elementos visando melhor usabilidade são desenvolvidos, um podcast surge e mostra que o design também pode ser engraçado, tudo segue bem até que BANG!

Depois de quase dois anos online o Pixel XP é obrigado a fechar as portas, pois o fórum havia se desenvolvido e mantido em uma plataforma paga, e por não ter licença de uso tinha duas opções: juntar o montante necessário e comprar a licença oficial, ou sair do ar.

Muitos agora se perguntam: Por que não compraram a licença? A licença oficial da plataforma que usávamos não tinha um preço muito acessível, de tal maneira que era inviável a compra apenas pelos integrantes da equipe. Antes de dar por encerrada as atividades do antigo Pixel XP foi tentado, – ainda que sem sucesso – medidas para arrecadação de parte do valor da licença.

Nós, equipe, e alguns usuários sentimos muita falta do acesso diário ao Pixel, de ler algum novo material postado, de trazer notícias, de postar algum trabalho para receber avaliações, de perguntar e responder, de rir com os amigos na shoutbox e tudo mais de bacana que fazíamos diariamente no antigo fórum.

Diante dessa situação, não pude simplesmente deixar toda a história do Pixel numa pasta esquecida no HD. Bloqueei o acesso dos usuários, mas mantive os backups e continuei pagando o servidor de hospedagem e renovação de domínio, pois mesmo sem uma perspectiva de volta, a esperança de um novo Pixel ainda se mantinha firme e forte!

E depois desse grande recesso, cá estamos nós de volta! Do material antigo não será aproveitado muita coisa, – exceto parte do conteúdo – as novas idéias assim que tomarem forma e tiverem condições de serem colocadas no ar, – mesmo que a princípio não trabalhem de maneira completa – já passarão a integrar o conjunto de áreas que chamaremos de Pixel Experience.

Bom chega de enrolação, vamos às novidades iniciais: a primeira delas é essa que você já pode ver, o blog oficial. A princípio três serão os autores dos artigos, são eles: Eu Hoopkins, o Likwd, antigamente responsável pela área de tutoriais do fórum e por último, mas não menos importante, Jheyy, antigo responsável pela moderação de todas as sessões do fórum.

O blog não ficará preso a quantidades, artigos serão criados pensando nas pessoas e na utilidade que o material escrito terá para elas. Relacionado ao design, por exemplo, os leitores do blog poderão contar com materiais explicativos, inspirações, guias passo a passo, dicas, novidades da área, recursos de uso livre e etc; relacionado ao desenvolvimento na WEB, os artigos vão tratar de maneira bem objetiva, as diversas linguagens de programação e seus usos, artigos estes, servirão tanto para os novatos como aos mais experientes.

O que será trabalhado simultaneamente com blog neste retorno é o fórum, este por sua vez não será, – pelo menos por enquanto – mantido em um sistema pago, utilizaremos outros meios para disponibilizar um novo fórum à comunidade XP. Será todo reformulado, sessões úteis serão mantidas e inúteis retiradas, essa regra também valerá para os tópicos.

Um twitter com o nome @pixelexperience foi criado. Por enquanto seu uso se resume a publicações que terão o intuito de noticiar em primeira mão, as modificações, atualizações, novas publicações e deixar os seguidores por dentro de qual parte do projeto está sendo trabalhada momento. Além disso, você pode utilizar nosso Twitter para dar seu feedback sobre as coisas já produzidas no Pixel Experience bem como aquelas que estão em produção. O twitter @pixelexperience passará a ter um papel mais importante, assim que as áreas em produções forem sendo concluídas, pois passará a ser integrado com todas as áreas de nosso site.

Para concluir, gostaria de informar à todos que idéia inicial era terminar tudo que havia sido planejado, todas as novas áreas e etc, antes de colocar o Pixel XP novamente no ar. Mas, como a conclusão de tudo ainda levaria algum tempo, não vimos o porquê de não compartilhar com vocês o que fosse ficando pronto. Por isso, não leve a mal caso veja uma parede sem pintar ou alguns tijolos ainda fora do lugar enquanto navegar por aqui, saiba que estamos trabalhando para que tudo se conclua o mais breve possível.

Ainda tenho uma série de coisas para fazer hoje aqui, por enquanto sigam-nos no Twitter, novas informações serão divulgadas a qualquer momento!

Edição em 23/12/2009: Atenção nosso fórum já foi colocado no ar, acesse http://www.pixelxp.net/comunidade ou clique lá no símbolo azul do topo ao lado do símbolo de RSS.