Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

O código para inserir vídeos do Youtube em sites que respeitam os WebStandards é uma dor de cabeça para desenvolvedores e para bloggers, pois o Youtube proporciona um código para você copiar e colar em nosso blog para reproduzir os vídeos de uma forma rápida e simples, mas o código não é correto como deveria:

<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 border="0" 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.

O HTML foi desenvolvido originalmente por Tim Bernes-Lee no CERN (Centro Europeu de Física de Partículas), e foi popularizado pelo navegador Mosaic, esse desenvolvido pela NCSA (National Center for Supercomputing Applications). Devido ao seu rápido crescimento na Web, foi necessário criar um padrão para que todos os autores e navegadores pudessem reconhecer quaisquer versões do HTML, que são as seguintes: HTML 2.0, HTML 3.2, HTML 4.0 e o HTML 4.01.

Alguns crêem que o HTML não tem futuro algum devido a existência do XHTML mas se fomos ver bem, o browser mais utilizado hoje não suporta XHTML como deveria. As versões do HTML mais utilizadas hoje em dia são HTML 4.01 e XHTML 1.0. Essas 2 versões foram definidas pelo W3C a mais ou menos 7 a 8 anos, e agora estão sendo desenvolvidas novas versões que são o HTML 5 e o XHTML 2.

Apesar de cada versão, cada uma tem suas variantes que sempre devem ser definidas no documeno HTML:

• HTML 4.01 Strict: O mais utilizado, onde podem ser utilizadas tags do HTML 4.01, só que não são permitidas tags obsoletas.
• HTML 4.01 Transitional: Esse permite utilizar tags de todas as versões HTML, mas não é muito recomendado.
• HTML 4.01 Frameset: Tem suporte a frames, um modelo muito antiquado.

Artigo recomendado: Evolução do HTML.

Esse artigo é uma tradução do original de: Carlos Leopoldo.

Adaptação do artigo original de: Anieto2K

Se a cada dia você fica perdido com cada palavra nova que aparece na internet, com esse guia, não vai acontecer mais esse tipo de coisa, agora você vai entender perfeitamente a língua dos geeks:

Linguagens de marcação e apresentação

• CSS: Cascading Style Sheets - CSS é uma linguagem utilizada para modificar o aspecto das estruturas HTML.
• DHTML: Dynamic HyperText Markup Language - É um termo utilizado para referir-se a junção de HTML + CSS + JavaScript.
• HTML: HyperText Markup Language - É uma linguagem de marcação de tags que compõem todas as páginas web.
• WML: Wireless Markup Language - WML é similar ao HTML, é baseado em XML e é orientado a dispositivos móveis.
• XHTML: Extensible HyperText Markup Language - XHTML é um HTML ao qual se aplicam as regras do XML.
• XML: Extensible Markup Language - XML é uma recomendação do W3C para gerar dados de uma forma melhor estruturada.

Linguagens de programação

• ASP (Microsoft): Active Server Pages - ASP é uma linguagem de programação em Script que se utiliza de VBScript, JScript, PerlScript ou Python processadas pelo servidor para gerar conteúdo dinâmico na web.
• CGI: Common Gateway Interface - É um protocolo que permite que aplicações do servidor interajam com os navegadores.
• JSP: JavaServer Pages - É uma linguagem de programação baseada em Java e é executada no lado servidor. Esta tecnologia permite ao desenvolvedor produzir aplicações que, acessam o banco de dados, manipulam arquivos no formato texto, capturam informações a partir de formulários e captam informações sobre o visitante e sobre o servidor.
• PHP: PHP Hypertext Preprocessor/Personal Home Page - É uma linguagem de programação de computadores interpretada, livre e muito utilizada para gerar conteúdo dinâmico na Web, como por exemplo fóruns. Apesar de ser uma linguagem de fácil aprendizagem e de utilização para pequenos scripts dinâmicos simples, o PHP é uma linguagem poderosa orientada a objetos.
• RoR: Ruby on Rails - Ruby On Rails é um framework de código aberto para desenvolvimento de aplicações Web, escrito em Ruby.
• SSI: Server Side Includes - É uma linguagem de programação que permite incluir conteúdo de um arquivo em outro.

Web Services

• ASP: Application Service Provider - É a denominação dadas às empresas que disponibilizam serviços ou aplicações informáticas com base na web.
• AWS: Amazon Web Services - É uma coleção de aplicações remotas oferecida pela Amazon.com
• RSS: Really Simple Syndication - RSS é uma especificação XML que permite ao usuário acompanhar o conteúdo de um site através de programas, muito utilizado hoje em blogs, sites de notícias e fóruns.
• S3: Amazon Simple Storage Service - É uma solução de armazenagem de dados de forma infinita na web.
• YUI: Yahoo! User Interface - É uma biblioteca Open-Source em Javascript.

Base de Dados

• CRUD: Create, Read, Update and Delete - CRUD são as 4 funções básicas de um sistema de base de dados.
• DBMS: Database Management System - Um DB é uma coleção de dados estruturada de forma organizada.
• SQL: Structured Query Language - É uma linguagem de consulta a base de dados relacional. A linguagem SQL é um grande padrão de banco de dados. Isto decorre da sua simplicidade e facilidade de uso. Ela se diferencia de outras linguagens de consulta a banco de dados no sentido em que uma consulta SQL especifica a forma do resultado e não o caminho para chegar a ele.

Servidores e Hosting

• CRON: Command Run ON - É um programa que executa comandos agendados nos sistemas operacionais do tipo Unix (como o Linux ou o Minix, por exemplo). O cron se encarregará de verificar a hora e determinar se existe ou não algum programa a ser rodado. Caso exista ele o rodará na hora e data solicitada.
• IIS: Internet Information Services - É um servidor web criado pela Microsoft para seus sistemas operacionais para servidores. Sua primeira versão foi introduzida com o Windows NT Server versão 4
• VPS: Virtual Private Server - É um servidor em ambiente compartilhado que possui acesso root (administrador) e processos independentes para cada conta VPS criada.

Protocolos

• FTP: File Transfer Protocol - É uma forma bastante rápida e versátil de transferir arquivos (também conhecidos como ficheiros), sendo uma das mais usadas na internet.
• HTTP: HyperText Transfer Protocol - É um protocolo de Aplicação do modelo OSI utilizado para transferência de dados na rede mundial de computadores. Também transfere dados de hiper-mídia (imagens, sons e textos).
• HTTPS: Secure HypterText Transfer Protocol - É uma implementação do protocolo HTTP sobre uma camada SSL ou do TLS. Essa camada adicional permite que os dados sejam transmitidos através de uma conexão criptografada.
• SSH: Secure Shell - São protocolos criptográficos que provêem comunicação segura na Internet para serviços como email (SMTP), navegação por páginas (HTTP) e outros tipos de transferência de dados.
• WAP: Wireless Application Protocol - É um padrão internacional para aplicações que utilizam comunicações sem fio.

Padrões e Acessibilidade

• 508: Section 508 - Seção 508 é uma série de padrões a nível tecnológico sobre acessibilidade.
• W3C: World Wide Web Consortium - É um órgão internacional que rege as normas de desnvolvimento web.
• WAI: Web Accessibility Initiative - É uma iniciativa do W3C para que as páginas web tenham a capacidade de serem disfrutadas por pessoas com algum tipo de deficiência.
• WCAG: Web Content Accessibility Guidelines - São uma série de regras sobre acessibilidade publicadas pela WAI.

Linguagens Cliente

• AJAX: Asynchronous JavaScript And XML - É o uso sistemático de tecnologias providas por navegadores, como Javascript e XML, para tornar páginas mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações. AJAX não é uma tecnologia, são realmente várias tecnologias trabalhando juntas, cada uma fazendo sua parte, oferecendo novas funcionalidades.
• DOM: Document Object Model - É uma especificação do W3C, independente de plataforma e linguagem, onde pode-se alterar e editar a estrutura de um documento. A API DOM oferece uma maneira padrão de se acessar os elementos de um documento, além de se poder trabalhar com cada um desses elementos separadamente, e por esses motivos criar páginas altamente dinâmicas.
• JS/ECMAScript: JavaScript - É uma linguagem de programação baseada no navegador, que foi inicialmente criada para atender, principalmente, as necessidades de validação de formulários no lado cliente e interação com a página.

Desenvolvimento

• CRAP: Contrast, Repetition, Alignment, Proximity - É uma metodologia de desenvolvimento aplicada as estruturas das páginas web.
• CVS: Concurrent Versions System - É um sistema de controle de versão para compartilhar código com outros desenvolvedores em projetos colaborativos.
• GUI: Graphical User Interface - É uma interface gráfica que permite ao usuário interagir com o computador de uma forma amigável.
• SVN: Subversion - Uma outra ferramenta para controle de versão.
• WYSIWYG: What You See Is What You Get - Significa a capacidade de um programa de computador de permitir que um documento, enquanto manipulado na tela, tenha a mesma aparência de sua utilização, usualmente sendo considerada final a forma impressa.

Gráficos e Imagens

• CMYK: Cyan Magenta Yellow Key - CMYK é um modelo de cores baseado nos diferentes níveis do Ciano, Magenta e Amarelo.
• FLA: Flash Authoring File - São arquivos de saída do Flash
• GIF: Graphics Interchange Format - É um formato de imagem de mapa de bits muito usado na web, quer para imagens fixas, quer para animações.
• JPEG: Joint Photographic Experts Group - Trata-se de um formato de compressão, com perda de dados, aplicado em imagens fotográficas. A perda de dados é proporcional ao fator de compressão desejado. As extensões de arquivos para este formato são .jpeg , .jfif , .jpe e .jpg , este último, o mais comum.
• PNG: Portable Network Graphics - É um formato de dados utilizado para imagens, que surgiu em 1996 como substituto para o formato GIF, devido ao facto de este último incluir algoritmos patenteados.
• PSD: PhotoShop Document - São os arquivos com o qual trabalha o Photoshop.
• RGB: Red Green Blue - É um modelo de cores baseado nos diferentes níveis de Vermelho, Verde e Azul.
• SVG: Scalable Vector Graphics - SVG é um sistema XML para escrever gráficos vetoriais de 2 dimensões.
• SWF: Small Web Format/ShockWave Flash - É um formato de gráficos usado para criar animações.

E-Commerce

• AVS: Address Verification System - Ponto de referência adicional para autenticar o usuário do cartão, utilizado em geral por vendas via telemarketing / e-commerce.
• CSC/CVV: Card Security Code/Card Verification Value - É uma ferramenta de segurança que proporciona uma maior segurança contra fraudes. Sâo aqueles 3 últimos números presentes nos cartões de crédito.
• MID: Merchant ID - Um MID é um identificador único ligado as companhias.
• FAQ: Frequently Asked Questions - É uma lista de perguntas e respostas mais comuns de uma aplicação.

Otimização para motores de busca

• CPC: Cost Per Click - CPC é o valor que pagam para cada vez que um usuário faz um clique.
• CPM: Cost Per 1000 Impressions - É o valor que se paga a cada 1000 impressões.
• CTR: Click Through Rate/Ratio - É a quantidade de usuários que fazem cliques frente uma quantidade de impressões de página.
• PPC: Pay Per Click - É um modelo muito usado na internet onde você paga após os usuários efetuarem clicks.
• PR: PageRank - É um algotítimo usado para medir a popularidade de um site.
• SEO: Search Engine Optimization - É o procedimento de otimização das aplicações web para obter melhores resultados nas buscas.
• SERP: Search Engine Results Page - É uma lista de páginas devolvidas pelo buscador com base na busca realizada pelo usuário.

Segurança

• XSS: Cross-Site Scripting - XSS é uma vulnerabilidade de segurança onde o atacante pode executar código malicioso.
• CSRF: Cross-Site Request Forgery - CSRF é uma vulnerabilidade de segurança onde o atacante implanta código malicioso em uma página e esta permite realizar suas funções.

Destinos

• CNAME: Canonical Name - Um CNAME é um alias do hostname.
• DNS: Domain Name System - São como uma lista telefônica da internet. Eles dão a direção de uma máquina associada a um domínio.
• DTD: Document Type Definition - Contém as regras que definem quais as tags que podem ser usadas em um documento XML e quais os valores válidos.
• ICANN: Internet Corporation for Assigned Names and Numbers - O ICANN é uma entidade sem fins lucrativos, multilateral, que organiza a concessão de domínios e de endereços IP no mundo.
• IP: Internet Protocol - É um protocolo usado entre duas máquinas em rede para encaminhamento dos dados.
• SLD: Second-Level Domain - SLD é um domínio debaixo das TLD’s
• TLD: Top-Level Domain - É a última parte do nome de um domínio, por exemplo: .com, .br.
• URL: Uniform Resource Locator - É o endereço de um recurso (um arquivo, uma impressora etc.), disponível em uma rede; seja a Internet, ou uma rede corporativa, uma intranet. Uma URL tem a seguinte estrutura: protocolo://máquina/caminho/recurso.
• WWW: World Wide Web - É um sistema de documentos em hipermídia que são interligados e executados na Internet.

Mingle² - Free Online Dating37

Descobri esse interessante quiz que em apenas 5 minutos você deve digitar em uma caixa de texto todos os elementos HTML previstos no HTML 4. Comecei o teste, mas parei logo, pois minha filha me tirou do micro. E você, de quantos elementos recorda?

Foi atualizado recentemente o validador HTML do W3C, que agora se encontra em sua versão 0.8.0, mas não se esqueça do primordial: “Validação não é nada sem semântica”.

Títulos HTML - Do h1 ao h6

Para aqueles que não sabem, os cabeçalhos HTML, ou títulos, estão divididos em 6 níveis: h1, h2, h3, h4, h5 e h6, os números servem para indicar cada número do cabeçalho, sendo que o de nível 1 tem uma maior importância, e o de nível 6, menor importância. Por exemplo, para descrever o título de uma página, você deve utilizar o h1, ao invés de fazer isso:

<p class="titulo">Título do site</p>

Para títulos de menor importância, deve-se usar o h2, e sucessivamente os cabeçalhos de menor nível, dessa forma você está sendo semântico e os Search Engines agradecem.

Muita gente pensa que o HTML permite a codificação mal estruturada, por exemplo: <strong><em>alguma coisa</strong></em>. Mas isso não é verdade, se você for validar seu código, verá que ele está estruturado de uma forma errada. Usualmente os bowsers tratam de corrigir essa falha e é por isso que vemos as páginas corretamente.

Algumas vezes a falta da Tag de fechamento não representa problema para os browsers por que eles sempre irão codificar ambiguamente. Antigamente, era muito comum você ver alguém omití-las, como o </p>, mas hoje em dia é recomendado utilizar sempre as tags de fechamento, e para as tags <br>, <img> e <hr> você deve utilizá-las da seguinte forma: <br />, <img /> e <hr />, segundo as especificações do XHTML.

Muitas vezes quando vamos validar nosso código junto ao validador HTML do W3C, acabamos nos deparando com erros que as vezes não somos capazes de corrigir, ou, custa bastante tempo descobrir a causa d erro.

Apesar das explicações detalhadas de cada erro encontrado, na maioria das vezes o validador encontra erros que não etão diretamente relacionados com a sintaxe do código e com isso acabamos em um conflito. Abaixo vocês verão uma lista dos erros mais comuns em HTML:

Tags HTML dentro de um elemento SCRIPT

Um erro bastante comum é quando usamos uma linguagem de programação sob a outra de forma incorreta, especificamente quando utilizamos sentenças JavaScript sob linguagem HTML. Não, isso não é um erro, o erro está quando esquecemos de utilizar os caracteres de escape.

Forma Incorreta:

<script type="text/javascript">
<!--
  document.write("</p>");
// -->
</script>

Forma Correta:

<script type=”text/javascript”>
<!–
document.write(”<\/p>”);
// –>
</script>

Como podemos ver no exemplo acima, deve-se utilizar rimeiramente de uma barra invertida para obrigar o user-agent do usuário a entender que a barra que encerra o parágrafo não significa um comportamento especial, e sim, o fim de um bloco de parágrafo.

Ampersands (&) em URLs

Outro erro bastante comum são o de interpretação dos Ampersands em URLs, objetos, imagens e outros:

<a href="http://web.com/?id=12&num=3">Artigo</a>
<a href="http://web.com/?id=12&amp;num=3">Artigo</a>

A segunda opção é a maneira correta para escrita.

Ordem incorreta dos elementos

Outro erro bastante comum, é que em varios objetos aninhados, fechamso uma tag posterior, sendo que deveria ser fechada juntamente com a anterior:

<strong><em>Olá a todos</strong></em>
<strong><em>Olá a todos</em></strong>

A segunda opção é a maneira correta para escrita.

Uso do DOCTYPE em minúsculas

O tipo do documento estabelecido no início do código é sensível a maiúsculas, portanto você deve respeitá-lo sem alterá-lo.

Se requer um sub-elemento no cabeçalho

O elemento Title não só serve para estabelecer um título para página, mas sim é um elemento obrigatório que você deve estabelecer em suas páginas web.

Letras maiúsculas em tags XHTML

Em XHTML, todos os elementos da página devem ser escritos em minúsculo, por exemplo, onMouseOver é inválido em XHTML, mas onmouseover já é válido.

Artigo original: WDG.

Em um artigo anterior podemos ver que a tag <q> não funciona no Internet Explorer, pra quem não sabe, a tag <q> tem função de indicar citações, as famosas aspas para indicar a fala de alguém. Mas hoje existe uma forma muito simples de contornar isso, apenas utilizando de um arquivo HTC chamado fixQuotes_en.htc, desenvolvido por Will code 4 beer, basta utilizá-lo da seguinte forma:

Basta chamar o arquivo via CSS:

<style type="text/css">
q { behavior:url(fixQuotes_en.htc); }
</style>

Para maiores informações, visite o artigo original: Fixing the Quote Tag in Internet Explorer.

Você é Desenvolvedor Web? Então não pode deixar de conhecer esse site, um repositório com 638 ferramentas divididas por categorias e linguagens de programação.