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

Os desenvolvedores interessados hoje me desenvolver para iPhone e iPod Touch podem ficar felizes pois Diego Martín Lafuente desenvolveu um framework para facilitar esse trabalho chamado: Universal iPhone UI Kit, onde você também pode ver uma prévia do Framework em funcionamento.

O Framework segue a linha de desenvolvimento de iUI, de Joe Hewitt, emulando uma aplicação nativa, evitando assim romper o perfeito equilíbrio que a Apple conseguiu em suas aplicações.

Graças a utilização do Safari no iPhone e no iPod Touch, você pode utilizar ao máximo os seletores CSS 3, juntamente com um XHTML dentro dos padrões, levando sua aplicação ao extremo em pouco tempo de desenvolvimento.

Download

• Arquivo zip
• Via SVN

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.

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.

É muito fácil se dar conta quando um site foi desenvolvido pensando no usuário ou não. Parece algo estúpido, mas não não todas as pessoas que entendem que o site irá ser visitado por pessoas que não são iguais a ela mesma. Nem todos se sentem bem em todos os lugares. Sem dúvida, sites que antes de seu desenvolvimento são extremamente “pensados” são muito mais ricos que os outros.

Esses sites compartilham algumas características que fazem a visita do usuário muito mais agradável e ajudam a cumprir seu objetivo pelo qual visitou o site de maneira muito mais simples e rápida.

Carregamento Rápido

Um site deve carregar o mais rápido possível. Se o visitante pode encontrar a informação solicitada em seu site em outro, não tenha dúvida que ele irá logo após seu site demorar alguns segundos para carregar. Existem várias maneiras de se fazer com que seu site carregue mais rápido, abaixo você pode ver algumas delas:

• Como fazer com que as páginas do Wordpress carreguem mais rápido.
• Arquivos CSS bem menores.
• Arquivos CSS menores.

Acessibilidade

Coo coentado anteriormente, nem todos visitam os sites com as mesmas condições, ou seja, não são todos que fazem o uso de um PC com uma conexão de 2.5 MB em um monitor de 17 polegadas com Firefox sob Windows XP. Você deve desenvolver os sites para serem acessíveis por todos os meios: PCs, Notebooks, Palms, Dispositivos móveis, etc.

Isso significa que nem sempre será possível ver as imagens, nem sempre será possível reproduzir Flash e nem ver Frames. Deve-se buscar uma forma alternativa de o conteúdo chegar ao usuário, muito mais hoje em dia onde a navegação móvel cresce rapidamente num futuro não tão distante.

Navegação

O usuário deve estar a todo momento a não mais de 2 clicks de seu destino. Isso não é fácil de fazer, mas facilita e muito as visitas. Além disso é importante que as áreas mais destacadas do site estejam á vista do usuário e sejam fáceis de acessar. Também é importante hierarquizar os links dentro de sua navegação, destacar seções em seu site, e essas também devem ser fáceis de acessar.

O que seu site não pode deixar de ter é uma área onde o usuário pode contactá-lo, é muito importane relacionar-se com seus visitantes. Os demais links e sua devida disposição servirão para orientar o usuário em uma espécie de visita guiada por seu site ajudando muitas vezes a cumprir o objetivo.

Informação

Cada visitante no geral chega a seu site buscando algo. Certamete aquilo que você sabe (ou deveria saber) é que deve servir aos usuários com uma bandeja de prata e uma boa taça de vinho. Ir ao ponto com o que você tem de dizer é uma boa maneira.

Referências

Tradução do artigo original de: Gran Impetu - Características de un sitio user friendly.

Os desenvolvedores do WebKit estão trabalhando para que seu browser tenha suporte as tags HTML5 <audio /> e <video />. O código HTML com a integração de Java Script seria da seguinte forma:

<video />

//HTML
<video src=sample.mov autoplay></video> 

//javascript
<script>
function playPause() {
  var myVideo = document.getElementsByTagName('video')[0];
  if (myVideo.paused)
    myVideo.play();
  else
    myVideo.pause();
}
//Aqui é onde controlamos onde o vídeo termina
myVideo.addEventListener(’ended’, function () {
  alert(’video playback finished’)
} );</script>
<input type=button onclick=”playPause()” value=”Play/Pause”>

<audio />

var audio = new Audio("song.mp3");
audio.play();

Referências

• Anieto2K.
• WebKit Blog.

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.

Uma das coisas mais interessantes do Firefox é a possibilidade de você instalar extensões nele que podem lhe auxiliar e muito, seja para navegar, ou para o desenvolvimento web, e até hoje eu não entendo como tem muita gente ainda que não utiliza o Firefox, seja, ou por receio, ou por que o acha feio, não sei, mas isso fica para um próximo post, mas abaixo você pode ver uma lista de 30 extensões que eu encontrei no site Sentido Web, e podem auxiliar e muito você desenvolvedor:

CSS

• Aardvark: Permite ver atributos CSS, ID’s e Classes, selecionando elementos individuais na página.
• chromEdit: Permite modificar o CSS e o JavaScript de qualquer página.
• CSSMate: Edição de arquivos CSS.
• CSS Validator: Valida o CSS de suas páginas.
• CSSViewer: Visualiza propriedades CSS.
• EditCSS: Permite modificar os CSS carregados.
• IETab: Visualize suas páginas web no IE dentro do Firefox.
• Style Sheet Chooser II: Permite selecionar folhas de estilo alternativas para uma página.

Debug e Análise

• Firebug: Dispensa apresentações, a melhor ferramenta para análise e debug de HTML, CSS, JavaScript e Ajax.
• HTML Validator: Valida o HTML suas páginas de acordo com o W3C.
• JavaScript Debugger: Debug de JavaScript.
• Link Checker: Comprova se os links de uma página são válidos.
• Load Time Analyzer: Ferramenta para mostrar o tempo de carregamento de uma página.
• View Dependencies: Mostra informações de todos os arquivos usados ao carregar uma página.

Outros

• Clipmarks: Tire screenhots de lugares específicos de sua página.
• Codetech: Editor Web com a aparência do Dreamweaver.
• ColorZilla: Capture cores das páginas visitadas.
• FirePHP: Ferramenta para depurar PHP.
• Greasemonkey: Altere o comportamento de qualquer página web com esse plug-in.
• Measureit: Ferramenta para medir(em pixels), partes das páginas web.
• Platypus: Uma das melhores ferramentas para modificar uma página web.
• Poster: Permite interagir com WebServices e outras ferramentas web.
• Professor X: Mostra o conteúdo do header de uma página web.
• Screen grab: Tire Screenshots de suas páginas web.
• TestGen4Web: Grava a atividade dos usuários em páginas web.
• View Source Chart: Visualizador de código fonte.
• Web Developer: Uma coleção de ferramentas para desenvolvimento web.
• X-Ray: Permite ver o código fonte de uma página e alternar entre ambos de uma forma simples.

Artigo original: Sentido Web.

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”.