Habilitar imagem quebrada no Firefox 4

O Firefox home é um navegador fundamental para a vida de um desenvolvedor WEB, uma das suas grande vantagens com relação aos outros navegadores é sua imensa quantidade de complementos, hoje com mais de 5.500 add-ons, existe extensões para quase tudo, e quem é desenvolvedor pode tirar vantagens e aproveitar ao máximo complementos como o Firebug, IE Tab, Web Developer, Open in Firefox, html Validator e muitos outros.

Uma coisa que atrapalhava bastante era o fato do Firefox não exibir imagens quebradas, quando havia uma, o navegador exibia somente a tag alt e se não tivesse a tag alt nada era exibido em seu lugar, não dava para saber se havia alguma imagem quebrada.

Após muita pesquisa descobri uma solução para o Firefox exibir o velho “” que amamos tanto, siga os passos abaixo:

No Windows 7;

1 – Abra o Windows Explorer;

2 – Escreva “%appdata%\Mozilla\Firefox\Profiles\” em sua barra de endereço;

3 – Procure uma pasta chamada “chrome”;

4 – dentro dela renomeio o arquivo userContent-example.css para userContent.css;

5 – Adicione o seguinte CSS no o arquivo e reinicie o Firefox:

/ * Enable imagem * marcadores /
@-Moz documento url-prefix (http), url-prefix (arquivo) {
img:-moz-quebrados {
-Moz-force-broken-imagem-ícone: 1;
width: 24px;
height: 24px;
}
}

É isso … da próxima vez que se deparar com uma imagem / quebrada , você receberá uma caixa com “”em seu lugar e o alt dentro dela.

Espero que tenha ajudado.

Até a próxima

Sérgio Rocha
Desenvolvedor Web

Dreamweaver CS5 e HTML5 extensão Pack

A adobe Labs lançou recentemente a extensão HTML5 Pack. Esta extensão fornece suporte para o HTML5 e CSS3 na versão atual do Adobe Dreamweaver CS5 e ajuda os desenvolvedores na criação de suas páginas web.

Como a linguagem de marcação HTML5 e a linguagem de estilização CSS3 estão em fase de teste, a extensão fornece suporte para o conjuntos de funcionalidades que já foram implementadas até o presente momento.

Instalando esta extensão o desenvolvedor poderá usufruir de algumas novas funcionalidades, entre elas o auto completar, ou seja, ao digitar o programa sugere as novas tags do HTML 5, atributos e propriedades. Visualização em 3 diferentes tamanhos de tela no Live View, que é um recurso que oferece pré-visualizações precisas do seu projeto. Atualização no Live View para dar suporte as tags video e audio. (Requer a instalação do Quicktime) que estão presente no HTML5.

Instalando a extensão.

1. Baixe o HTML5 Pack;
2. Ter certeza que tem instalado a versão Adobe Dreamweaver CS5;
3. Faça a instalação pelo Adobe Extension Manager ou clicando duas vezes sobre o ícone da extensão e navegando até o local do arquivo;
4. Reinicie o programa.

   Fonte: Adobe Labs

Tweet

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