Pinceladas da Web - XHTML, CSS, JavaScript e WebStandards

SVG vs Canvas

Pedro Rogério — Wed, 01 Sep 2010 13:43:16 +0000

A medida em que os browsers vão evoluindo, novas tecnologias surgem, como, por exemplo, o Canvas, um possível concorrente para o SVG (mas atente-se, são tecnologias diferentes), onde inclusive a Microsoft anunciou suporte no IE9. O objetivo desse post é explorar as diferenças entre essas tecnologias, que são voltadas a criar gráficos no navegador, dando-lhe conhecimentos necessários para utilizar SVG ou Canvas de forma eficaz.

O que é SVG?

SVG é a abreviatura de Scalable Vectorial Graphics, que traduzido para o português significa gráficos vetoriais escaláveis. SVG é uma linguagem XML para descrever gráficos bidimensionais sejam eles de forma dinâmica, estática ou animada. Seu diferencial em relação as outros formatos vetoriais é de ser um formato aberto, não pertencendo a nenhuma empresa. Ele foi originalmente criado pelo W3C, responsável pela definição de outros padrões como HTML, XHTML, XML.

Você pode aplicar estilos ao SVG facilmente com o uso de CSS e adicionar comportamento dinâmico com o uso de SVG DOM, e no final pode ‘embedar’ de forma simples arquivos SVG no HTML através da tag object.

Um exemplo simples é do SVG abaixo embedado do HTML:

Saia daqui pois seu browser não possui suporte a SVG.

O código é bem simples, semelhante a inserir vídeos no HTML:

Seu browser não possui suporte a SVG.

O que é mais complexo é desenhar o SVG, acessem a seguinte URL e vejam o código fonte. Reparem que cada parte do desenho é um elemento no DOM, por isso é recomendado utilizá-lo para interatividade (pois responde melhor a todos os eventos do mouse). Mas devido a criatividade dos desenvolvedores, já criaram até jogos em SVG

O que é Canvas?

O elemento canvas permite no HTML através de uma área determinada na página criar desenhos através de scripts, desenhar e renderizar imagens, permitindo aos desenvolvedores criarem coisas que até então eram possíveis somente com a utilização do Flash, com a vantagem de que com o uso de canvas não precisamos de nenhum plugin de terceiros instalado no navegador.

O canvas foi desenvolvido inicialmente pela Apple para uso dentro do MAC OS X, alimentando aplicações como Widgets do Dashboard e o Safari. Posteriormente foi adotado pelos browsers baseados no motor Gecko e Opera e padronizado pelo WHATWG.

Existem 2 formas de desenhar com canvas, utilizando um contexto 2d ou utilizando um contexto de desenho 3d com WebGL. A primeira opção está mais elaborada e todos os navegadores modernos, incluindo o IE9 dão pleno suporte a essa opção. Já a segunda ainda está em desenvolvimento e na web hoje só se encontram algumas implementações em forma de experimento.

Abaixo você vê um exemplo do código canvas do HTML5:

Agora, com a utilização de JavaScript podemos desenhar qualquer coisa dento do canvas:

var canvas = document.getElementById('meu-canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(60, 60, 50, 50);

O resultado do código acima será um quadrado com tamanho de 50×50 px, localizado a 60px do topo e 60 px do laretal dentro da área de desenho do canvas. Veja o mesmo abaixo:

Comparativo SVG vs Canvas

Abaixo você tem uma visão geral das vantagens e desvantagens na utilização de SVG e Canvas:

Vantagens

Canvas	SVG
Alta performance de desenho em contextos 2d Desempenho constante. Tudo é pixel. Só ocorre degradação com o aumento da resolução da imagem. Você pode salvar o resultado em uma imagem png ou jpg por exemplo. Adequado para a geração de gráficos, edição de imagens e manipulações de pixels.	Resolução independente – Isso faz do SVG ideal para interfaces multiplataforma, pois permite alterar a escala para qualquer resolução de tela. SVG possui um bom suporte a animações. Os elementos podem ser animados utilizando uma sintaxe declarativa ou via JavaScript. Você tem controle total sobre todos os elementos utilizando a API SVG DOM em JavaScript. SVG é formato de arquivo baseado em XML, o que significa que dependendo da aplicação, a acessibilidade dos documentos pode ser maior do que com a utilização de canvas. Isso faz de SVG a melhor utilização para interfaces de aplicações web

Canvas

SVG

Alta performance de desenho em contextos 2d
Desempenho constante. Tudo é pixel. Só ocorre degradação com o aumento da resolução da imagem.
Você pode salvar o resultado em uma imagem png ou jpg por exemplo.
Adequado para a geração de gráficos, edição de imagens e manipulações de pixels.

Resolução independente – Isso faz do SVG ideal para interfaces multiplataforma, pois permite alterar a escala para qualquer resolução de tela.
SVG possui um bom suporte a animações. Os elementos podem ser animados utilizando uma sintaxe declarativa ou via JavaScript.
Você tem controle total sobre todos os elementos utilizando a API SVG DOM em JavaScript.
SVG é formato de arquivo baseado em XML, o que significa que dependendo da aplicação, a acessibilidade dos documentos pode ser maior do que com a utilização de canvas. Isso faz de SVG a melhor utilização para interfaces de aplicações web

Desvantagens

Canvas	SVG
Não existem nós DOM para você manipular, tudo alí é pixel. Não existem APIs para animação, você deve recorrer a contadores e outros eventos para atualizar a tela quando necessário. Recursos de renderização de textos ainda são pobres. Pode não ser a melhor opção onde a acessibilidade é o essencial. O canvas lhe fornece uma superfície de desenho sob o contexto que você escolher. Essencialmente isso significa que tudo são pixels. A menos que futuramente seja criada uma API que adicione recursos adicionais para acessibilidade. Por enquanto você pode fornecer o retorno do conteúdo dentro do elemento canvas para aqueles user-agents que não possuem suporte. Canvas não é adequado para Web Sites ou interfaces de aplicativos para o usuário final. Isso occorre porque as interfaces dos aplicativos precisam ser dinâmicas e interativas, e canvas exige que você desenhe manulamente cada elemento da interface.	Processamento lento a medida em que aumeta a complexidade do documento. Qualquer coisa que usa muito o DOM acaba se tornando lenta. SVG não é adequado por si só para a criação de jogos. Talvez, a melhor escolha seria a combinação entre SVG e Canvas.

Canvas

SVG

Não existem nós DOM para você manipular, tudo alí é pixel.
Não existem APIs para animação, você deve recorrer a contadores e outros eventos para atualizar a tela quando necessário.
Recursos de renderização de textos ainda são pobres.
Pode não ser a melhor opção onde a acessibilidade é o essencial. O canvas lhe fornece uma superfície de desenho sob o contexto que você escolher. Essencialmente isso significa que tudo são pixels. A menos que futuramente seja criada uma API que adicione recursos adicionais para acessibilidade. Por enquanto você pode fornecer o retorno do conteúdo dentro do elemento canvas para aqueles user-agents que não possuem suporte.
Canvas não é adequado para Web Sites ou interfaces de aplicativos para o usuário final. Isso occorre porque as interfaces dos aplicativos precisam ser dinâmicas e interativas, e canvas exige que você desenhe manulamente cada elemento da interface.

Processamento lento a medida em que aumeta a complexidade do documento. Qualquer coisa que usa muito o DOM acaba se tornando lenta.
SVG não é adequado por si só para a criação de jogos. Talvez, a melhor escolha seria a combinação entre SVG e Canvas.

Quais deles escolher?

Cada tecnologia hoje tem seu uso próprio, você não precisa largar agora o SVG em favor do Canvas, ou vice-versa. Você pode usar Canvas para:

Interatividade com edição de imagens: cortar, redimensionar, aplicar filtros.
Geração de gráficos.
Análise de imagens para gerar por exemplo, histogramas.
Renderização de jogos.

Você pode usar SVG para:

Criar um aplicativo web que independe da resolução do usuário.
Criar intefaces interativas.
Criação de gráficos.
Edição de imagem baseada em vetores.

Como podem ver, cada tecnologia possui seus prós e contras, uní-las em uma aplicação web podem lhe render ótimos resultados.

Referências

SVG vs Canvas

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?

Livros com 20% de desconto na Editora Novatec

Pedro Rogério — Fri, 20 Aug 2010 12:48:54 +0000

A cada 5 jovens, apenas um lê. E dentre esse pequeno nicho estão aqueles que lêem a Capricho e outras revistas inúteis. A leitura não é incentivada em nosso país desde os primeiros níveis escolares e o Brasil também não é um país onde os leitores podem incentivar seus filhos.

Muitos preferem gastar R$ 100,00 para entrar em uma balada do que R$ 80,00 em um livro. Os livros não são caros diante de outros bens culturais. Mas esse cenário pode ser mudado através de incentivo familiar, ambição intelectual, fatores esses determinantes para desenvolver o hábito da leitura.

Foi pensando nisso que através de uma parceria entre meus blogs e a Editora Novatec, todo o site vai estar com 20% de desconto, basta você utilizar um dos seguintes códigos de promoção: PINCELADASDAWEB ou CSSNOLANCHE. Agora você pode aproveitar para presentear toda a família com livros pois essa promoção dura até o dia 31/12/2010.

Livros com 20% de desconto na Editora Novatec

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?

CSS Cookbook

Pedro Rogério — Thu, 19 Aug 2010 13:51:59 +0000

Atualizado para Firefox 3, IE 8, e Google Chrome, com a utilização do livro CSS Cookbook você vai aprender a resolver os diversos problemas reais encontrados no dia-a-dia no desenvolvimento web. Este livro de receitas oferece centenas de exemplos práticos para a utilização de CSS na formatação de suas páginas web e inclui exemplos de código que podem ser utilizados imediatamente. Você encontrará exatamente aquilo o que precisa.

Cada receita explica como customizar uma solução que satisfaça as suas necessidades, e cada capítulo apresenta um modelo de design que exibe os tópicos discutidos. Você aprenderá sobre o comportamento dos navegadores mais recentes – incluindo o IE 8, Firefox 3, Safari 4 e o Google Chrome – e como conciliar as diferenças no modo em que esses navegadores exibem suas páginas web.

Organizada em um formato conveniente, de fácil utilização como referência, esta edição é uma companheira valiosa para qualquer pessoa que esteja trabalhando com CSS. Aprenda o básico, incluindo a estrutura de regras CSS:

Trabalhe com a tipografia e o layout de suas páginas.
Crie efeitos para imagens e outros elementos de páginas.
Aprenda técnicas para a configuração de listas, formulários e tabelas.
Projete uma navegação web efetiva e crie links personalizados.
Use sua criatividade combinando CSS com JavaScript.
Aprenda técnicas úteis de solução de problemas.
Explore atributos do HTML5 e CSS3.
É recomendado que se tenha familiaridade com HTML e interfaces web.

Se interessou pelo livro? Consegui um desconto para os leitores aqui do blog de 20%, basta utilizar o código: PINCELADASDAWEB. Não fique desesperado que esse código não vai expirar até o final da semana, ele é válido até o dia 31/12/10.

CSS Cookbook

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?

O reconhecimento é fruto do seu trabalho

Pedro Rogério — Tue, 17 Aug 2010 14:36:08 +0000

Era sábado de manhã, o carteiro apertou a campainha. Minha esposa o atendeu, era um Sedex para mim. Abri a encomenda e era um livro entitulado Aprendendo Web Design, que me foi enviado pela Editora Bookman. Até aí tudo bem, só que eu não havia comprado livro algum com eles.

Será que haviam mandado o livro para a pessoa errada? Comecei a folhear o livro e então vi que dentro havia um cartão com o seguinte conteúdo:

Pedro,
Você está recebendo está obra porque, de certa forma, faz parte dela (veja a página 217).

Fui até a página 217 e fiquei extremamente surpreso ao ver que meu outro blog, o CSS no Lanche foi citado no livro como um blog de referência nacional em CSS. Queria agradecer aqui publicamente a Editora Bookman e a todos os leitores dos meus blogs, pois são coisas desse tipo que me motivam a continuar escrevendo.

O reconhecimento é fruto do seu trabalho

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?

HTML5 Media Capture

Pedro Rogério — Thu, 22 Jul 2010 12:29:08 +0000

O boom do momento é o HTML5. Não se fala em outra coisa por aí a não ser do dito cujo. Isso por que a especificação começou a ser criada a pouco e ainda não está totalmente definida. Dentre os projetos da nova versão do HTML, recentemente mais um foi criado, chamado de HTML Media Capture, criado para permitir acesso a áudio e vídeo vindos através de campos de formulário.

Isso não é relativamente novo, em Abril o W3C criou o primeiro draft, entitulado The Capture API, que descreve uma interface de programação para dispositivos. Esse novo draft é consideravelmente menor que seu antecessor, enfatiza a conexão com o HTML adicionando o atributo accept a um elemento input.

Os valores permitidos para esse atributo são: image/*, sound/* e video/*. Os elementos que possuem o parâmetro capture permitem ao usuário respectivamente, tirar uma foto, gravar um arquivo de som ou de vídeo, além de proporcionar a seleção de arquivos pré-existente em seu computador.

Por exemplo, o seguinte código indica que o usuário deve fazer o upload de uma imagem através de sua câmera:

HTML5 Media Capture

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?

HTML5 Canvas – O futuro dos gráficos na web

Pedro Rogério — Mon, 19 Jul 2010 13:05:12 +0000

Com certeza você já deve ter ouvido falar por aí e muito dessa nova tag do HTML5 e suas possibilidades, mas você sabe o significado dessa nova tag?

Se ficou interessado em saber mais sobre o assunto, aconselho a dar uma olhada nos slides criados pelo desenvolvedor Rob Hawkes que ilustram muito bem o assunto:

View more presentations from Rob Hawkes.

HTML5 Canvas – O futuro dos gráficos na web

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?

Curso de HTML5 no W3C Brasil

Pedro Rogério — Mon, 12 Jul 2010 15:26:33 +0000

Durante os dias 12 a 16 de Julho o escritório do W3C no Brasil estará ministrando um curso sobre HTML5, onde o principal objetivo é atender a demanda técnica da comunidade interessada em aprender mais sobre HTML5.

Essa primeira turma que está participando do curso é formada somente de convidados, e se você como eu ficou de fora dessa, não se preocupe, as próximas turmas, se houver interesse da comunidade em participar, o valor do curso é de R$ 3.000,00, e os interessados devem enviar e-mail para: w3c@nic.br.

Mas como o W3C é bonzinho, o conteúdo desse curso que está acontecendo durante essa semana está disponibilizado no seguinte endereço: http://w3c.br/cursos/html5/conteudo/.

Curso de HTML5 no W3C Brasil

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?

Experimentos HTML5

Pedro Rogério — Mon, 05 Jul 2010 12:14:42 +0000

Para mostrar o que é possível se criar com a tag

HTML5 – Blob

HTML5 – Magnetic

HTML5 – Trail

HTML5 – Particle Depth

HTML5 – Wave

HTML5 – Particles

Experimentos HTML5

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?

HTML5 Rocks

Pedro Rogério — Wed, 23 Jun 2010 11:34:36 +0000

Se você e sua equipe estavam receosos de começar a utilizar HTML5 hoje, agora já podem deixar esse receio de lado, pois a equipe de desenvolvimento do Google desenvolveu um site que atua como uma referência para as diversas novas APIs do HTML5. No atual momento o site entitulado HTML5 Rocks conta com 9 tutoriais, dentre eles você irá aprender a criar aplicativos que funcionem offline, obter a localização do usuário com Geolocation e ler arquivos locais com JavaScript.

Aos poucos serão inseridos novos tutoriais no site, mas o conteúdo já disponível lá hoje já é de grande valia.

HTML5 Rocks

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?

Coloque o jogo do Pac Man no seu site

Pedro Rogério — Mon, 24 May 2010 11:43:19 +0000

No dia 21 de Maio de 2010, em comemoração aos 30 anos do jogo Pac Man, o Google colocou em sua home uma versão do Jogo toda desenvolvida em JavaScript, alguns pensaram que era só de enfeite, mas os mais espertos viram que era possível jogar e em consequência tomar vários esporros do chefe por conta disso.

Se você não viu, pode ver na seguinte URL a versão que foi ao ar nesse dia. Foi então que Michael pegou o código fonte e disponibilizou em seu blog, com isso, qualquer pessoa pode inserir o jogo agora em seu site/blog. Ou então faça o download do código no GitHub.

Caso queira vê-lo em funcionamento, basta dar uma olhada aqui. Para jogar clique em Insert Coin. Ao contrário do que muita gente pensava, não é feito em HTML5, é feito em puro JavaScript, além de usar do Flash para o som do jogo.

Coloque o jogo do Pac Man no seu site

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?

Twitter, Chiclete & Camisinha

Pedro Rogério — Tue, 18 May 2010 11:51:57 +0000

O Twitter não será o mesmo depois deste livro. Os segredos do universo do microblog são desvendados aqui numa linguagem simples e bem-humorada, sem “tecnologuês” ou termos preciosos.

Baseando-se numa abordagem de marketing comportamental (behavioral marketing), o autor apresenta as leis que regem as relações numa mídia social. Por meio de uma metáfora inspirada na semiótica, a Twittosfera transforma-se num ambiente preenchido pelo twitchiclete. Essa substância elástica é a matéria-prima do processo de comunicação em redes sociais, com suas peculiaridades e demandas. Para ter sucesso nesse espaço, é necessário agir, ou seja, preencher a twitbola com espírito e criatividade.

Com a leitura, você aprenderá como ter sucesso no Twitter. Poderá utilizar o poder da nova mídia para ampliar sua rede de amigos, contatos profissionais ou montar a operação on-line de um negócio de sucesso. Saberá como interagir com as redes sociais das quais participa, com segurança e confiança, aprendendo hábitos e técnicas para manter a integridade de seu computador e sua privacidade digital.

Todas as recomendações dadas na obra foram testadas na prática pelo autor, que partiu do zero para formar uma Rede Pessoal Virtual com milhares de contatos e amigos.

Twitter, Chiclete & Camisinha

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?

Aprendendo JavaScript

Pedro Rogério — Fri, 14 May 2010 14:47:49 +0000

Se você quiser usar JavaScript para aproveitar os navegadores poderosos que existem hoje, Aprendendo JavaScript oferece uma cobertura completa e compreensível dessa linguagem não convencional, porém essencial para o desenvolvimento para web. Você aprenderá desde tipos primitivos de dados até recursos complexos, incluindo elementos JavaScript relacionados a Ajax e efeitos de páginas dinâmicas. No final deste livro, você conseguirá trabalhar até mesmo com as bibliotecas e aplicações web mais sofisticadas.

Ampliada com melhores práticas e exemplos do uso de JavaScript, esta edição mostra a você como integrar a linguagem com o ambiente do navegador, além de como praticar técnicas apropriadas de codificação para websites que suportem os padrões.

Com este livro, você irá:

Aprender a estrutura de uma aplicação em JavaScript, incluindo instruções básicas e estruturas de controles.
Identificar objetos JavaScript: String, Number, Boolean, Function e outros.
Usar ferramentas de depuração de navegadores e técnicas de correção de erros.
Entender a manipulação de eventos e aplicações em JavaScript com formulários.
Desenvolver com Browser Object Model, Document Object Model e objetos personalizados que você criar.
Aprender sobre cookies de navegadores e técnicas mais modernas de armazenamento no lado cliente.
Obter informações detalhadas sobre o uso de XML ou JSON com aplicações Ajax.

“Seja você um programador iniciante ou experiente procurando uma nova linguagem, eu certamente recomendaria Aprendendo JavaScript. A abordagem direta de Shelley ajudará você a dominar o básico e as nuances da linguagem para melhor usá-la em seu próprio website.”- Anthony T. Holdener III, autor de Ajax: The Definitive Guide, da O’Reilly.

Aprendendo JavaScript segue princípios de aprendizagem já comprovados que ajudam a assimilar os conceitos em um ritmo tranquilo, de modo que você entenderá como criar aplicações poderosas e com respostas rápidas em qualquer navegador.

Aprendendo 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?

Vaga Webdesign

Pedro Rogério — Tue, 11 May 2010 10:47:18 +0000

A empresa Pakua IT Systems está em busca de um WebDesigner para fazer parte de sua equipe. Qual é o perfil desse profissional?

Profissional criativo, dinâmico e inovador, em busca de desafios e desenvolvimento profissional. Comprometido com prazos e atento a detalhes. Que goste de atuar com grandes empresas.

São necessários conhecimentos em:

HTML
CSS
WebStandards
Código Cross-Browser
Usabilidade
Dreamweaver
Photoshop
Flash

Faixa salarial: R$ 1500 a 1800 (CLT) + benefícios (VA, VT e plano Médico).
Região da AV. Paulista – SP.
Horário de trabalho: 2ª a 6ª das 9 às 18hs.
Início imediato.

OBS: IMPRESCINDÍVEL APRESENTAÇÃO DE PORTIFÓLIO ON LINE. ENVIAR CURRÍCULO E PORTIFÓLIO PARA carreira@pakua-it.com COM O ASSUNTO: WEBDESIGN

Vaga Webdesign

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?

Gerando ID Alfanumérico único

Anderson Custódio — Sat, 08 May 2010 20:58:33 +0000

Olha eu de novo aqui :) Não apareço faz tempo, muito trabalho e etc… Acho que quase ninguém me conhece, mas em fim, estou de volta e espero que gostem do post :D

Como está na moda URLs curtas, acho que muita gente vai gostar e achar interessante, vou citar duas soluções, a segunda eu não usaria.

Gerando aleatoriamente

Se você reparar no código abaixo a pré configuração gera IDs no mesmo estilo que do YouTube, a intenção foi exatamente esta, usei este mesmo padrão em um portal que estou montando, serão postados muitas fotos e vídeos diariamente, achei esta uma excelente solução e fiz uma função bem simples e funcional.

Com uma pequena configuração você pode gerar URLs Curtas e Únicas, estilo os encurtadores de URL.

Por exemplo: uid('tabela.campo', 5); Com isso a função gera um ID único com 5 caracteres, se já existir um igual gera outro.

Se por algum motivo você querer gerar um ID gigantesco e não comparar no banco de dados, você também pode: uid('false', 200);

Você pode tirar números e/ou letras da variável $s como quiser, vai funcionar normalmente sem ter que modificar alguma parte do código.

function uid($tc = false, $l = 11) {
		$s = 'abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ-_';
		$uid = null;
		$loop = false;

		do {
			while (strlen($uid) < $l)
				$uid .= $s[mt_rand( 0, (strlen($s) - 1) )];

			if (preg_match('#([a-z0-9_-]+).([a-z0-9_-]+)#', $tc, $tc)) {
				$loop = mysql_query("SELECT COUNT(*) FROM `$tc[1]` WHERE `$tc[2]` = '$uid' LIMIT 1") or die ('Erro ao verificar uid');
				$loop = mysql_fetch_array($loop);
				$loop = $loop[0];
			}	

		} while($loop);

		return $uid;
	}

Gerando com base no ID

O outro estilo é o do twitpic, este gera IDs Alfanuméricos basendo-se pelo ID Numérico do registro. Vou tentar explicar como funciona.

1, 2, 3…9, a, b, c…z, 10…19…1z…2z………9z…a1

Deu pra entender? Cheguei a pensar que seria uma excelente solução, mas casos como: twitpic.com/gay, twitpic.com/viado e twitpic.com/cu, fizeram eu mudar de idéia, até pensei em tirar as vogais desta seqüencia, mas poderia acontecer de twitpic.com/kct. Pensei também de alguma forma fazer um array com IDs “proibidos”, mas se você analisar o código desta solução verá que fica complicado contornar isso.

Existem outros métodos usando umas funções do PHP, tem até o uniqid(), mas não achei muito legal e o texto ficaria muito grande e cansativo falando disso. :D

Quando tiver tempo vou escrever um post falando sobre campos case insensitive no banco de dados, para usar em conjunsto com esta função.

Até a próxima, qualquer dúvida é só perguntar! ;D

Gerando ID Alfanumérico único

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?

Por que resolvi largar a faculdade

Pedro Rogério — Tue, 27 Apr 2010 12:26:38 +0000

Tudo, relativamente tudo que aprendi sobre desenvolvimento web foi sozinho. Nunca fiz curso pra nada, sempre fui de ficar fuçando nas coisas para tentar descocbrir como elas funcionavam, e com HTML e CSS não foi diferente.

Foi assim que nasceu esse blog, através da necessidade de aprender coisas novas, que acabou se tornando um canal de aprendizado para vários desenvolvedores. Mas não bastava eu ser um autodidata, eu precisava de um diploma para atestar meus conhecimentos para a sociedade.

Foi então que no ano passado resolvi iniciar o curso de Web Design, foi onde começaram os pesadelos. Vocês sabem o que é lidar com professores totalmente despreparados? Já mostrei a vocês uma vez a minha indiguinação sobre a qualidade do ensino superior no Brasil, e não pensem que depois disso não corri atrás da coordenação do curso procurando alguma solução, que foi em vão.

Para vocês terem idéia de como a coisa era tão feia, um belo dia o professor nos pediu para desenvolver um logotipo, lá estava eu aplicando meus dotes quando o bendito me pega para conversar e me diz o seguinte:

Legal esse logo que você está fazendo. Eu mesmo estou fazendo um logo para um cliente, já fiz 35, agora que estou chegando no que ele quer.

Fora outros acontecimentos que ocorreram que me deixaram abismado com o curso e me fizeram cursar somente 2 semestres e agora estudar por conta própria. Se é para ir para a faculdade somente para encher linguiça e ficar jogando meu dinheiro fora, prefiro ficar em casa no Twitter que eu aprendo muito mais.

Aposto que existem várias pessoas nessa mesma situação, na dúvida se largam ou não da faculdade. Querem meu conselho? Façam o que eu falao mas não façam o que eu faço.

Por que resolvi largar a faculdade

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?