Pinceladas da Web - XHTML, CSS, JavaScript e WebStandards

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?

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.

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?

O que faz um Arquiteto de Informação?

Pedro Rogério — Tue, 13 Apr 2010 14:03:03 +0000

Quer saber o que faz o pedreiro das interfaces digitais? Assista o vídeo abaixo:

Via: Arquitetura de Informação

O que faz um Arquiteto de Informação?

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?

Mobile User Experience: O que um Web Designer precisa saber

Pedro Rogério — Thu, 08 Apr 2010 12:36:49 +0000

Esses slides passam através de uma forma conceitual como lidar com o conhecimento das mudanças envolvidas na independência dos dispositivos móveis e como eles devem se adaptar a nossa mente.

Mobile User Experience: What Web Designers Need to Know

Mobile User Experience: O que um Web Designer precisa saber

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?

As engines de JavaScript

Jeronimo Fagundes — Mon, 05 Apr 2010 15:20:55 +0000

Este é um post rápido de se ler. Vai a título de curiosidade.

Com os lançamentos de novos navegadores e novas versões nos últimos anos, o desempenho de JavaScript melhorou muito. Muito disso se deve a melhorias (e mesmo substituições completas) das engines de JavaScript de cada navegador.

A seguir, uma pequena lista das engines de JavaScript atuais, da mais rápida para a mais lenta.

Carakan – é a engine lançada no Opera 10.50. Testes demonstram que ela é a engine mais rápida atualmente.
V8 – a engine do Google Chrome. É muito importante na história recente dos browsers, por ter sido a primeira a dar um salto de desempenho frente às demais engines. Tem praticamente um empare técnico com a Carakan em termos de desempenho, perde por quase nada.
SquirrelFish – antigamente era chamada JavaScriptCore, mas adquiriu seu novo nome após ter integrado o JIT (Just-In-Time compilation). É usada no Safari, sendo parte do WebKit.
TraceMonkey – a engine lançada no Firefox 3.5. Uma evolução da antiga SpiderMonkey, que teve uma grande melhoria de desempenho.
JScript – engine do Internet Explorer, faz parte da engine de layout Trident. Perto das demais engines, tem um péssimo desempenho quanto a tempo de execução.

E essas são as principais engines do mercado atualmente. Espero que tenha sido interessante aos leitores saber dessas informações.

As engines de 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?

CSS3 Selectors & JavaScript ‘this’

Pedro Rogério — Wed, 31 Mar 2010 12:14:29 +0000

Em mais um vídeo do site Doctype.tv, eles dessa vez irão nos ensinar a trabalhar com seletores CSS3 e nos mostrar o significado da variável “this” do JavaScript:

CSS3 Selectors & JavaScript ‘this’

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?