O HTML 5

Se você achava que num futuro próximo todos os navegadores “iriam falar a mesma língua” e a dor de cabeça de construir código compatível com todos eles iria acabar, pode tirar o cavalo da chuva, porque tem coisa revolucionária vindo por aí. Apresentando… o HTML 5!

Principal mudança entre o HTML atual para o 5 já deve ter sido imaginada por alguns desenvolvedores, está na Semântica, no significado da estrutura html do seu site. No momento em que estávamos acostumados a criar um <div id=”rodape”> agora a galera nos ajudou, bastando um <footer> , bem, além disso temos também o seguinte:

• Tags com valore semânticos.  adição de valores semânticos com a criação das geniais tags footer, header, time, nav por exemplo;
• Áudio e Vídeo.  incluir vídeo e áudio era coisa de outro mundo? não mais! Foram criadas as tags <audio> e <video> que fazem com que essas mídias sejam incluídas numa página sem a necessidade de plug-ins extras. Estuda-se até o caso de incluir legenda nesses vídeos, imagina só! Tudo isso totalmente “de grátis”;
• Desenhos dinâmicos. o novíssimo HTML 5 permite que você trabalhe com os arquivos vetoriais baseados em XML e com código aberto, os chamados SVG (Scalable Vetorial Graphics);
• Drag and Drop. sim, agora vai dar para mover objetos e customizar a experiência do usuário na página com apenas algumas poucas linhas de código;
• Geolocation API. você vai poder localizar os dados de um usuário facilmente, sem a necessidade de depender de sites externos para isso;
• Armazene dados no cliente. existirá uma espécie de base dados no computador do cliente, da até pra trabalhar offline! Isso vai dar pra fazer estrago com Javascript.

Essas novidades são o “coração” do novo HTML, mas a página que contém a documentação tem uma rolagem sem fim.

Mas eu já posso usar?

Na minha opinião pessoal eu acho que ainda não é viável cair de cabeça na utilização da liguagem, mas estudá-la já está na hora. A documentação ainda é muito nova, sua aplicação precisaria de uma flexibilidade para mudanças. A documentação final está prevista para 2012, então ainda há tempo.

Pense no seu público-alvo e faça seus testes com prudência. O Internet Explorer 6 e 7 não oferecem suporte ainda, porém existe um Javascript, capaz de fazer estes navegadores interpretarem HTML 5 ,  em todos os artigos que li para elaborar este meu os escritores e blogueiros não aconselham você esperar a empresa do tio Bill Gates para um suporte completo dos IE ao HTML 5, isto duria séculos, mas também não é pra menos né, até hoje não acertaram com o IE8. Já com o Chrome e o Firefox, apartir das versões 3.0,  a história é diferente e você consegue sim ver as mágicas acontecerem. 

E o que mais?

Tá aí…

<article>: Define um artigo.
<aside>: Define algum conteúdo relacionado ao artigo.
<audio>: Define um streaming de áudio em um documento HTML
<canvas>: Define a criação de gráficos em uma página web
<command>: Define um botão de comando, como um radiobutton, uma caixa de seleção ou um botão.
<datagrid>: Define uma lista de dados selecionáveis. O datagrid é exibido como uma árvore.
<datalist>: Define uma lista de dados selecionáveis. Utilize esse elemento juntamente com o elemento input, para fazer uma lista suspensa para um valor de entrada.
<datatemplate>: Define um recipiente para o modelo de dados. Deve conter elementos filho que são <rule> para definir um modelo.
<details>: define os detalhes de um elemento, no qual o usuário pode ver, e clicar para ocultar.
<embed>: Utilizado para incorporar conteúdo no HTML, atuando como um plugin.
<eventsource>: Define um destino para eventos enviados por um servidor.
<figure>: Especifica ilustrações, imagens, fotos, associado juntamente com alguma legenda.
<footer>: Define o rodapé de uma seção ou documento. Normalmente, contém o nome do autor, data em que o documento foi escrito e / ou informações de contato.
<header>: Define o cabeçalho de uma seção ou documento.
<mark>: Define texto marcado. Utilize a tag <mark> se você quiser destacar partes do seu texto
<meter>: Define uma medição. Usado apenas para medições com conhecimento de um valor mínimo e um valor máximo.
<nav>: Define uma seção de links de navegação.
<nest>: Define o ponto de incício para criação de elementos em um <datatemplate>, utilizado em conjunto com o elemento <rule>.
<output>: Define a saída de diferentes tipos de dados, por exemplo, o cálculo efetuado por algum script.
<progress>: Define o progresso de uma tarefa de qualquer tipo.
<rule>: Define as regras para atualização de um datatemplate. Usado em conjunto com os elementos <datatemplate> e <nest>.
<section>: Define as seções em um documento. Tal como capítulos, cabeçalhos, rodapés, ou quaisquer outras seções do documento.
<source>: Define recursos para elementos de mídia, como <audio> e <video>.
<time>: Define tempo ou data, ou ambos.
<video>: Define vídeo, como um clipe de filme ou vídeo de outros fluxos.

(fonte: pinceladas da web)

A W3C liberou a documentação oficial no meio do ano de 2009 mas ainda é passível de alterações portanto não é definitiva. Ela é a mais completa e confiável fonte de informações sobre a linguagem e você encontra aqui neste link. (inglês).

Existem exemplos?

 Haram… olha aí:

http://bit.ly/1Hw1ED (resize & drag and drop de fotos)
http://bit.ly/HkYnp (post-its que são arrastados e armazenados offline)
http://www.html5gallery.com (galeria de sites em html5)
http://bit.ly/fPMxn (resize & drag and drop de videos)
http://bit.ly/2F3i1K (desenho escalável de um tigre em SVG)
http://bit.ly/1Hw1ED (resize & drag and drop de fotos)

(fonte: Luiz Tiago)

E afinal?

É uma questão sem solução atualmente adequada. Se por um lado existe um suporte à navegadores desatualizados o que cria a disponibilidade à todos os seus usuários, por que não usar?  Por outro lado, se ainda não existe uma documentação finalizada e consistente, para que começar?

Fica com você!

Vamos discutir sobre o assunto?

Fernando e a diarista

Um pouco de humor não faz mal.  Há alguns meses atrás postei aqui quem era o Fernando e alguns acontecimentos de sua vida que eram simplesmente bizarros. Pois bem, tem muita história pra contar, mas essa de hoje foi impagável. Como eu já citei aqui ele ta em São Paulo e a cada semana tem uma aventura um tanto bizarra acontecendo nessa nova vida dele por lá. Ele é praticamente um personagem de desenho animado. Segura aí a de hoje:

Fernando: oi e ae quanto q deu?

karla: vc ja tinha me perguntado quanto eu cobrava pra fazer uma faxina e eu ja tinha te respondido

Fernando: 50 reais ne

karla: vc anda com a cabeça na lua é?

Fernando: auhauhauhuha

karla: tinha tanta bagunça no quarto dele  q cheguei a pensar q ele gostasse de dormir na sujeira

karla: o seu quarto não tem nada

karla: pelo menos uma cama e um fogão quase morri de fome e sede

Fernando: nada.. tem agua la..

karla: mas eu ja falei, naõ é frescura não , eu não consigo beber água quente nem a pau

karla: A mãe de vcs sabem como vcs vivem? sem se alimentar direito dormindo no chão aposto q não

Sem comentários! Aguardem novidades!

Emulador do .NET para IE7

E aí leitor! Você também é designer de aplicações em .NET? Então isto aqui pode te interessar…

É diante de um problema que a gente aprende coisas novas. Eu estive esta semana “brigando” com a meta tag:

 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

no sistema de Extranet da SET.

Pra quem não sabe esta tag serve para fazer o Internet Explorer 8 renderizar uma página como se fosse sua versão 7, isto evita o trabalhão de adaptação ao novo navegador por parte dos desenvolvedores, como já sabemos, existem problemas de estética e Javascript que impedem que a página funcione corretamente dependendo do tipo e do versão de navegador.

O que ocorre é que em aplicações mais robustas e que possuem o arquivo Global.asax, pelo menos no meu caso, aplicar esta tag simplesmente no <header> não adianta. Por alguma razão a qual não era meu foco investigar, o navegador não faz a página ter o mesmo funcionamento do antigo navegador pois esta não é uma solução infalível. Existe também o recurso que o IE8 oferece que é a Solução de Compatibilidade, que tem a mesma função da tal tag mas em alguns casos é possível que esta solução não seja uma solução de fato. A gente tem um CMS da IVIA rodando por lá, o Content, onde há relatos de que fazer com o que o IE8 se comporte como IE7 resultou em alguns problemas.

Aí consultei um ex-colega de trabalho, que jogou no Google, que descobriu um artigo do Vitor Canova, desenvolvedor .NET do Rio Grande do Sul, que é este aqui.

Bom, acontece que esta solução não funcionou porque o .NET é anterior ao que usamos, então, eu como um cara legal que sou , tive a idéia de aumentar as informações sobre o tema, e otimizar a solução já escrita para ajudar colegas que estão precisando de ajuda por aí. Então fizemos uma readaptação do código para uma solução mais pontual em .NET 2.0. Seguem os passos mastigadinhos pra que você possa tentar aí:

1. Primeiro procure a Master Page do seu projeto, e inclua lá, como primeira meta-tag de toda a página, a tag <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ /> (no cabeçalho logicamente);

2. Compile e rode no navegador. Teste a aplicação e dá uma boa olhada se está tudo ok. Se estiver você nem precisa pular para o próximo passo, senão, vamos em frente.

3. Procure o GLOBAL.asax da sua aplicação (se não existir, então certamente você não precisará de nada além da meta-tag X-UA-Compatible que falei ali acima);

4. Abra o arquivo e crie as funções:

/// <summary>
    /// Método para preparar a renderização compatível com o IE8 (Emular IE7)
/// </summary>
    protected void Application_PreRequestHandlerExecute(object sender, EventArgs e)
    {
        Page p = this.Context.Handler as Page;
        if (p != null)
        {
            p.PreRenderComplete += new EventHandler(p_PreRenderComplete);
        }
    }
/// <summary>
   /// Método que associa o cabeçalho das páginas à compatibilidade IE8
/// </summary>
    protected void p_PreRenderComplete(object sender, EventArgs e)
    {
        Page page = sender as Page;
        if (page.Header != null)
        {
            HtmlMeta meta = null;
            foreach (Control var in page.Header.Controls)
            {
                HtmlMeta metaAux = var as HtmlMeta;
                if (metaAux != null && metaAux.HttpEquiv == "X-UA-Compatible")
                {
                    meta = metaAux;
                }
            }
            if (meta != null)
            {
                page.Header.Controls.Remove(meta);
                page.Header.Controls.AddAt(0, meta);
            }
        }
    }

5. Agora você precisa recompilar tudo, rodar novamente a aplicação e boa sorte.

Deu tudo certo? Me conta depois.

Como criar um Carrinho de Compras com PHP

Opa, saudações à todos!

Bom, negócio é o seguinte, há alguns dias atrás eu escrevi sobre Como criar um Carrinho de Compras com PHP  lá no Help Masters. O artigo foi baseado num esquema de Borderô de pendências que elaborei na última solicitação do cliente NEPROM. O ‘pulo do gato’ de um esquema de Carrinho de Compras está num array que pode ser manipulado na Sessão do usuário. Com uma base de dados apenas para fazer a listagem dos itens pré-cadastrados na base de dados, logicamente.

Um pouco de Javascript e um pouco de criatividade fará você desenvolvedor criar algo bem interessante, por exemplo, usando AJAX para inserir, excluir e mostrar os itens do carrinho, mas este modelo eu fiz é mais simples, pra fins didáticos.

• Dá uma olhada

Nos vemos em breve.

25 anos

Opa! Mais um 16 de Outubro, é mole? Ainda bem que estou vivão e vivendo com saúde, e isso é o mais importante. Quero aproveitar e agradecer à todos os leitores e aos discretos “comentadores”. Continuem participando porque em 2010 tem novidades.

Um abraço em todos!

Virei colunista pela primeira vez!

Não sei se porque é mês do meu aniversário, mas Outubro chegou trazendo uma maré boa. Um novo cliente, que não virou porque o negócio para mim ia ser inviável,  o meu diploma da faculdade que finalmente saiu e um e-mail do site Help Masters no dia 01 de Outubro à 1:30 da tarde. O e-mail era um convite para eu me tornar colunista do portal que é recém criado mas que está crescendo rapidamente. Opa! Isto é sério? Não pensei uma vez… to dentro!

Eu me lembro que já quis ser colunista. Já andei por alguns portais da área e quis ter meu nome, uma foto e um artigo meu no ar. Ser autor de um conteúdo técnico na Internet, à disposição de qualquer usuário da rede é além de um prestígio uma responsabilidade, e responsabilidades nos fazem crescer na vida.

Então para quem desejar visitar meu primeiro artigo, ele foi uma readaptação de outro já publicado aqui:  AJAX: campo de auto-sugestão.

Teste seus sites do IE 5.5 até o IE 8

E ai, colegas webdesigners (e os não-webdesigners pra não causar ciúmes)!   Há algumas semanas o Internet Explorer 8 passou a fazer parte obrigatoriamente dos navegadores dos testes nossos de cada dia. Isto porque ele já está entrando nos lares e empresas silenciosamente via atualização do Windows XP e logo mais para Vista e Windows 7.

Um novo navegador assusta quem já faz testes em uns 6. Aí sempre vem um salvador da pátria que inventa a solução mirabolante e nos faz relaxar um pouco, neste embalo do novo IE descobri o IE Tester. Depois da ferramenta Múltiplos IE’s, agora em um único navegador também é possível testar seus sites no IE 5.5, IE 6, IE7 e IE8. Acreditem.

• Baixe aqui o IETester e veja com seus próprios olhos!

Essa eu vi no Twitter do Fernandrácula direto de Sampa!

Não esquece de me dizer se gostou!

Sim. Você agora pode ter um textarea daqueles!

Esse não foi de minha autoria não, eu só estive procurando até achar mesmo. A idéia era ter um editor destes assim:

 

Ele precisava ser:

• De graça;
• Mais ou menos rico de recursos
• Funcional
• Fácil de customizar

Esse é o tipo da coisa – imaginei eu – que nesse mundo Web rico de conteúdo dos dias atuais deve existir escondido em algum lugar, por isso eu jamais construiria um troço assim porque não é um objetivo meu na vida. Então… Google pra cá, Google pra lá, Google pra cá, Google pra lá… Opa!

Vejam, a solução que mais respondeu aos pré-requisitos foi Cross-Browser Rich Text Editor (RTE). Dá pra ver na tela o código gerado pelo campo, dá pra enviar para um banco de dados, enfim, manipular a saída como bem entender. Eu baixei, instalei, configurei e traduzi para o português, mas distribuí-lo traduzido por conta e risco não é legal. Portanto baixem em: http://www.kevinroth.com/rte/

Veja um demo aqui

Sucesso galera!

Site da TV Record invadido

Eu estava voltando pra casa de um game na casa de um amigo (Val – ele tem esse nome mas é Hetero) que inclusive não ocorreu porque o provedor do jogo furou com a gente. Aí logei no meu Twitter, bom, acreditem, eu sigo a Adriane Galisteu – de verdade –  e lendo as novidades dos últimos minutos olha o que ela publicou:

Fonte: Twitter da Adriana Galisteu (http://twitpic.com/e2us1)
(Clique para ver maior)

Como profissional da Web seria anti-ético de minha parte concordar com invasões à sites ou de qualquer gênero, e o problema do Edir Macedo é somente dele e dos fiéis de sua igreja,  por outro lado esta aí foi a forma encontrada pelo grupo hacker para expelir seu protesto contra esse escândalo. 

Vamos em frente né…

Curso de AJAX de uma aula só

Ok! Já chega dessa história de evitar usar esse negócio que é tão comentado hoje em dia, e que você só conheceu “por cima” por achar engenhoso e complicado de meter a mão. Vamos aprender (ou pelo menos tentar)! E pra você que já sabe, vai confirmar o aprendizado ou até mesmo me ensinar

Eu já havia comentado sobre ele aqui  mas meu objetivo agora é começar do 0 (zero), passo-a-passo, um exemplo da aplicabilidade de PHP + AJAX + MYSQL, pra fazer você entender cada linha de código e o que cada coisa faz.

Pronto(a)? Go!

1. O que faremos?

Para os viajantes criativos este exemplo será uma base parar a criação de vários outros brinquedos úteis em suas páginas apartir de agora. Faremos um campo auto-sugestão. Apartir de um campo de texto simples, à medida que um usuário vai entrando com um texto, a página vai mostrando o que provavelmente ele está procurando.

 1.1 E vou precisar de que?

Um bloco de notas, um banco de dados MYSQL ou outro, e um servidor que rode PHP de qualquer versão.

2. Começando…  (azul: código, verde: comentário)
 

• Crie: form.html

Insira lá o código abaixo e vamos aos comentários:

<html>
<script type=”text/javascript”>
var http = false;

/*
Este bloco IF é necessário antes de começar qualquer implementação do AJAX. Ele cria os objetos específicos de cada navegador para manipulação das solicitações ao servidor. Os navegadores Mozilla Firefox, Safari, Opera e Konqueror atualmente usam XMLHttpRequest, que é com um objeto JavaScript nativo. O Internet Explorer foge desta regra e implementa o recurso ActiveX. É por isso que a forma de se iniciar uma implementação de AJAX nas páginas acontece de  forma diferente.
*/

if(navigator.appName == “Microsoft Internet Explorer”) {
  http = new ActiveXObject(“Microsoft.XMLHTTP”);
} else {
  http = new XMLHttpRequest();
}

/*
Esta aqui é a função da nossa mini lógica de negócio. Ela vai receber a entrada do usuário através do campo texto chamado “nome”. Lá no campo “nome’, à medida que uma tecla é digitada a função “procurar()” vai ser acionada (onKeyUp=”procurar(this.value)”), ou seja, a cada entrada do usuário o Javascript será acionado e enviará de forma totalmente rápida e transparente os dados para a função PHP, que faremos logo adiante; assim, em milissegundos a coisa vai acontecer.*/

function procurar(nome) {
  http.open(“GET”, “buscaPessoas.php?nome=” + nome, true);
  http.onreadystatechange=function() {
    if(http.readyState == 4) {
      document.getElementById(‘labelNome’).innerHTML = http.responseText;
    }
  }
  http.send(null);
}

/*

Explicando o código de forma mais técnica:

 O objeto (http) criado acima vai receber os parametros semelhantes à um formulário normal <form>: método  de submissão e página que receberá os dados do form. O “onreadystatechange” manipula eventos na página, normalmente uma chamada qualquer a uma função JavaScript. O “readystate” determina a situação atual da solicitação. Varia de 0 a 4, sendo 0 não-iniciada; 1 carregando, 2 carregada, 3 em processamento, 4 concluída. Iremos passar portanto, quando a página estiver concluída (status 4) o resultado da nossa futura função php no “labelNome”. Daí o “http.send” envia a solicitação ao servidor, podendo passar algum parâmetro, o que não é o nosso caso, já que estamos fazendo um “GET”  e passando parâmetro via URL (“nome”).

*/
</script>

<!– Aqui nosso campo nome e o método que acionará a função procurar() que criamos acima. A cada tecla digitada a função Javacript vai ser acionada, que consequentemente fará a página buscaPessoas.php enviar o valor do campo para ser consultado… isso veremos ali na frente. –>

Buscar um nome: <input type=”text” name=”nome” size=”12″ onKeyUp=”procurar(this.value)”> <span id=”labelNome”></span>

</html>

 
Ok. Já temos o formulário e as funções necessárias ao nosso Auto-sugestão do lado do cliente. Agora vamos ao código “server-side” que magicamente parecerá “client-side” pra você.

• Crie agora: buscaPessoas.php

Insira nela o código abaixo e vamos aos comentários:

<?php

/*
Se você tem um banco MYSQL à disposição, vamos usá-lo. Teste se consegue conectar, e vamos em frente…

*/
function sugerir($nome) {
 
 //crie a sua conexão php ao seu banco, neste exemplo usei MYSQL:
 mysql_connect(“enderecodoseubanco”,”login”,”senha”);
 mysql_select_db(“nomedoseubanco”);
 
 /*
crie uma tabela “usuario” e uma coluna “nome”. Daí você insere uns nomes lá para utilizarmos aqui. Então, faz um Select procurando por nomes que contenham o que foi digitado lá no formulário pelo usuário. Entendeu né?. Ah, o “like” do SQL significa: com o termo, e as porcentagens descartam início e fim deste trecho, podendo ele estar no meio de uma palavra.

*/
 $sql = “SELECT nome FROM usuario where nome like ‘%” . $nome . “%’” ;
 
 $qry = mysql_query($sql); //faz a consulta...
 $linha = mysql_fetch_array($qry); //joga o conjunto de resultados numa variável  
  $num = mysql_num_rows($qry); //traz o número de linhas retornadas
 
 
 /*
 Se nada for digitado no campo ou a consulta não retornar resultados, mostra-se uma mensagem (opcional – você pode deixar em branco se quiser). Se conseguiu encontrar um registro que bateu lá no banco, então mostra pra o usuário.

 */
 if($nome == “” || $num == 0) {
  return ‘Ops! nada encontrado.’;
 } else {
  return $linha['nome'];   
 }
 
}

//Aqui mandamos o php utilizar o que chegou pela URL (nossa função “procurar(nome)” , lembra?)
echo sugerir($_REQUEST['nome']);
?>

E é só. Rápido, não? Agora o que falta é você ler tudo, entender direitinho e testar. Vai por mim, ler tudo neste caso aqui vai te ajudar a virar um verdadeiro conhecedor de AJAX e consequentemente ter sucesso criando futuras aplicações. Ah, eu prometi nunca publicar o meu projeto final de curso na rede, mas uma situação como essa eu acho merecedora de um material de apoio escrito à próprio punho pelo papai aqui. Então, agora vamos aos links:

• Baixar os arquivos mastigados
• Baixar minha monografia “TECNOLOGIA ASYNCHRONOUS JAVASCRIPT AND XML (AJAX) APLICADA A UM SISTEMA WEB” (Dezembro de 2007)

Não esquece de vir contar o que é que deu nesta sua jornada, ok?