Está no ar a versão 2008 do site 24 ways, e já temos 2 dicas. Para quem não sabe o que significa o site 24 ways, ele é um site desenvolvido pelos maiores profissionais do desenvolvimento web mundial, composto de 24 dicas para impressionar seus amigos.

O site já existe desde 2005, e os tutoriais se iniciam a partir do dia 1 de dezembro de e vão até o dia 24. Só uma dica, essa versão não está funcionando corretamente no Firefox 2, Opera, não testei no Firefox 3 , mas no Google Chrome, Safari e Firefox 3 (obrigado Eduardo Sarsur por me avisar via Twitter) funciona legal. Pode ser que eles irão corrigir isso.

Versões anteriores

• 24 ways: Versão 2005
• 24 ways: Versão 2006
• 24 ways: Versão 2007

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Construíndo Web Sites de Alta Performance
• Design view do Dreamweaver não é browser
• O melhor dos WebStandards
• Problemas com Ajax e Quirks mode
• Tutocle – Tutoriais para desenvolvedores web

Tags são rótulos ou legendas onde as pessoas podem categorizar conteúdo de uma forma muito simples, utilizando qualquer palavra que faça sentido. O uso de Tags na web foi difundido por sites como Technorati, del.icio.us e Flickr.

Uma nuvem de tags em geral reúne um conjunto de tags utilizadas em um determinado website disposto em ordem alfabética, e o volume de conteúdos que o site apresenta em cada tag é mostrado proporcionalmente pelo tamanho da fonte. Dessa forma, em uma mesma interface é possível localizar uma determinada tag tanto pela ordem alfabética como pela frequência da incidência de conteúdos marcados com a mesma tag no referido site. As tags disponibilizadas na nuvem são links que levam a coleções de itens relacionados às palavras da tag.

Fonte: Wikipédia.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• 24 ways: Versão 2008
• Design view do Dreamweaver não é browser
• O melhor dos WebStandards
• Os melhores sites de 2007 baseados em CSS
• Como inserir CSS em uma página via @import

Imagine a seguinte situação, uma empresa, em sua página de contato só coloca o mailto: em um link para contato, o usuário, ao clicar, pensa que será levado para um formulário qualquer, mas aí, após alguns segundos, aparece aquela janelinha de configuração de conta no cliente de e-mail, eu particularmente detesto isso, em algumas pessoas pode até causar fastidio!.

Utilize, sempre que possível, um formulário de contato, simples de preferência. Não quer utilizar um formulário? Deixe seu endereço, telefone, alguma forma de contato por sinais de fumaça, mas nunca cause esse descaso com o usuário.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• 24 ways: Versão 2008
• Design view do Dreamweaver não é browser
• O que são Tag Clouds?
• Curiosidade: Qual o tamanho máximo das URL’s?
• O melhor dos WebStandards

• Internet Explorer: 2.083 caracteres
• Firefox: 65.536 caracteres
• Safari: 80.000 caracteres
• Opera: 190.000 caracteres

Mas não são só os Browsers que utilizam as URL’s, os servidores web também as administram e cada um interpreta a sua maneira:

• Apache: 4.000 caracteres
• Microsoft Internet Information Server (IIS): 16.384 caracteres
• Perl HTTP::Daemon: 8.000 caracteres

Então, fica a dica, não utilizar URL’s com mais de 2.000 caracteres para que funcione em todos os browsers.

Referências

• Anieto2K – ¿Cual es el tamaño máximo de las URL’s?

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Internet Explorer 8 e o modo Super Standard
• Internet Explorer 10: Suporte total a HTML5 e CSS3
• Instalando Apache, PHP, MySQL e Phpmyadmin, configurando a pasta de publicação e ativando o mod_rewrite no Ubuntu
• Microsoft acerta no desenvolvimento do Internet Explorer 9
• Instalar Apache+PHP+MySQL no Windows 7/Vista/XP

Após o lançamento do Adobe AIR, todo mundo está correndo atrás para lançar seus aplicativos para desktop, e dessa vez foi a eBay que lançou sua versão. Com essa aplicação você pode buscar por produtos, administrar pagamentos e uma série de outras coisas. O tamanho da aplicação é de 7.0 MB, fora a instalação do Adobe AIR, que pode ser baixado a partir do site do ebay ou da própria Adobe.

Referências

• IncubaWeb – eBay Desktop 1.0 funcionando con Adobe Air 1.0

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• 14 Aplicações AIR para desenvolvedores web
• jQuery API Browser – AIR Reference

Para fazer o uso de imagens desse tipo, você deve utilizar uma chave, que você obterá ao cadastrar seu site no Google Maps API. Uma vez com essa chave, podemos obter a imagem estática.

<img src="http://maps.google.com/staticmap?center=47.238336,8.827171&zoom=12&markers=40.416741,-3.70325,red&size=512×512&key=MAPS_API_KEY“>

Analisando a URL, veremos os parâmetros que intervêem e as quais podemos personalizar nosso mapa:

• center: //Centro da imagen (ej: 0.0000,0.0000)
• zoom: //Zoom que se aplica a imagen, de 0 a 19 (0 para longe, 19 para perto)
• size: //Tamanho da imagem em pixels (máximo 512×512)
• maptype: //Tipo de mapa (roadmap => Mapa para páginas web, mobile => Mapa para baixas resoluções)
• markers: //Marcadores dentro do mapa. (ex: markers=40.702147,-74.015794,blues|40.711614,-74.012318,green)

Referências

• Anieto2K – Google Maps sin Javascript

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Ler Feeds com o Google JSAPI
• Aprenda mais sobre o console do Firebug
• Introdução ao YQL – Yahoo Query Language
• Responsive Slideshows
• Carregar botão do Google+ via Ajax

Resumindo:

• Utilizar o código correto e válido, fazendo o uso do doctype e do content-type correto.
• Seguir as Mobile Web Best Practices 1.0.
• Deixar que os Search Engines acedam ao conteúdo.

Referências

• Web es móvil – Como añadir un sitio web móvil a Google.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Skyfire – Browser alternativo para Windows Mobile
• Acessibilidade e boas práticas no desenvolvimento para dispositivos móveis
• Emuladores de browsers móveis da Yospace
• tPhone
• Guia de desenvolvimento web para dispositivos móveis

Imagine a situação acima, ano de 2100, os browsers em versões altamente avançadas e nós desenvolvedores ainda testando os sites no Internet Explorer 7. Não duvido disso.

Via: Beast-Blog.com.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• 24 ways: Versão 2008
• Design view do Dreamweaver não é browser
• Construíndo Web Sites de Alta Performance
• Por que resolvi largar a faculdade
• Zen Coding: Como escrever HTML/CSS mais rápido

Um vídeo que explica de uma forma simples o que é a Web Semântica.

Via: estándares y accesibilidad

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• 24 ways: Versão 2008
• Design view do Dreamweaver não é browser
• O que são Tag Clouds?
• Não use mailto
• Curiosidade: Qual o tamanho máximo das URL’s?

Se você pensa que não é possível criar um link para um certo local de um documento PDF, como se fossem âncoras, está muito enganado isso é possível e é muito simples de fazer. O site RDPSlides.com explica o passo a passo em detalhes de como fazer isso. A forma de usar essa característica é agregar parâmetros depois do nome do documento, desta forma:

documento.pdf#param1=valor1&param2=2& ... paramN=valorN

Alguns dos parâmetros disponíveis:

• page: para indicar em que página se deve abrir o documento.
• zoom: establece um nível de zoom. O valor 100 é equivalente a 100%.
• pagemode: valores entre bookmarks, thumbs, ou none.
• toolbar: true para mostrar a barra de ferramentas e false para não mostrá-la.

Mas como tudo não são rosas, existem algumas limitações:

• Funciona somente com o Adobe Reader e outros leitores de arquivos PDF que enham essa função definida.
• Funciona em links somente com documentos em servidores, não em arquivos locais.

Referências

• AgenciaWeb – Links Inteligentes a documentos PDF.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Convites para o Yahoo meme
• Aprenda Illustrator CS3 em 30 dias
• Super Screenshot
• Você é mais esperto que um webdesigner da 5ª série?
• CSS browser selector

Não sei se essa informação é verdade, mas acabei descobrindo que no dia 12 de Fevereiro de 2008 a Microsoft obrigará a todos os usuários do Internet Explorer 6 a atualizarem para a versão 7 via Windows Update. Essa com certeza seria a melhor coisa do mundo, mas ficaria melhor ainda se todos largassem do IE e utilizassem o Firefox, ou Flock, Opera, Safari, WebKit, Konqueror….

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Solução definitiva – PNG Transparente no IE6
• A Guerra dos Browsers
• Microsoft interessada em usar Webkit
• Dia Mundial sem o Internet Explorer
• Internet Explorer 8 e o modo Super Standard

Primeiramente, não vou repetir aqui o que já foi dito em milhares de sites por aí, portanto, se quiserem mais informações sobre esse assunto que rolou durante essa semana no mundo dos WebStandards, é bom dar uma olhada nos seguintes links:

• A List Apart: Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8.
• Snook.ca – IE8 to include version targeting.
• Anieto2K – Internet Explorer 8.0 modo super estandar.
• Superfície Reflexiva – IE8 e Compatibilidade.
• intertwingly – Best Standards Support.
• Tripix.net – IE8, estándares y la super-polémica del mes.

Mas como reagiram pessoas como: Anne van Kesteren, Ian Hixie, Dean Edwards ao ouvirem essa informação? Veja a opnião de alguns deles.

E você, leitor assíduo aqui do blog, o que achou dessa nova artimanha da Microsoft?

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Solução definitiva – PNG Transparente no IE6
• A Guerra dos Browsers
• Microsoft interessada em usar Webkit
• Dia Mundial sem o Internet Explorer
• Internet Explorer 6 R.I.P

<object width="425" height="373">
<param name="movie" value="http://www.youtube.com/v/O0G7iKj6PS0&rel=1&border=1"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/O0G7iKj6PS0&rel=1&border=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="373"></embed>
</object>

Se você for validar o código, verá os seguintes problemas:

• Se utiliza a tag object corretamente, mas ocorre a falta de alguns parâmetros como data e type.
• As tags param em XHTML devem ser fechadas com a sua mesma tag de abertura.
• O uso da tag não standard embed podem produzir incompatibilidades em browsers que não a utilizam, como, dispositivos móveis e leitores de tela.
• Não se proporciona um método alternativo caso o dispositivo não tenha suporte a Flash.

A solução é bem simples, basta codificar-mos da seguinte maneira:

<object data="http://www.youtube.com/v/O0G7iKj6PS0" type="application/x-shockwave-flash" width="425" height="350">
  <param name="quality" value="high" />
  <param name="movie" value="http://www.youtube.com/v/O0G7iKj6PS0" />
  <img src="/img/video.png" alt="Vídeo (Objeto multimídia)" />
</object>

O código acima corrige vários conceitos, e além de tudo elemina o uso da tag embed, pois se trata de uma tag privada e totalmente fora dos padrões:

• Se utiliza a tag object corretamente com o link do objeto no atributo data e o tipo MIME no atributo type.
• As tags param agora são “unitárias” e compatíveis com XHTML, além de também serem compatíveis com HTML.
• Acessibilidade: Se utiliza um método alternativo, uma imagem que se mostrará caso o browser não tenha um plug-in do Flash instalado. E no caso de não haver suporte a imagens (leitores de tela, browsers de texto) é mostrado o aributo alt da imagem.

Abaixo, um exemplo de vídeo do youtube inserido corretamente em XHTML:

Referências

• Emezeta Blog – Youtube estándar con (X)HTML válido.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Quero aprender HTML. E agora?
• Target _blank é uma afronta a liberdade de escolha do usuário
• Compactando o (X)HTML/CSS de suas páginas
• 24 ways: Versão 2008
• Design view do Dreamweaver não é browser

Todos os comentários contidos nas imagens são de responsabilidade de seus respectivos autores.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• 24 ways: Versão 2008
• Design view do Dreamweaver não é browser
• O que são Tag Clouds?
• Não use mailto
• Curiosidade: Qual o tamanho máximo das URL’s?

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• 24 ways: Versão 2008
• Design view do Dreamweaver não é browser
• O que são Tag Clouds?
• Não use mailto
• Curiosidade: Qual o tamanho máximo das URL’s?