Audaciosamente indo onde nenhum dev jamais esteve

html | css | javascript | seo | design e essas coisas de nerd

Deu pau no IE6Cameroon

Posts de ‘Webmasters’

JSONP e o “Ajax Crossdomain”

Os serviços para intercâmbio de dados entre aplicações via protocolo http alcançaram algum nível de maturidade nesses últimos anos. Hoje, já sabemos como disponibilizar serviços via web, já existem abordagens que funcionam, outras vão sendo experimentadas. O fato é que existem diversas APIs disponíveis na web para atender as mais variadas necessidades: Agenda, mapas, autenticação de usuários, integração com redes sociais, enfim. Serviços públicos, serviços pagos, serviços com mais de um plano de licensiamento para atender mais de um tipo de consumidor. Hoje qualquer um pode criar sua api e colocar na web e ganhar (se quiser) seu dinheirinho com aquilo.

Em meio às tecnologias para troca de dados e comunicação entre aplicações pela web como REST, SOAP, WSDL etc, se destacam também as APIs que fornecem dados com simples requisições http diretamente do site via browser, sem a necessidade de processamento do lado do servidor pelo cliente do serviço. Para esses casos temos o JSONP como uma alternativa “bem em conta” para resolver problemas conhecidos. O objetivo desse post é dar uma introdução do que é e como usar o JSONP.

mais…

SVG vs CANVAS

Como você deve ter notado em meu post anterior sobre HTML5 (http://afronteirafinal.com/prepare-se-para-o-html-5), eu abordei sobre SVG e Canvas e nas últimas semanas os debates estão se aquecendo sobre os méritos de cada um, e muitos estão prevendo um “death match”. No entanto, minha pesquisa me convence de que cada um tem suas próprias finalidades, mas definitivamente chegou a hora de usá-los.

O QUE É SVG?

SVG é uma linguagem para descrever gráficos bidimensionais e aplicações gráficas em XML. Alguns exemplos de SVG são: o logo da Wikipedia (http://upload.wikimedia.org/wikipedia/commons/7/77/Wikipedia_svg_logo.svg) e o “Hello World” do SVG chamado de “Tiger” (http://www.amplesdk.com/examples/svg/tiger). Veja o fonte desses dois arquivos SVG para ver como SVG parece. mais…

Webmonster: Youtube

Webmonster e o youtube

Seo sem crise parte 2 – Meta tags: Keywords

Continuando o texto anterior sobre SEO, vamos falar neste post a respeito das Meta Keywords.

Se você não é desenvolvedor deve se perguntar nesse momento:

“- Eu não sou desenvolvedor, devo me perguntar nesse momento se preciso mesmo saber sobre meta tags?”

Bom, sim e não.  Você não precisa necessariamente saber onde aplica-las no código, mas tem que saber como funcionam e para que servem pois pode existir um campo específico para isso no seu publicador.

Existem algumas dúzias de meta tags que se pode usar no código mas, uma vez que a proposta é não sair do básico do SEO, vamos falar somente das mais importantes nessa série de textos. Aliás, vamos falar uma coisa que pouca gente aborda em textos sobre SEO: em geral as pessoas dão enfase à aplicação, enquanto aqui pretendo falar o real porquê  de usa-las de forma x ou y.
mais…

Webmonster: a sala 8 tá livre às 2 horas?

Reunião pra fazer reunião. pode isso?

SEO sem crise – Uma visão simples e rápida

Há algum tempo escrevi um texto em meu blog pessoal Heresias.org um post com “10 dicas para o seu blog aumentar estrondosamente em acessos“, um texto bem humorado a respeito da fina arte do SEO (Search Engine Optmization) e sua capacidade para poluir a internet.

O caso é que tudo que escrevi no texto, embora de forma escrachada, realmente é funcional na hora de montar um texto relevante para os nossos amigos buscadores (em especial Google, Yahoo e Bing, que são nosso atuais ditadores de tendências na produção de textos web).

Enfim, o meu foco naquele texto em específico era realmente a produção do conteúdo e sobre como a forma de escrevê-lo influencia para chamar a atenção dos buscadores. Mas de que adianta isso sem uma formatação decente?

mais…

Webmonster: Definindo o plantão de páscoa

Webmonster 5 - plantão de páscoa

Torne seu site acessível para cegos

Antes de começar preciso dar uma explicação: por que dizemos “cegos” e não “deficientes visuais”, como manda o politicamente correto? Este texto tratará de sites para pessoas totalmente desprovidas de visão ou que estejam num nível comprometido demais desse sentido para usar a internet da forma convencional.

A palavra “Deficiente visual” é abrangente demais – podemos falar de daltônicos, míopes (que é meu caso, por exemplo), hipermétropes, fotofóbicos e etc, e não é objetivo falar sobre tudo isso nesse artigo. Logo, acho que usar a palavra “cego” (que não vejo por onde possa ser ofensiva) define muito bem o tipo de usuário com o qual estamos preocupados.

Por que essa preocupação? Veja bem, isso não é “bondade”, diria até que está mais para uma obrigação. Além, é claro, de permitir igual acesso ao máximo de pessoas possível, lembre-se que é mais um recurso que pode aumentar o número de usuários e, por consequência, fideliza-los. mais…

Webmonster: 35% de 100%

Aguarde... Carregando....

O que você tem que saber sobre CSS3

Muitos de vocês provavelmente já perceberam toda a agitação em torno do CSS3, mas exatamente quais técnicas podemos usar hoje?

Neste artigo, vou mostrar algumas técnicas diferentes CSS3, que alguns dos principais navegadores (mais especificamente Firefox, Chrome, Safari e Opera) já suportam. Com isso ficará evidente a degradação do layout pela falta de suporte dos outros browsers (como por exemplo o Internet Explorer). Usando as extensões específicas disponíveis para cada navegador, muitos dos estilos que estão sendo especificados no CSS3 já podem ser usados hoje!

CSS Vendor Extensions

O CSS permite que os desenvolvedores de navegadores criem implementações proprietárias para os mais variados estilos CSS. Isso permite ao distribuidor do navegador realize implementações próprias para determinada propriedade CSS, mesmo que já padronizado ou especificado, o que não é tão comum nem tão recomendado. Para utilizar no CSS, a propriedade que deseja utilizar para determinado(s) navegador(es) deve ser precedida de um prefixo. Esse prefixo indicará que se trata de uma extensão que somente aquele navegador interpretará.

Alguns browsers com seus prefixos (CSS Proprietary Extensions Scheme):

  • Firefox : -moz-
  • Safari: -webkit-
  • Chrome: -webkit-
  • Opera: -o-
  • IE: -ms-

A grande vantagem das extensões é que os navegadores podem ir implementando as novas propriedades, como no caso do CSS3. Propriedades essas que já estão previstas, porém não especificadas. Isso certamente acelera a evolução dos navegadores em relação ao suporte às novas propriedades; Prepara os “CSS coders” para a nova forma de trabalhar; e contribui para a especificação oficial do CSS propriamente dita.
Clique se quiser saber mais sobre (CSS Proprietary Extensions Scheme);

Como você deve ter percebido, uma grande desvantagem de usar essas extensões é o fato de que acabamos tendo que repetir as propriedades para que funcione em todos os navegadores. É isso ou procurar soluções com javascript, folhas de estilos alternativas entre outras “viagens” para que a manutenção do código continue simples onerando o mínimo de recursos. Tudo bem, não basta falar, vamos mergulhar na direito no CSS3! Nota: os estilos sem um prefixo é a proposta da especificação atual W3C.

mais…