URLs amigáveis, Linux e Windows

URLs amigáveis são URLs fáceis de se decorar para um visitante humano e fáceis de indexar para um visitante Robô.
Existem dois tipos de URLs, as estáticas e as dinâmicas, abaixo exemplos:

URLs estáticas:
http://www.meusite.com.br/artigo_dia_mes_ano.html

URLs dinâmicas:
http://www.meusite.com.br/artigo.php?cod=12&id=1&valor=10

Conforme podemos observar acima os dois tipos de URLs são de difícil memorização, agora um exemplo de URL Amigável:

http://www.meusite.com.br/artigo/dia/mes/ano

A princípio você pode pensar que não há problema algum com URLs estáticas e dinâmicas. Mas pense um segundo. Você consegue decorar facilmente uma URL desse tipo?

Além do problema da complexidade, essas URLs geram outros problemas:

• Alguns mecanismos de busca podem deixar de indexar estas páginas, por causa dos caracteres ‘?’ e ‘&’;
• A tecnologia usada na construção do site está sendo exposta;
• Se você resolver mudar a tecnologia do seu site (asp para php, por exemplo), todas as URLs terão que ser mudadas;
• Expor a tecnologia usada para fazer um site pode ser um problema de segurança

A solução é simples: mapear as URLs reais para URLs “virtuais”, mais fáceis de compreender e indexar, e independentes da tecnologia utilizada.

Vamos ver agora algumas dicas simples para trabalhar com rewrite para gerar URL amigáveis tanto para Linux Apache quando para Windows com IIS7.

URL amigável no Linux:

Apache mod_rewrite

mod_rewrite é um módulo escrito para o servidor Apache, responsável pela reescrita de URLs em páginas Web.

Hoje em dia, com a popularização de assuntos como SEO, usabilidade e acessibilidade, esta prática se tornou comum e está cada vez mais sendo utilizada por grande portais.

Para que as URL amigáveis funcionem o módulo mod_rewrite deve esta configurado e ativo no Apache.

Criado as regras:

O arquivo .htaccess deve esta localizado na pasta ROOT com o seguinte código:

RewriteEngine On
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteRule ^(.*)$ index.php?cod=$1

Onde:

RewriteEngine On
Ativa o suporte à reescrita

RewriteCond %{SCRIPT_FILENAME} !-f
Não aplica a condição para arquivos

RewriteCond %{SCRIPT_FILENAME} !-d
Não aplica a condição para diretórios

RewriteRule ^(.*)$ index.php?cod=$1
Regra de reescrita onde qualquer string (.*) após a pasta, onde estiver o .htaccess, será interpretado por index.php passado na variável cod

Na pratica ficaria assim:

www.seusite.com.br/secao/subsecao/
será interpretada como
www.seusite.com.br/index.php?cod=secao/subsecao/

Apache Module mod_rewrite

http://httpd.apache.org/docs/2.0/mod/mod_rewrite.html

URL amigável no Windows

Microsoft URL Rewrite Module 2.0 for IIS 7

Com o URL Rewrite é possivel interceptar qualquer tipo de requisição seja ela ASP, ASP.NET, Perl, PHP ou HTML, e reescrever a URL antes que ela seja processada pelo IIS. A configuração é feita de forma fácil e intuitiva, atendendo tanto usuários experientes quanto os mais iniciantes.

Criado as regras:

O arquivo web.config deve esta localizado na pasta ROOT com o seguinte codigo:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
  <rules>
    <rule name="Rule IIS7">
      <match url="^(.*)$" ignoreCase="false" />
      <conditions>
        <add input="{SCRIPT_FILENAME}" matchType="IsFile"
          ignoreCase="false" negate="true" />
         <add input="{SCRIPT_FILENAME}" 
            matchType="IsDirectory" ignoreCase="false"
            negate="true" />
      </conditions>
      <action type="Rewrite" url="index.php?cod={R:1}"
        appendQueryString="false" />
    </rule>
  </rules>
</rewrite>
</system.webServer>
</configuration>

Onde:

<action type="Rewrite" url="index.php?cod={R:1}" appendQueryString="false" />
Regra de reescrita onde qualquer string (.*) após a pasta, onde estiver o web.config, será interpretado por index.php passado na variável cod

Na pratica ficaria assim:

www.seusite.com.br/secao/subsecao/
será interpretada como
www.seusite.com.br/index.php?cod=secao/subsecao/

Download do módulo URL Rewrite:

x86 version of the URL Rewrite module

x64 version of the URL Rewrite module

http://www.iis.net/download/URLRewrite

Usando URL Rewrite:

http://learn.iis.net/page.aspx/460/using-the-url-rewrite-module/

Para converter as regras de .htaccess para web.config acesso o link abaixo:

http://learn.iis.net/page.aspx/470/importing-apache-modrewrite-rules/

Interpretando com PHP

Com o arquivo de reescrita criado, já podemos criar a lógica para que as URL amigáveis sejam interpretadas pelo PHP.

Veja um exemplo auto-explicativo:

<?php

// separa a URL por "/" e insere num vetor (array)

$url = explode(’/', $_GET['cod']); 

/* imprime a string passada após a primeira / * no exemplo acima, seria: seção */

echo $url[0];  

/* imprime a string passada após a segunda / * no exemplo acima, seria: subseção */

echo $url[1];

?>

Espero ter ajudado, até a próxima.

O desabafo

O desabafo de um Web Designer

Desabafo de um Desenvolvedor Web

Integração TomCat 6 + IIS 7

O Blog The Power of Java trouxe uma ótima solução para quem pretende integrar o TomCat ao IIS7. Seque abaixo os procedimentos.

Arquivos necessários:

Java Version JDK e JRE
http://java.sun.com/javase/downloads/index.jsp

Apache Tomcat
http://tomcat.apache.org/download-60.cgi

Tomcat Connectors (mod_jk)
http://www.apache.org/dist/tomcat/tomcat-connectors/jk/binaries/win32/jk-1.2.28/

Após ter feito o download, instale o JDK na pasta C:\Java\JDK e o JRE no diretório C:\Java\JRE.

Em seguida execute o instalador do TomCat 6 selecione as opções a seguir:

Mude o diretorio de instalação para C:\TomCat e na hora de escolher o JRE informe o diretório onde foi isntalado o JRE em C:\Java\JRE, finalize a instação.

Feito isso temos de setar as variáveis de ambiente para que o tomcat rode:

CATALINA_HOME = C:\TomCat
JAVA_HOME = C:\Java\JDK

No path inclua o caminho %CATALINA_HOME%/bin e %JAVA_HOME%/bin, tente executar o TomCat se o mesmo não iniciar copie a msvcr71.dll da pasta C:\Java\JDK\bin para o diretório C:\TomCat\bin, e tente novamente que deve funcionar.

Agora crie uma pasta ISAPI em C:\TomCat\ e copie isapi_redirect-1.2.28.dll do conector para dentro dela e renomeie para isapi_redirect.dll.

Crie um arquivo isapi_redirect.properties dentro da pasta C:\TomCat\ISAPI igual ao modelo:

#Configuration file for the Jakarta ISAPI Redirector
#The path to the ISAPI Redirector Extension, relative to the website
#This must be is a virtual directory with execute privileges
extension_uri=/jakarta/isapi_redirect.dll
#Full path to the log file for the ISAP Redirector
log_file=c:\tomcat\logs\isapi_redirect.log
#Log level (debug, info, warn, error or trace)
log_level=info
#Full path to the workers.properties file
worker_file=c:\tomcat\conf\workers.properties
#Full path to the uriworkermap.properties file
worker_mount_file=c:\tomcat\conf\uriworkermap.properties

Crie mais esse dois arquivos dentro da pasta C:\TomCat\conf

uriworkermap.properties

#uriworkermap.properties - IIS
#
#This file provides sample mappings for example wlb
#worker defined in workermap.properties.minimal
#The general syntax for this file is:
#[URL]=[Worker name]
/admin/*=wlb
/manager/*=wlb
/examples/*=wlb
#Optionally filter out all .jpeg files inside that context
#For no mapping the url has to start with exclamation (!)
#!/servlets-examples/*.jpeg=wlb
#
#Mount jkstatus to /jkmanager
#For production servers you will need to
#Secure the access to the /jkmanager url
#
/jkmanager=jkstatus

workers.properties

#workers.properties.minimal -
#
#This file provides minimal jk configuration properties needed to
#connect to Tomcat.
#
#The workers that jk should create and work with
#
worker.list=wlb,jkstatus
#Defining a worker named ajp13w and of type ajp13
#Note that the name and the type do not have to match.
#
worker.ajp13w.type=ajp13
worker.ajp13w.host=localhost
worker.ajp13w.port=8009
#
#Defining a load balancer
#
worker.wlb.type=lb
worker.wlb.balance_workers=ajp13w
#Define status worker
worker.jkstatus.type=status

Como configurar o IIS 7

Crie um diretório virtual

Vamos dar permissões para a execução dessa .dll

Vamos editar as permissões click em Edit Feature Permissions

Agora verifique se o ISAPI .dll esta ativo

Vamos agora configurar o filtro

Click em add

Vamos liberar as restrições

Click em Add

Agora de um restart no servidor IIS e faça um teste no navegador.

Endereço:

http://localhost:8080/examples/servelets/servelet/HelloWorldExample

Agora com o redirecionamento:

Endereço:

http://localhost/examples/servelets/servelet/HelloWorldExample

Post Original em:
http://poweredbyjava.blogspot.com/2010/01/integracao-tomcat-6-x86-iis-7.html

CSS3

Chris Coyier, web designer que mantém o blog CSS-Tricks, escreveu em seu perfil no Twitter que o "CSS é como o xadrez. Você pode aprender os princípios básicos em um dia, e passar a vida inteira se especializando". De fato, o CSS é a linguagem mais fácil de ser aprendida, possuindo uma sintaxe bem simples. Porém, criar páginas com layouts bem elaborados usando CSS, assim como conhecer todos os seus macetes, exige tempo e experiência.

A forma mais correta de desenvolvermos páginas para Web é dividindo a estrutura em três camadas: conteúdo (HTML), comportamento (Javascript) e apresentação (CSS). Trabalhando o CSS em uma camada separada do restante da estrutura, conseguimos uma melhor consistência visual, uma vez que os layouts de todas as páginas estarão baseados em uma mesma folha de estilos. Também ganhamos tempo e facilidade na hora de fazer um redesign ou manutenções visuais, pois a alteração de um único arquivo terá impacto em todo o site. Com o CSS em um arquivo separado, também conseguimos fornecer maior acessibilidade ao criar folhas de estilo específicas para diferentes dispositivos como sintetizadores de fala e som, aparelhos e impressoras em Braille, celulares e outros dispositivos móveis etc. O carregamento das páginas também será mais rápido, já que após o primeiro acesso ao site, o arquivo CSS estará carregado em cache.

Um bom exemplo de como o CSS pode ser poderoso quando bem usado é o CSS Zen Garden. O site fornece um modelo de página HTML para download, e diversos designers criam folhas de estilos para essa mesma página. O resultado pode ser visto na galeria: alterando apenas a folha de estilo, diferentes layouts são aplicados na mesma página HTML.

CSS ainda deixa a desejar

Hoje, designers e desenvolvedores ainda têm que se virar para conseguir certos efeitos gráficos. Por mais poderosa que a linguagem seja, a atual versão do CSS2.1 não fornece recursos como sombras em objetos e textos, cantos arredondados, múltiplas camadas de plano de fundo, opacidade, possibilidade de diferentes famílias tipográficas, colunas em textos, etc. O fato de navegadores mais antigos (e ainda utilizados) como o Internet Explorer 6, 7 e 8 não suportarem todos os recursos do CSS2.1 acaba complicando ainda mais a nossa vida.

Para conseguir tais efeitos e recursos nas páginas, normalmente recorremos ao uso de imagens, hacks, ou inserção excessiva de marcações HTML, o que pode aumentar o tempo de desenvolvimento e carregamento das páginas, além de comprometer a semântica dos documentos.

Com a nova versão da linguagem que está por vir, teremos maior controle sobre o estilo dos elementos. Propriedades para cantos arredondados ou sombras em textos estarão disponíveis no CSS3, sem precisarmos recorrer ao uso de truques ou imagens.

O que nos trará o CSS3?

Propriedades de CSS3 já são suportadas pelas versões mais recentes de alguns navegadores, como o Safari 4, Firefox 3.6 e o Chrome, Com isso podemos testar os novos recursos que estão por vir. Para que alguns dos novos recursos possam ser testados, é necessário adicionarmos os prefixos -moz- (para a renderização no Firefox) e -webkit- (para renderização no Safari).

A seguir, exemplos de algumas das novas propriedades que a nova versão da linguagem irá nos fornecer:

• border-radius: com essa propriedade podemos adicionar um raio de arredondamento para todos os cantos de um elemento, como -moz-border-radius: 10px, ou valores diferentes para cada canto, como -moz-border-radius-topright: 5px.
• text-shadow: permite adicionar sombras em textos, configurando a distância da sombra para a esquerda e para o topo do texto, o enevoamento e cor: text-shadow: 5px 5px 2px #999.
• shadow: funciona da mesma maneira que o text-shadow, porém aplicando sombra aos outros elementos: -moz-box-shadow: -10px -10px 0px #333.
• border-colors: podemos adicionar um efeito gradiente nas bordas de um elementos, aplicando cores em diferentes camadas: -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc.
• Opacity: podemos adicionar opacidade aos elementos: opacity: 0.2.
• Columns: podemos definir estilos de colunas para textos, aplicando valores para a largura, quantidade, bordas de separação e distância entre colunas: -moz-column-width: 13em; -moz-column-count: 3; -moz-column-rule: 1px solid black; -moz-column-gap: 1em.
• Multiple backgrounds: podemos definir diferentes planos de fundo para um mesmo elemento: background: url(fundo-um.jpg) top left no-repeat, url(fundo-dois.jpg) top 11px no-repeat, url(fundo-tres.jpg) bottom left no-repeat, url(fundo-quatro.jpg) left repeat-y.
• @font-face: podemos definir uma tipografia diferenciada para os textos da página através da importação de um arquivo de fonte: @font-face { font-family: Agni; src: url(’agni-font.otf’) }. Em seguida aplicamos essa fonte a um elemento de texto: h3 { font-family: Agni, sans-serif }.

O CSS3 ainda não deve ser usado definitivamente em suas páginas. A nova versão da linguagem ainda se encontra em fase de rascunho na W3c, e a maioria dos navegadores não fornece suporte. Porém é essencial que possamos conhecer e testar os novos recursos, descobrir aos poucos o que vem por aí, e nos preparar para o momento em que o CSS3 será lançado como uma recomendação em definitivo.

Vocês podem encontrar mais informações sobre o CSS3 no site http://www.css3.info/.

Texto original em:
http://imasters.uol.com.br/artigo/16315/css/ganhos_visuais_com_o_css3/

Internet Explorer 9

Às vezes as coisas não dão certo na primeira vez, nem na terceira. Quem sabe na nona! Pelo menos é isso que a Microsoft espera conseguir com o Internet Explorer 9, que eles anunciaram na feira Mix 2010. Ele tem suporte a HTML5 (com vídeo em HTML5!), renderização acelerada por hardware para imagens e texto, e uma engine de JavaScript totalmente nova.
A Microsoft fez uma demonstração do último build do IE9, a versão final de algo que parece ainda não ter data para ser lançado, e para algo chatinho como um navegador, esse é bem legal. O que há de novo no IE9?

HTML5

O HTML5 é basicamente o assunto na boca de todo mundo agora, assumindo que "todo mundo" são só desenvolvedores web e viciados em Apple, dizendo que não precisam de Flash. O HTML5 vai salvar a internet! Etc. Mas, na verdade, ele é algo mais sutil que isso: ele é a próxima versão de toda a linguagem que está por trás da web — o HTML — e ele tem suporte a diversas coisas interessantes, que farão os websites se comportarem mais como apps. O Firefox, Safari, Chrome e Opera praticamente deixaram a Microsoft comendo poeira em termos de suporte a HTML5. Até agora! Estas são as funções HTML5 que o IE9 terá, segundo a Microsoft:

• Vídeo H.264: Quando as pessoas falam que o HTML5 vai matar o Flash, é disso que elas estão falando. Alguns sites de vídeos, como o YouTube e o Vimeo, vêm experimentando com reprodução de vídeo que não requer um plugin. O H.264 é o formato padrão que os grandes sites decidiram escolher, e agora o Internet Explorer vai suportá-lo.

• Audio incorporado: Assim como a tag <video> permite incorporar vídeos diretamente em uma página, sem um plugin, a tag <audio> permite que arquivos de audio sejam incorporados em websites. O IE9 tem suporte a arquivos MP3 e AAC.

• SVG (Scalable Vector Graphics): o SVG permite criar certos tipos de gráficos que podem ser ampliados ou reduzidos sem perda na qualidade, porque eles são desenhados como vetores, não como imagens. Ele também permite animações rudimentares, ao estilo do Flash.

• CSS3: o CSS é essencialmente a forma pela qual a web é formatada, e os diversos problemas de compatibilidade que o Internet Explorer apresenta em relação ao CSS vêm enlouquecendo desenvolvedores desde, bem, sempre. O IE9 tem suporte ao CSS3, mais padronizado — incluindo suporte a seletores, cores, valores, planos de fundo e bordas e fontes — e deve suportar mais propriedades antes do lançamento. Enfim: desta vez, eles estão se esforçando.

A nova engine de JavaScript

Os web apps modernos são carregados com JavaScript, e chegamos ao ponto de medir a velocidade de um navegador através da velocidade em renderizar JavaScript. (Uma engine JavaScript mais rápida significa que sites como o Gmail, Facebook e até mesmo o Gizmodo não só carregam mais rápido, como funcionam mais rápido.) Aqui está a posição do IE9 em relação ao JS, de acordo com a Microsoft:

Lembre que este é um teste feito para navegadores que usam WebKit (o que não é o caso do IE9), e que o IE9 ainda não está pronto para ser lançado: a Microsoft diz que eles ainda vão melhorar a velocidade de renderização. E, sinceramente, o IE9 não ultrapassa alguns outros navegadores mais rápidos, mas pelo menos chega perto. E ele é beeeem mais rápido que o IE8. Na demonstração ao vivo, o IE9 não foi terrivelmente mal no teste Acid3, e marcou medíocres 55/100, que a Microsoft prometeu melhorar. Mas, de novo, eles pelo menos estão tentando, e se você tem uma participação de mercado enorme (e um histórico de ignorar padrões da web), como é o caso da Microsoft, isso vale muito a pena.

Aceleração 2D

O Internet Explorer Nove conta com aceleração de vídeo via DirectX para gráficos SVG e até mesmo para renderização de texto, o que vai tornar mais rápida a renderização de CSS3 e de alguns gráficos em SVG, mas também vale para renderização de texto, o que torna todo o processo de navegação um pouco mais fluido.

A renderização de vídeo HTML5 é muito, muito mais fluida que no Google Chrome (demonstrado no evento), simplesmente por causa da aceleração de vídeo via Direct2D: a Microsoft conseguiu exibir dois vídeos em alta definição rodando liso na mesma tela do navegador, enquanto o Chrome engasgava com um vídeo só. Esta aceleração não depende de mais código no site, mas os desenvolvedores web não poderão depender deste tipo de aceleração por hardware, já que ele é restrito ao IE9 no Windows, por enquanto. Além de permitir demonstrações meio absurdas como a mostrada acima, isso quer dizer que qualquer vídeo que use a tag <video> no IE9 vai usar menos CPU do que qualquer outro navegador, o que é uma grande melhora. (Ah, isto não vai funcionar no Windows XP.)

Além disso, parte da renderização do JavaScript também pode ser delegada para a placa de vídeo, o que ajuda na renderização e tempo de resposta de web apps complicadas.

Muito do que a Microsoft está fazendo aqui é, na verdade, tentar alcançar a concorrência. E, além da aceleração 2D, não há muito de novo aqui, em relação aos outros navegadores. Mas a adoção do Internet Explorer é inevitável, e ver a Microsoft adotando padrões modernos da web — pelo menos mais que no passado — vai ter um efeito mensurável e positivo na internet, e nas pessoas que a navegam. (No trabalho, muito provavelmente o único lugar onde quem sabe de computadores usa o IE.)

Preview

Se você quiser, pode testar o IE9 agora, mas algumas das funções — principalmente o vídeo em HTML5 — ainda não estão aqui, e a interface ainda está bem básica. (Não há uma barra de endereços de fato, só uma janela pop-up chamada "Ir Para". Esta é uma ferramenta para desenvolvedores, na verdade.) O download pode ser feito aqui.

Matéria Original em Gizmodo:
http://www.gizmodo.com.br/conteudo/internet-explorer-9-um-novo-comeco-com-html5

Usando border-radius no IE

Para aqueles que odeiam o IE (como eu!) e ficam muito chateados quando precisam fazer aquela borda arredondada nos campos de texto e acabam tendo que usar imagens, porque a !@#$ do IE 6, 7 e até o 8 não aceita essa nova propriedade do CSS 3, agora podem ficar tranquilos, o pessoal do site http://www.htmlremix.com, desenvolveu um arquivo .htc para resolver isso:

Assim como para Safari, Chrome e Firefox usamos, por exemplo:

.curved {
-moz-border-radius:10px;
-webkit-border-radius:10px; 
border-radius: 10px;
}

Para usar no IE basta chamar no CSS o arquivo .htc

.curved {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius: 10px;
behavior:url(border-radius.htc);
}

Não esqueça de declarar a propriedade “real” border-radius e seu valor, senão o resultado será diferente.

O demo e o arquivo .htc você pode baixar neste link:
http://curved-corner.googlecode.com/files/border-radius-demo.zip

Visite o link – http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

Parabéns para o pessoal do HtmlRemix

Alguns sites com dicas sobre CSS:

Gerador de cantos arredondados
http://border-radius.com/

CSS: border-radius and -moz-border-radius
http://www.the-art-of-web.com/css/border-radius/

Curso CSS - [ Usando o border-radius ] A la carte
http://www.brasilhightech.com.br/2010/02/curso-css-usando-o-border-radius-la.html

HTML 5

O HTML5 oferece uma experiência web totalmente diferente para usuários e, embora exista um longo caminho para ser finalizado, muitos navegadores importantes - com exceção do Internet Explorer 8 - como o Opera, Google Chrome, Safari 4 e o Firefox 3.5 já implementaram grandes partes da linguagem, incluindo tags de vídeo e suporte à tecnologia Canvas.

Vamos construir uma estrutura básica e falar sobre cada uma delas.

A primeira modificação nota-se no DOCTYPE.

Antes, tínhamos vários tipos de DOCTYPE: Strict, Transitional ou Frameset.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

No HTML5, o DOCTYPE ficou infinitamente mais simples:

<!DOCTYPE HTML>

Então a estrutura do HTML5 ficará assim:

<!DOCTYPE HTML>
<html>
<head>
<title>Título do documento</title>
</head>
<body>Conteúdo</body>
</html>

No HTML atual, não há um padrão para a leitura das máquinas do que é um cabeçalho, uma seção, menu ou rodapé. O que geralmente diferencia são as IDs das DIVs. No HTML5 esta padronização existe.

Vejam a diferença:

HTML 4.01

<div id="topo"></div>
<div id="menu"></div>
<div id="conteudo"></div>
<div id="rodape"></div>

HTML5

<header></header>
<nav></nav>
<article></article>
<footer></footer>

Vejam que a estrutura já tem um padrão.

Explicando:

A tag <header> define uma introdução ao documento.

A tag <nav> define uma seção de navegação. Se você possuir botões Anterior e Próximo no seu documento, deve ser inserido dentro da tag <nav>.

A tag <article> define conteúdo externo. Pode ser uma notícia, artigo, texto qualquer ou qualquer outro conteúdo.

A tag <footer> define um rodapé do documento. Geralmente contém nome do autor, data que foi escrito o documento etc.

Agora que nós vimos as tags básicas, vamos dar uma olhadinha em outras super legais:

<aside> é utilizado para representar conteúdo que está relacionado com outro conteúdo dentro de um contexto (<article>). Um exemplo fácil para assimilação são as citações. Se há uma citação em um texto que deve ser destacado, pode-se utilizar o <aside> para destacar certa frase ou citação. Fora do contexto ele é interpretado como conteúdo secundário, não relacionado com o conteúdo em questão.

Resumindo: Se você utiliza o <aside> dentro de uma tag <article> você relaciona a citação com o conteúdo do article, caso contrário, com o tema da página em geral.

A tag <audio> define um som. Pode ser música, som, podcast, etc. Qualquer conteúdo dentro da tag de áudio será um texto alternativo caso o navegador utilizado não suporte a tag.

<audio src="musica.mp3">

Seu navegador não suporta o elemento de áudio.</audio> A tag <áudio> possui alguns atributos importantes:

src: especifica a localização do ficheiro de áudio.

autoplay: especificação de execução automática do arquivo após carregamento. Exemplo:

<audio src="musica.mp3" autoplay="autoplay">

Seu navegador não suporta o elemento de áudio.</audio> controls: especifica se deve ou não exibir os controles de áudio (play, stop, pause, etc).

<audio src="musica.mp3" controls="controls">

Seu navegador não suporta o elemento de áudio.</audio> A tag <dialog> define um diálogo ou conversa, como o próprio nome já diz.

<dialog>
<dt>Pedro</dt>
<dd>Oi Lyvia como vai você?</dd>
<dt>Lyvia</dt>
<dd>Vou bem e você?</dd>
<dt>Pedro</dt>
<dd>Tudo ótimo!</dd>
</dialog>

Tag <details>: utilizada para descrever detalhes de um documento, ou de trechos dele.

<details>Este poema foi escrito por Luis Fernando Veríssimo.</details>

Porfim, a tag <figure>. Ela é utilizada pra inserir uma legenda relacionada a uma imagem, vídeo, áudio, objeto, etc.

<figure>
<img src="imagem.jpg" alt="imagem" title="imagem" />
<legend>Figura 1. Este texto tem relação com a imagem acima.</legend>
</figure>

Utilizando a tag legend, você adiciona a legenda à imagem.

Claro que existem outras tags e atributos, porém resolvi falar apenas das principais, pois há muito mais além de cada elemento. Vou falar de cada uma detalhadamente em artigos separados!

Viram só? Não é tão complicado! Pelo contrário, é bem facinho! Com isso, espero que futuramente os browsers se alinhem a um padrão único de leitura e acompanhem essa padronização, sem que os desenvolvedores necessitem de hacks (leia-se gambiarras) para que os sites funcionem em todas as plataformas!

Espero que eu tenha ajudado!

Até a próxima!

———————————————-
Autor: Michel Martins - Gerente de e-commerce do CPT Cursos Presenciais, programador e professor de cursos tecnológicos da Gigabyte Cursos. Graduando em Comércio Eletrônico pela Univiçosa, é apaixonado por tecnologia e gosta de saber de tudo um pouco.
michelmfreitas@gmail.com

Post original em:
http://imasters.uol.com.br/artigo/16050/

———————————————-

Esqueça o Flash, vem aí o SublimeVideo

Tio Steve nasceu realmente virado para a lua. Todo mundo sabe que ele está incrivelmente insatisfeito com a Adobe e seu “bugado” flash, por não conseguir rodar no iPhone OS. Mas em breve, em nem lembrará que a Adobe existe. Graças ao HTML5.

O HTML5 proporcionará que não seja necessário plugins, extensões, whatever, para rodar vídeos. A empresa suíça Jilion criou um player de vídeo que roda nesta linguagem, com um visual bonito, chamado de SublimeVideo. O projeto ainda está em testes, e como nem todos os browsers são compatíveis com o HTML5, você somente conseguirá testar no Chrome, Safari (para mim, foi o único que funcionou) ou IE com Chrome Frame. Experimente neste link.

No player será possível minimizar, maximizar, saltar para qualquer parte do filme, pausar, similar a qualquer player de Flash. Ora, se ele já roda no Safari no PC, é meio caminho andado para rodar no iPhone.

No entanto, o projeto ainda está em andamento e vai demorar um pouco para vermos em sites como YouTube, até por conta da limitação de compatibilidade de browsers. Mas este é o caminho. Abre o olho, Adobe!

Via
Fonte: www.mundotecno.info

Internet Explorer 8 conquista o mundo!

O Internet Explorer 8 é o melhor navegador já lançado pela Microsoft. Ele tenta de alguma maneira ser mais condizente com padrões modernos da web – pelo menos mais do que os seus antecessores, o que é um grande passo adiante. Por isso, fico feliz de ver que hoje é o navegador mais usado do mundo, em vez do IE6 ou do IE7, com 25,6% do mercado em todos os sistemas operacionais, de acordo com a Net Applications.

http://gizmodo.com.br/

http://www.netmarketshare.com/

PHP - Porque usar uma IDE e qual escolher

Todo mundo quer ser mais produtivo, cometer menos erros e escrever bons códigos. Claro, que tudo depende de você, mas na maioria dos casos, ambientes de desenvolvimento integrado (IDEs) pode ajudá-lo a atingir esses objetivos com mais facilidades. Infelizmente, a escolha da IDE correta é muito difícil porque ha muitas necessidades a serem considerados, sendo que o site de quase todos os IDE nos diz que sua IDE é a melhor.

Neste post, vamos dar uma olhada nas mais populares PHP IDEs, explorando suas funções, comparando-as em uma tabela e tirando algumas conclusões. Com sorte, você terá uma idéia do que cada IDE PHP tem para oferecer e qual melhor se adapta às suas necessidades.

A seguir, veremos algumas das características que eu achei importante considerar.

Características

1. Realce da Sintaxe (Syntax highlighting)

Bom, a sintaxe destaca melhora a legibilidade do código.
Basta olhar para isto:

2. Complemento do Código (Code completion)

Sugestões automática de código pode evitar que o desenvolvedor tenha de escrever muito, IDEs que suportam classes personalizadas e phpDoc pode até salvá-lo de ter que ler a documentação do projeto, completar código também pode evitar erros de digitação. Por exemplo, if typing $cotroller-> não mostra qualquer sugestão, você saberá que algo está errado… deve ser de it should be $controller!
O code completion poderá informa-lo se muitas variantes são mostradas ou métodos de sua classe não foram apanhados.
Também é bom ter code completion em arquivo HTML src = "PHP include and require.

3. Navegação

Uma das coisas mais chatas é ficar tentando descobrir onde uma determinada variável foi definida ou usado. Algumas IDEs podem ajudar com o comando "Ir a" (GoTo) com ações, como ir para definição.
Outra característica importante é a pesquisa, a busca não deve demorar muito tempo, mesmo com grandes projetos, ela pode se tornar ainda melhor é se o IDE permite que você se move rapidamente para a próxima ocorrência de uma frase de busca, como o Firefox faz com o seu recurso Pesquisa rápida.

4. Erros e avisos em destaque

On-the-fly, verificação de sintaxe pode evitar vários erros tipográficos e erros comuns de programação. No exemplo abaixo, o IDE indica que você pode ter usado = em vez de ==:

Quanto mais erros a IDE detectar, melhor, com exceção de falsos positivos.

5. Refatoração e geração de código (Refactoring and code generation)

Refatoração é basicamente um conjunto de técnicas para transformar o código fraco em código sólidos. A sua aplicação em IDEs para PHP é muito fraco comparado com IDEs para linguagens Java e C, mas ainda é muito útil.

Refatoração em PHP básico inclui:

• "Move", garante que ao mover o arquivo para outro diretório o mesmo terá suas referencias alteradas em todo o projeto .
• "Rename", Renomeia algo é garante que ele seja renomeado em todo o projeto.
• "Safe delete", garante que a exclusão de um arquivo não prejudique outras partes do projeto.

Além de refatoração de base, algumas IDEs pode gerar código para a classe construtores, getters / setters e mesmo sobre os métodos para uma classe pai.

6. Depuração (Debugging)

A depuração não é tão crítica em PHP, porque você poderá adicionar echos ou usar algo como FirePHP, mesmo sem ter que recompilar seu código. Mas para aplicações complexas em que você precisa adicionar echo após cada linha para ver o que está acontecendo, ao depurar você poderá economizar horas.
Se o IDE for boa mesmo, ela ira lhe fornece um passo-a-passo sobre a depuração e permitirá que você veja os valores atuais das variáveis no espaço.

7. Versionamento (Versioning system)

Versionamento é extremamente útil para a equipe e para desenvolvimento pessoal. Ela mostra que mudanças que foram feitas em um arquivo, quando foram feitas e por quem. Uma boa IDE permite comparar visualmente as revisões, mudanças de uma cópia de uma versão para outra, reverter para estados anteriores e mesclar as alterações feitas por diferentes membros da equipe.

Ao executar verificações comum e se comprometer, integrando um sistema de controle de versão, como CVS, SVN, git ou Mercurial na sua IDE é geralmente bem melhor do que correr uma aplicação separada.

8. Client-side, características

Utilizar PHP por si só é muito raro, CSS e JavaScript quase sempre estão em algum lugar no seu projeto. Então, para um bom projeto usar IDEs com opção para outras linguagens e tecnologias em conjunto com o PHP lhe pouparia tempo.

Como escolher uma boa IDE?

Cada IDE fornece uma grande quantidade de recursos. Algumas dessas características são muito úteis, outras não. Aqui estão algumas diretrizes a serem seguidas para facilitar sua escolha:

• Tente usar uma IDE com licença Gratis (software livre). Seu conjunto de recursos pode ser suficiente para você, e você não precisará pagar por uma licença.
• Em primeiro lugar, certifique-se que a mesma tenha as características que você deseja e que são aqueles que você realmente precisa, verificar se eles funcionam corretamente na IDE de sua escolha.
• Se você encontrar uma IDE que se encaixa bem, mas está faltando um ou dois recursos, tente ferramentas especializadas.
• Depois de escolher uma IDE, brinque com ela por uma semana antes de implementa-la em um grande projeto. Seu hábitos de trabalho vai te dizer se você se sente confortável com ela.

Quadro Comparativo

Junto com Vladimir Statsenko, que ajudou com a seção sobre o Aptana, foi preparado uma tabela de comparação.

O que foi coberto:

Ferramentas baseadas em Eclipse
PDT Eclipse, Zend Studio 6, Aptana e Aptana Studio Pro são construído sobre a plataforma Eclipse. Isso significa que você pode usar qualquer um dos milhares de plug-ins do Eclipse existentes, se um recurso que você precisa não está integrado na IDE em si, é bem provável que ele esteja disponível como um plug-in de terceiros.
Eclipse foi uma das primeiras IDEs freeware com capacidade complexas de code completion, navegação de código, apoio a projectos, etc.
A maioria deles ainda estão livres e são muito poderosas.

NetBeans
NetBeans é a nova estrela do PHP, não é construído sobre a plataforma Eclipse, tem a maioria dos recursos de outros IDEs e ainda mais…, e é grátis também.
O desenvolvimento desta IDE é público, aberto e rápido, na seqüência do desenvolvimento do blog podem ser testadas novas compilações que sempre ficam disponíveis ao publico, isso é muito interessante, mesmo se já existe uma versão estável disponível (v6.7).

O que não estava coberto

Há uma abundância dos blocos poderosos como PSPad, Notepad + +, TextMate, vim e Emacs. Alguns são muito semelhantes as IDEs e ainda melhor se você quer um editor de texto bom, mas não trazem a experiência de uma IDE completa. Rever todas as boas IDEs, não seria possível (existem muitas), por isso apenas as grandes IDEs são comparados aqui.

IDEs Testadas

Aqui está a lista das IDEs para PHP incluídas em nossa análise:

• PDT 1
• PDT 2.0
• Zend Studio 6
• NetBeans 6.5
• NetBeans 7 (development version)
• Aptana PHP
• Aptana Studio Pro
• Codelobster *
• Nusphere PhpED 5.6 *

Decidimos que seria interessante permitir que nossos leitores possam editar a tabela hospedada no Google Docs. Sinta-se livre para adicionar sua IDE favorita se ela não estiver lá, ou adicionar notas de algumas características das que constam na tabela.

The full table at Google Docs (not editable snapshot)

* Codelobster and Nusphere PhpED were filled in by Russian community members

Conclusão

Você ainda não usa uma IDE?, Você pode estar perdendo tempo, teste e verá a diferença.

PDT e NetBeans são boas IDEs, se você precisar de um monte de plug-ins, Eclipse é a melhor escolha, se as ferramentas de edição e finalização de código é mais importante para você, escolher o NetBeans. NetBeans é um pouco mais sensível, também, se você estiver na maior parte edição de HTML e CSS, tente Notepad + +, vim, TextMate ou o Emacs. Todos eles têm muito boas em capacidades de edição HTML e pode ser configurado para a conclusão do código simples, são mais rápidos e mais leves do que IDEs plenamente caracterizados.

Se você estiver editando o JavaScript complexo, tente Aptana, o que é surpreendente para JavaScript ou Spket o plug-in para o Eclipse tem quase as mesmas características.
E lembre-se, IDEs não são destinadas a mudar a maneira que você pensa. Eles simplesmente acelerar o processo de desenvolvimento.

Comercial vs Freeware

Por mais estranho que possa parecer, IDEs comerciais, tais como IDEs such e Zend Studio, Aptana Studio Pro não tem mais vantagens que as alternativas livres como PDT2.0 e NetBeans, sendo que ambos são muito boas.

Com Aptana Studio Pro, você obtém uma boa IE para depurar JavaScript, SFTP, FTPS e alguns outros recursos úteis por US $ 99.

Como NetBeans, o Zend Studio oferece code completion e detecção de erros do PDT, um formatador de código muito bom e personalizável, as capacidades de refactoring (que NetBeans também tem) e alguns assistentes para o Zend Framework. Sua licença custa 399 dólares.

Recursos

• PDT Project - Official Eclipse PHP Development Tools website.
• Zend Studio - Web site oficial Zend Studio.
• NetBeans - Web site oficial do NetBeans.
• NetBeans for PHP weblog - Aqui você pode aprender sobre os novos recursos a serem incluídos em futuros lançamentos e discuti-las como estão sendo desenvolvidos.
• Aptana - Web site oficial Aptana.

Sobre o autor

Alexander Makarov é um desenvolvedor web profissional na Rússia. Ele também é a pessoa por trás RMCreative, um blog russo dedicado aos desenvolvedores web, designers e todos os interessados em como a Web é construída.

Por Alexander Makarov
Tradução: Sérgio Rocha