Pergunte-me algo

Olá todos!!! Primeiro post de 2010.

Esse serviço aqui poucos conhecem. Ele é semelhante ao Twitter, o mesmo esqueminha de seguir amigos e ser seguido, porém com uma proposta um tanto diferente, a questão agora é: “PERGUNTE-ME ALGO”. Pode ser divertido perguntar algo a qualquer hora do dia à algum de seus seguidos ou não-seguidos. Experimenta e me conta o que achou!

Dá uma olhada:  http://www.formspring.me/sabbota

Feliz Natal para você!

Mais um Natal e eu quero desejar à todos que acompanham o blog, a maioria são leitores discretos que vêm apenas consultar alguma coisa, uma excelente noite de Natal. Que a magia e a sensação de paz e que eu sinto nessa época esteja com todos vocês, porque o Natal é bom demais, né não? Dêem presentes, recebam os seus, não espere receber, dê antes. Perdoe, abrace, pense com amor no coração.

<script>alert(‘FELIZ NATAL!’);</script>

<?= “FELIZ NATAL!”  ?>

<%= “FELIZ NATAL” %>

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. :P

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

diaristaUm 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!

thumb_carrinhoComprasBom, 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.

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.

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:

 img_textarea_rico

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!


Henrique Eduardo Araujo

Twitter

Categorias

Leituras Importantes:

Dias p/ o Aniversário do Blog

Aniversário deste blog

Catraca

  • 27,611 visitantes
Licença Creative Commons