HTML5 – Parte 2

Continuando um pouco nosso HTML5, e finalizando, já que a idéia era apenas dar uma olhada paran entender um pouco as “novidades”.
Sobre internalização
O HTML5 nos da um bdi, que permite aos autores substituir o algoritmo bidirecional Unicode e fazer o texto mais compreensível.
para saber um pouco mais sobre bdi “HTML5(http://rishida.net/blog/?p=564)”.

Alguns idiomas tem scripts que não são alfabéticos em tudo, mas que expressão uma idéia, em vez de um som. O HTML5 nos da 3 novos elementos para marcação de texto ruby: ruby, rt e rp.
para saber um pouco mais(http://my.opera.com/tagawa/blog/the-html5-ruby-element-in-words-of-one-syllable-or-less)” by Daniel Davis.

A maioria das pessoas estão cientes de que HTML5 nos dá muitos novos elementos para descrever partes de uma página da Web, como header , footer , nav , section , article , aside e assim por diante.

A representação de uma figura com algum conteúdo de fluxo, opcionalmente, com uma legenda, que é auto-suficiente e é normalmente referenciado como uma única unidade do fluxo principal do documento.

O elemento pode assim ser usado para anotar ilustrações, diagramas, fotos, listas de código, etc …

<picture alt=”angry pirate”>
<source src=hires.png media=”min-width:800px”>
<source src=midres.png media=”min-width:480px”>
<source src=lores.png>
<!– fallback for browsers without support –>
<img src=midres.png alt=”angry pirate”>
</picture>

Há um grande problema com isso. Em navegadores que não suportam figuras, a imagem não seria exibido, pois o figura elemento seria completamente ignorado. O conteúdo do elemento credit seria exibido, porque é apenas texto.  Então, você poderia pelo menos mostrar estes créditos para qualquer imagem em navegadores mais antigos.

HTML5 tem um time elemento, isso permite que você possa anotar uma data legível. Não importa o que se passa entre as tags, porque esse é o conteúdo para as pessoas lerem.  Então, você poderia usar um dos seguintes:

 

<time datetime=”1982-07-18″>The day the woman I love was born</time>

<time datetime=”1982-07-18″>Priyanka Chopra’s birthday</time>

Seja qual você escolher, a máquina ainda sabe a data que você quer dizer por causa do atributo datetime, formatadas como YYYY-MM-DD .

Se você quiser adicionar um tempo, você poderia: separar o tempo entre a data com um T , e depois colocar o tempo no formato de 24 horas, terminada por um Z , junto com qualquer fuso horário offset.

Por exemplo, 2011-11-13T20:00Z would be 8:00 pm on 13 November 2011 UTC, enquanto 2011-11-13T23:26.083Z-05.00 seria pm 23:26 e 83 milissegundos no fuso horário escondendo 5 horas antes de UTC .

E quem disse que HTML(5) era barbada!?

 

HTML5 – http://www.edersonmelo.com/index.php/2011/11/24/html5/

Abraço

Anúncios

HTML5

Uma breve estudada sobre HTML5 e consigo entender o porque de tanta vontade que alguns tem de utilizar, como as API’s: armazenamento local, cache de aplicativos, serviços web, desenho 2-D e similares, mas traz ainda 30 elementos para marcar documentos e aplicativos, aumentando o número total de elementos disponíveis para mais de 100.
A semântica HTML5 é cuidadosamente projetada para ampliar a capacidade atual do HTML, sempre permitindo que os usuários de navegadores mais antigos consigam acessar o conteúdo.

 

 

Alguns elementos de apresentação
Elementos puramente de apresentação, como center, font e big são agora obsoletos. seu papel tem sido perfeitamente usurpado por Cascading Style Sheets. Não significa que você tem que se apressar e recodificar todas as páginas antigas. Pela mesma razão os atributos de apresentação foram retirados elementos de corrente, por exemplo, align a img, table, background no body e bgcolor na table.

O sempre mal utilizado frame, está ausente em HTML5. Se você tem vontade de usa-lo use um velho DOCTYPE para que suas páginas possam validar.
Além deste breve resumo, veja a lista exaustiva do W3C de elementos removidos e atributos (http://www.w3.org/TR/html5-diff/#absent-elements)

 

Elementos de apresentação redefinidos
Nem todos os elementos de apresentação foram retirados, alguns passaram por uma reeducação extensa e brilhante, surgindo uma nova semântica. Por exemplo, o small, já não significa “usar uma fonte pequena”, embora ele irá aparecer em uma folhas de estilo do navegador. Agora small representa comentários laterais, tais como letras pequenas:

Letras pequenas renúncias tipicamente características, limitações, restrições legais, ou direitos autorais. Letras pequenas às vezes também é usado para atribuição, ou para satisfazer requisitos de licenciamento.

O elemento u [agora] representa um intervalo de texto com um desarticulador, embora explicitamente prestados, a anotação não-textual, como a rotulagem do texto como sendo um nome próprio no texto em chinês (uma marca de nome chinês propriamente dita), ou rotulagem o texto como ser grafadas incorretamente.

 

Nova semântica
Todos sabemos que video e audio assim como canvas que permitem gráficos 3-D utilizando webGL, então designers de jogos podem portar seus produtos para web. Como o bom e velho img são incorporados no conteúdo seja um arquivo, um URI de dados ou u JavaScript.
Ao contrário de img, eles tem abertura e fechamento de tags, permitindo fallback, portanto, os navegadores que não suportam a nova semântica pode ser alimentado com algum conteúdo.

Os elementos source e track  são elementos vazios(sem tag de fechamento) que são filhos de video ou audio.

O source aponta para um arquivo de origem diferente(WebM, MP4, Ogg Theora)

 

<audio controls>
<source src=bieber.ogg type=audio/ogg>
<source src=bieber.mp3 type=audio/mp3>
<!– fallback content: –>
Download <a href=bieber.ogg>Ogg</a> or <a href=bieber.mp3>MP3</a> formats.
</audio>

 

Neste exemplo, Opera, Firefox e Chrome irá baixar a versão mais recente do Ogg, enquanto o Safari e IE vai pegar a versão MP3. Chrome pode jogar tanto Ogg e MP3, mas os browsers irá baixar o arquivo de origem na primeira vez que eles entendem.  O conteúdo fallback entre as tags de abertura e fechamento é um link para baixar o conteúdo para o desktop e jogá-lo através de um tocador de mídia separado, e é exibido apenas em navegadores que não pode jogar multimídia nativa.

Para vídeo, você poderia usar um filme flash embutido hospedado no YouTube:

<video controls>
<source src=best-video-ever.webm type=video/webm>
<source src=best-video-ever.mp4 type=video/mp4>
<!– fallback content: –>


</video>

Obrigado e Continua …

 

 

>HTML5 Google Nova Zelândia

>O Google apresentou, na home do Search da Nova Zelândia, um doodle especial e animado, feito em HTML5, em comemoração aos 25 anos do Fulereno.

 Os fulerenos são a terceira forma mais estável do carbono, após o diamante e o grafite. Foram descobertos recentemente (1985), tornando-se populares entre os químicos, tanto pela sua beleza estrutural quanto pela sua versatilidade para a síntese de novos compostos químicos. Foram chamados de “buckminsterfullerene” em homenagem ao arquiteto R. Buckminster Fuller que inventou a estrutura do domo geodésico, devido à semelhança, daí advindo a denominação antiga desta forma de carbono.

Fulerenos uma vasta família de nanomoléculas superaromáticas, altamente simétricas, compostas de dezenas de átomos de carbono sp2-hibridizados.

Sua estrutura é em geral esférica, formada por hexágonos interligados por pentágonos, sendo estes últimos responsáveis pela curvatura da molécula e, conseqüentemente, por sua forma tridimensional. O representante mais conhecido da família dos fulerenos sendo o C60 (com 60 carbonos), um icosaedro truncado de simetria Ih, e um diâmetro de aproximadamente 1 nm.

Fonte(s): Wikipédia

Iniciativa Caelum na busca de emprego

A Caelum, renomada empresa em treinamentos e serviços estreou mês passado o site aondetrabalhar.com. A iniciativa visa ajudar alunos, profissionais e empresas que conhecem o trabalho da Caelum e possam confiar na busca de  profissionais cadastrados.

aondetrabalhar_edersonmelo

Segundo o blog.caelum.com.br de Fabio Kung:

A idéia principal do site é fazer as vagas atingirem os melhores desenvolvedores, de maneira simples. Pessoalmente, sempre achei irritante ter que preencher enormes formulários para poder começar a procurar por vagas. Pior ainda quando precisamos fazer upload de um arquivo do Word com o currículo!

A filosofia principal do site é simplicidade. Funciona como um job board (popular lá fora) e as empresas podem anunciar vagas de emprego a vontade. Detestamos burocracia: procurar boas oportunidades de emprego deve ser simples e fácil. Não é necessário se cadastrar, nem preencher formulários para buscar por vagas. Quer procurar por vagas de Java? De Ruby on Rails?

http://ondetrabalhar.com/java
http://ondetrabalhar.com/rails

Apenas em São Paulo?

http://ondetrabalhar.com/java/em/sao-paulo-sp

Estamos fazendo um trabalho forte de Search Engine Optimization (SEO) para fazer as vagas ficarem bem posicionadas nos principais mecanismos de busca. Além disso, fornecemos feeds para qualquer pesquisa e você pode acompanhar as vagas do seu agregador de RSS favorito. Em breve, também será possível receber emails com as vagas de interesse.

Outra enorme preocupação do OndeTrabalhar.com é fazer as vagas chegarem no público certo: os melhores desenvolvedores do mercado. Para isso, estamos fazendo diversos acordos com algumas das maiores comunidades de desenvolvimento do Brasil. Entre as que já posso citar estão o GUJ.com.br, o PortalJava, o RubyOnBr.org, o Ruby Inside Brasil e algumas comunidades de outras linguagens como PHP e Python ainda vem por aí. Em breve já aparecerão vagas de emprego do OndeTrabalhar.com em todos esses sites, inclusive por aqui no Blog da Caelum.

Caso exista alguma vaga aí na empresa onde trabalha, eu te peço um enorme favor: comente sobre o OndeTrabalhar.com ao responsável. Melhor ainda se você mesmo for o responsável e puder cadastrar a(s) vaga(s) por lá.

Se você tem interesse em fazer alguma parceiria conosco, para ter uma lista de vagas atualizada no seu site, blog, portal, ou comunidade, sem ter dor de cabeça tendo que gerenciar isso (inclusive remover vagas já preenchidas), entre em contato!

O OndeTrabalhar.com foi produzido pelo núcleo de Ruby on Rails da Caelum, do qual eu tenho um orgulho e felicidade enormes de ver crescendo!

Fonte:

blog.caelum.com.br de Fabio Kung

Abraço,
Ederson Melo – @edersonmelo

Pagamentos online com paypal e PHP

O uso do Paypal em sites tem sido muito empregado nos últimos tempos. Mas quando vamos pesquisar na web sobre o assunto, acabamos encontrando muitos posts, porém, todo iguais e isso inclui os erros também.  Encontrei 20 posts e todos iguais copiados de um único blog, do qual as configurações informadas não funcionam e os links para baixar o “API” em PHP não existe.

O objetivo do post é mostrar a simplicidade na utilização do Paypal em sites PHP.

paypal_logo_edersonmelo

Então vamos começar com o básico. O arquivo para download aqui ou sourceforge(que recomendo por estar sempre atualizado).

Extrair os arquivos do .zip, que devem conter os seguintes arquivos:
config.inc.php
Configuração do script
global_config.inc.php
Funções globais que serão usadas no script
payment.php
Botão para pagamento pré-configurado
orderform.php
Formulário pré-configurado para testes
process.php
Serve para processar o envio das informações de transação para o PayPal
success.php
Mensagem de resposta de sucesso ao enviar a transação para o PayPal
cancelled.php
Mensagem de Erro quando a transação falha.
ipn.php
Recebe informações da API do PayPal e interpreta os resultados
ipn_success.php
Executado somente se a transação tiver sido executado com sucesso
ipn_error.php
Executado somente se a transação deu erro

Fora o .css que não é preciso comentar pois nada vamos alterar nele.

Dentro da pasta includes você deve configurar o arquivo  config.inc.php, com a conta que você deve ter criado no PayPal.

<?php
/*
* config.inc.php
*
* EDERSON MELO
* Copyright (c) 2004 PayPal Inc
* Released under Common Public License 1.0
* http://opensource.org/licenses/cpl.php
*/

//Configuration Settings

$paypal[business]=”emaildaconta@meumail.com”;
$paypal[site_url]=”http://www.meusite.com/&#8221;;
$paypal[image_url]=””;
$paypal[success_url]=”paypal/success.php”;
//$paypal[success_url]=”paypal/ipn/ipn.php”;
$paypal[cancel_url]=”paypal/error.php”;
$paypal[notify_url]=”paypal/ipn/ipn.php”;
$paypal[return_method]=”2″; //1=GET 2=POST
$paypal[currency_code]=”USD”; //[USD,GBP,JPY,CAD,EUR]
$paypal[lc]=”US”;

$paypal[url]=”http://www.paypal.com/cgi-bin/webscr&#8221;;
//$paypal[url]=”https://www.paypal.com/cgi-bin/webscr&#8221;;
//$paypal[url]=”https://www.sandbox.paypal.com/cgi-bin/webscr&#8221;;
$paypal[post_method]=”fso”; //fso=fsockopen(); curl=curl command line libCurl=php compiled with libCurl support
$paypal[curl_location]=”/usr/local/bin/curl”;

$paypal[bn]=”toolkit-php”;
$paypal[cmd]=”_xclick”;

//Payment Page Settings
$paypal[display_comment]=”0″; //0=yes 1=no
$paypal[comment_header]=”Comments”;
$paypal[continue_button_text]=”Continue >>”;
$paypal[background_color]=””; //””=white 1=black
$paypal[display_shipping_address]=””; //””=yes 1=no
$paypal[display_comment]=”1″; //””=yes 1=no

//Product Settings
$paypal[item_name]=”$_POST[item_name]”;
$paypal[item_number]=”$_POST[item_number]”;
$paypal[amount]=”$_POST[amount]”;
$paypal[on0]=”$_POST[on0]”;
$paypal[os0]=”$_POST[os0]”;
$paypal[on1]=”$_POST[on1]”;
$paypal[os1]=”$_POST[os1]”;
$paypal[quantity]=”$_POST[quantity]”;
$paypal[edit_quantity]=””; //1=yes “”=no
$paypal[invoice]=”$_POST[invoice]”;
$paypal[tax]=”$_POST[tax]”;

//Shipping and Taxes
$paypal[shipping_amount]=”$_POST[shipping_amount]”;
$paypal[shipping_amount_per_item]=””;
$paypal[handling_amount]=””;
$paypal[custom_field]=””;

//Customer Settings
$paypal[firstname]=”$_POST[firstname]”;
$paypal[lastname]=”$_POST[lastname]”;
$paypal[address1]=”$_POST[address1]”;
$paypal[address2]=”$_POST[address2]”;
$paypal[city]=”$_POST[city]”;
$paypal[state]=”$_POST[state]”;
$paypal[zip]=”$_POST[zip]”;
$paypal[email]=”$_POST[email]”;
$paypal[phone_1]=”$_POST[phone1]”;
$paypal[phone_2]=”$_POST[phone2]”;
$paypal[phone_3]=”$_POST[phone3]”;

?>

O Paypal pode ser bem incrementado e criado configurações intermediárias durante o processo de pagamento. Como adicionar loading e ícones personalizados no seu site.

Por falando em ícones, no site fineicons encontrei os principais cartões de pagamento, até mais do que aceito pelo Paypal e são excelentes para incrementar seu site.

Espero que o post tenha real utilidade e que mais a frente possamos estar discutindo maiores implementações.

Abraço,
Ederson Melo – @edersonmelo

Manipulação de código HTML

Em algum momento do desenvolvimento utilizando php podemos precisar  manipular códigos HTML. O php oferece algumas funções pré definidas para casos deste tipo.

nl2br()
Função transforma todos os caracteres de nova linha em código de quebra de linha em HTML, representado por <BR>. Tipicamente o caractere de nova linha é representado por ’ ’.

Exemplo:
$texto = “Eai pessoal Funciona correto? “;
$texto = nl2br( $texto ); // $texto == ” Eai pessoal<BR> Funciona correto? “

urlencode()
Função para converter links em um formato permitido pelo browser. Um típico exemplo da utilização dessa função é quando passamos parâmetros pela url.
Exemplo:
$link = “edersonmelo.com?nome=Éderson Melo”;
$link = urlencode( $link ); // $link == “edersonmelo.com?usuario=Éderson+Melo”

urldecode()
Função contrária a anterior. Ele decodifica a string para o formato original.

Exemplo:
$link = ” edersonmelo.com?usuario=Éderson+Melo “;
$link = urldecode( $link ); // $link == ” edersonmelo.com?usuario=Éderson Melo “

htmlspecialchars()
Função utilizada para substituir os caracteres especiais da linguagem HTML.
’&’ (comercial) por ’&amp;’
’”’ (aspas duplas) por ’&quot;’
’<’ (sinal de menor) por ’&lt;’
’>’ (sinal de maior) por ’&gt;’

htmlentities()
Função semelhante a anterior. A diferença é que essa faz uma substituição mais completa, ela troca todos os caracteres que tem representação especial no HTML.

Exemplo:
$texto = “Queremos ser o 1º blog”;
$texto = htmlentities( $texto ); // $texto == ” Queremos ser o 1&ordm; blog“;

Abraço,
Ederson Melo