Image Image Image Image Image
Scroll to Top

Topo

HTML

18

jul
2012

Sem Comentários

Em HTML

Por Vinicius AC

Evitando erros comuns de HTML5

Em 18, jul 2012 | Sem Comentários | Em HTML | Por Vinicius AC

Fonte: DPW

Com o advento da HTML5, muitos erros comuns estão ocorrendo devido a equívocos dos desenvolvedores. Leia este artigo e saiba como evitar erros comuns de HTML5.

Este artigo é baseado no post Avoiding common HTML5 mistakes do HTML5 Doctor.

1. Não use section como contêiner para estilização

Um dos problemas mais comuns que está acontecendo em relação à implementação da HTML5 é os desenvolvedores, arbitrariamente, estarem substituindo <div> por <section> para usar na estilização. No HTML4 ou XHTML, é normal um código como:

<div id="wrapper">
    <div id="header">
        <h1>Título primário</h1>
    </div>

    <div id="main">
        <!-- conteúdo -->
    </div>

    <div id="secondary">
        <!-- conteúdo -->
    </div>

    <div id="footer">
        <!-- conteúdo -->
    </div>
</div>

Então, sem nenhum motivo plausível, alguns estão alterando seu código para:

<section id="wrapper">
    <header>
        <h1>Título primário</h1>
    </header>

    <section id="main">
        <!-- conteúdo -->
    </section>

    <section id="secondary">
        <!-- conteúdo -->
    </section>

    <footer>
        <!-- conteúdo -->
    </footer>
</section>

E isso, apesar de poder estar certo, na grande maioria dos casos, está errado… Se é preciso um elemento somente para estilização, não faz nenhum sentido deixar de usar <div>; o elemento <section> não foi criado para isso! Segundo sua documentação,

O elemento <section> representa um documento genérico ou seção de aplicação[…]. O elemento <section> não é um elemento contêiner genérico. Quando um elemento é necessário para fins de estilo ou como uma conveniência para execução de scripts, os autores são incentivados a utilizar o elemento <div>.

Ou seja, as indicações de uso do <section> para 99% dos casos são:

  • Não usá-lo apenas como “gancho” para estilos ou scripts (para isso, já existe <div>)
  • Não usá-lo se o <article><aside> ou <nav> forem mais apropriados
  • Não usá-lo a menos que exista, naturalmente, um título no início da seção

2. Só use header e hgroup quando forem necessários

Não faz sentindo escrever HTML de forma a ferir a semântica, certo? Infelizmente, não é difícil encontrar elementos <header> e <hgroup> sendo usados de forma inapropriada. Procure se informar mais a respeito da função deles, mas, resumindo:

  • <header> representa um grupo introdutório e/ou navegacional e, usualmente, contém o(s) título(s) de <section>
  • <hgroup> agrupa um conjunto de elentos <h1><h6> quando o título de uma seção tem vários níveis, tais como subtítulos, títulos alternativos, etc

2.1. Uso excessivo de header

O elemento <header> pode ser usado quantas vezes forem necessários num documento, o que está causando confusões do tipo:

<article>
    <header>
        <h1>Título primário</h1>
    </header>

    <!-- conteúdo -->
</article>

Se o <header> contém somente um elemento de título, na verdade, ele não precisa ser usado. O elemento <artcile> já garante que o título vai constar no outline do documento, e, porque <header> não contém múltiplos elementos (como consta em sua definição), por que escrever código desnecessário? A solução é simples:

<article>
    <h1>Título primário</h1>
    <!-- conteúdo -->
</article>

2.2. Uso incorreto de hgroup

Basicamente, não se deve usar <hgroup> com <header> quando:

  • Há somente 1 elemento-descendente de título
  • <hgroup> funcionaria bem por conta própria (ou seja, sem <header>)

O primeiro problema pode ser visto no código:

<header>
    <hgroup>
        <h1>Título primário</h1>
    </hgroup>

    <!-- conteúdo -->
</header>

No caso, deve-se, simplesmente, remover o elemento <hgroup>:

<header>
    <h1>Título primário</h1>
    <!-- conteúdo -->
</header>

O segundo problema é outro caso de incluir o elemento quando ele não se faz necessário:

<header>
    <hgroup>
        <h1>Título primário</h1>
        <h1>Título secundário</h1>
    </hgroup>
</header>

Se não há elementos adicionais dentro de <header> (isto é, irmãos de <hgroup>), basta remover o <header>:

<hgroup>
    <h1>Título primário</h1>
    <h1>Título secundário</h1>
</hgroup>

Com mais de 40 novos elementos (no dia da publicação deste artigo), não é incomum haver dúvidas e erros de HTML5 na hora da utilização de alguns destes. Infelizmente, ainda é o caso com o elemento <nav>Como consta em sua especificação,

Nem todos os grupos de links em uma página precisam estar contidos em um elemento <nav> – o elemento se destina, principalmente, a seções que consistem em blocos de navegação principal. (Grifo nosso)

Atenção ao grifo “blocos de navegação principal” que, apesar de ser aberto a algumas interpretações, identifica-se mais com:

  • Navegação primária
  • Navegação secundária
  • Navegação in page (dentro de um artigo longo, por exemplo)

Como diretivas gerais (e seguindo a lógica contida na especificação), não se aplica o elemento <nav> a:

  • Controles de paginação
  • Social links
  • Categorias e Tags (de um artigo de blog, por exemplo)
  • Navegação terciária
  • Rodapés muito elaborados

Nos momentos de dúvida ao usar <nav>, pergunte-se a si mesmo: “Essa é uma navegação principal?”. Para ajudar a responder, considere as seguintes “regrinhas”:

  • Não use <nav> a menos que você pense que <section> também seria apropriado com <hx>
  • Você adicionaria um link “Pular para o conteúdo” por questões de acessibilidade?

Se a resposta para essas perguntas for “não”, então, provavelmente, não se trata de um <nav>.

4. Erros comuns com o elemento figure

4.1. Nem toda imagem é figure

Os novos elementos não foram criados para que os desenvolvedores tivesse trabalho de escrever código a mais. Pensar isso é um erro comum de HTML5. Algumas pessoas, ao “atualizarem” seus sites para HTML5, colocam o elemento <figure> em todas as imagens! Fazer isso não serve pra nada e a pessoa só está aumentando o próprio trabalho…

A especificação define <figure> como

algum conteúdo de fluxo, opcionalmente com um <figcaption>, que é auto-contido e, tipicamente, referido como uma unidade única a partir do fluxo principal do documento.

E é aí que reside a beleza do elemento <figure>: ele pode ser afastado do conteúdo principal (para uma barra lateral, por exemplo) sem afetar o fluxo do documento.

Se se tratar de uma imagem puramente de apresentação, que não é referenciada em outras partes do documento, definitivamente não se trata de um <figure>. Outros casos de uso variam, mas, pra começar, pergunte-se a si mesmo: “Esta imagem é necessária para compreender o contexto atual?”. Se não, provavelmente não é um <figure> (pode ser um <aside>, talvez). Se sim, pergunte-se novamente: “Eu poderia movê-lo para um apêndice?”. Se a resposta para ambas as perguntas for “sim”, então, provavelmente, trata-se de um <figure>.

4.2. O logo não é um figure

Os mesmos princípios mostrados acima também se aplicam ao logo do site. Não é tão incomum se ver por esses dias códigos parecidos com:

<header>
    <h1>
        <figure>
            <img src="/img/logo.png" alt="Nome do site" class="hide">
        </figure>

        Nome do site
    </h1>
</header>

Isso, simplesmente, não está certo… E não estou dizendo sobre o fato de o logo estar dentro de um <h1> – isso, por si só, renderia um artigo inteiro. A real questão é o abuso do elemento <figure>! No caso, a marcação poderia, simplesmente, ser feita assim:

<header>
    <h1>Nome do site</h1>
</header>

4.3. figure pode ser mais que uma imagem

Ao contrário do que muitos pensam, <figure> pode ser áudio, vídeo, um gráfico (em SVG, por exemplo), uma citação, uma tabela, um bloco de código ou qualquer combinação destes e muito mais!

Não se limite a usar <figure> somente em imagens. Nosso trabalho como aficionados por padrões web também é de descrever com precisão nosso conteúdo através de uma correta marcação.

5. Não inclua atributos de tipo desnecessariamente

Continue lendo em: http://desenvolvimentoparaweb.com/html/evitando-erros-html5/

18

jul
2012

Sem Comentários

Em HTML
Ipad

Por Vinicius AC

projetando para o ipad

Em 18, jul 2012 | Sem Comentários | Em HTML, Ipad | Por Vinicius AC

Fonte: http://www.8164.org/designing-for-the-ipad/

por Jin, 04-12-10
I decided a while back that I wasn’t going to get an iPad. Instead, I’d wait for the second generation iPad next year. This has been my approach when it comes to new Apple products. Yes, I’m scared of the early adopter regret. As the launch date neared, my mind changed a bit. My wife is an avid book reader, and I thought it’d be a perfect device for her. But more importantly, I think the iPad will have a significant impact on how us web designers approach interaction design for this medium and the coding behind it. I need one to tinker with.

I bought one on Saturday. I love it. I won’t get into the philosophical aspects that have been debated by many recently, instead I’ll focus the rest of this post on web design/development for iPad’s Mobile Safari. Creating web sites that look and behave consistently on different browsers and versions have been the bane of us web designers’ existence since Mosaic/Netscape days. While I’m happy with the experience surfing on the iPad, I can’t help but to think, “argh another browser.” Even though Mobile Safari on the iPad is identical to iPhone’s, but the term “optimized for mobile” means differently for each device. The iPhone optimized sites are often minified version of the desktop sites, for speed and better use of screen real estate. The iPad’s browser offers the desktop experience, so it should be treated as one. I divided the rest of this post to two sections: iPad ready and iPad optimized, depending on how far you want to customize your site for iPad.

ipad ready

In my opinion, for a site to be “iPad ready” simply means that all the content and functionality are accessible via the iPad. Sites that were written according to the web standard are in a good shape already. A few things to consider:

  • Flash – It’s unlikely that Apple will allow Flash on its mobile devices anytime soon, or ever. Sites that are done entirely in Flash will have to have a HTML alternative(as they should anyways). I embed Youtube and Vimeo videos on this site sometimes. Even though they both support HTML5 <video> on their sites, unfortunately as of now they do not generate embed codes in HTML5. I recently discovered Video for Everyone by Kroc Camen. It’s a great code snippet that plays hosted or embedded videos as HTML5, with Flash/Quicktime as fallback. html5media also has a Javascript file that enables <video> and <audio> for major browsers.P.S. I can’t figure out how this embedded Youtube video is being displayed properly without any HTML5 embedding code. Please let me know if you know the answer.
  • Mouse Events – Make sure your site’s functionality does not rely purely on mouse events (mousemove, mouseover, mouseout, and CSS :hover) . Mobile Safari can trigger onMouseover, but it involves quite a bit of timing and effort on the user. You need to press down on the element that has the onMouseOver event and release fairly fast. To make it easier for the user, either remove unnecessary mouse events or have a visible link that reveals the hidden elements. A good example of inaccessible functionality is twitter’s web interface. You cannot hover therefore you lose the ability to retweet or reply.
  • Scrolling Content – The default one-finger swipe on iPhone/iPad triggers window.scroll(). Two-finger swipe has the same effect as the mouse scroll wheel. Not a lot of users may know this, therefore I think it’s best not to have content in scrolling in fixed sized block elements such as <div>s. The Safari Reference Library has good documentation on handling events.
  • Fixed Positioning – In short, don’t use it:

    Safari on iPad and Safari on iPhone do not have resizable windows. In Safari on iPhone and iPad, the window size is set to the size of the screen (minus Safari user interface controls), and cannot be changed by the user. To move around a webpage, the user changes the zoom level and position of the viewport as they double tap or pinch to zoom in or out, or by touching and dragging to pan the page. As a user changes the zoom level and position of the viewport they are doing so within a viewable content area of fixed size (that is, the window). This means that webpage elements that have their position “fixed” to the viewport can end up outside the viewable content area, offscreen.

    But if you must, Richard Herrera has a work around.

  • contenteditable – Mobile Safari currently does not support contenteditable attribute. Use a styledtextarea instead.
  • Disabling Cut/Copy/Paste Dialog – Pressing down on a text block or image brings up the Cut/Copy/Paste dialog box by default. Sometimes this behavior is not desired. For example, when pressing the top link of a navigation menu. To disable this, use -webkit-user-select: none.

ipad optimized

Fortunately, Safari is one of the leading browsers to support HTML5 and CSS3. If you want to take advantage of all iPad’s mobile Safari has to offer, here is some useful info:

  • User-agent StringMozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

    David Walsh’s recent post shows how to detect iPad using Javascript, PHP and .htaccess redirection.

  • Media Query – In a way, designing for iPad is a bit easier since the screen is fixed to two sizes(portrait and landscape). We can take advantage of this by using Media Query.<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
    <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

    Please keep in mind, just because you can, doesn’t mean you have to. I don’t recommend making the two sets of styles drastically different from each other because it’d make the users relearn the UI. One case where I can see it’d be useful is when in portrait mode, show only the main content of the site; when in landscape, display more meta info. For example, on a blog site, show just the post body in portrait, and unhide the meta navigation, Ads blocks when in landscape.

    Jason Grigsby has a simple demo page to display different CSS styling depending on the orientation.

  • Format Detection – On iPhone, Safari automatically renders telephone numbers as a link to call. On the iPad the default action is to add the number phone to Contacts. You can disable this by:<meta name="format-detection" content="telephone=no">
  • Viewport setting – Do not use hard-coded pixel for view port dimensions. Use device-width instead.<meta name="viewport" content="width=device-width" />
  • Disable Automatic Format – Automatic Correction and Automatic Capitalization are default behaviorsfor text input. But sometimes you may not want inputs to be auto formatted. For example, inputting user name and passwords. To disable them:<input type="password" autocorrect="off" autocapitalize="off">
    <textarea rows="4" cols="50" autocapitalize="off"> </textarea">
  • Keyboard Types – You can make make it easier for the users by presenting content appropriate keyboards by using the new HTML5 attributes:Text: <input type="text" />
    Telephone: <input type="tel" /> 
    URL: <input type="url" /> 
    Email: <input type="email" /> 
    Zip Code: <input type="text" pattern="[0-9]*" />
  • Multi-Touch Event Handling – You can bind a touch event to mimic any other event. For example, make one finger swipe to mimic a two finger swipe on a DOM object. There are cases where you may want to override the defaults. For example, wouldn’t it be nice if you can swipe navigate an Image/content slider box than having to press the next/prev links? If you’re interested, you may find these JQuery plugins helpful: jQuery SwipeMultiswipe and JQTouch.

 

 

Tags | , , ,

28

abr
2012

Sem Comentários

Em Blog
HTML

Por Allison

HTML5 – O que vai mudar em seu Blog ou Site?

Em 28, abr 2012 | Sem Comentários | Em Blog, HTML | Por Allison

Fonte: CriarSites

Este é um guest post que foi escrito por Vinicius Horta do blog Dinheiro Web.

O padrão atual do HTML já não era atualizado desde 1999, isso mesmo, o HTML passou mais de 10 ANOS sem ter uma reestruturação. Organizações como a W3C e diversos desenvolvedores estavam mais focados em desenvolver o XML e também em fazer melhorias no RSS Feed, mas enfim chegou a novidade, que certamente ainda trará muitas outras.

Entre diversos ganhos que se tem com o HTML5 vale ressaltar o ganho real com a semântica, visto que muitos sites são publicados sem nem ao menos as devidas classes (class) e ids para as divs, o que resulta em maior dificuldade para que seu conteúdo seja devidamente indexado.

Com o HTML5 há Maior Clareza sobre o Código

Antigamente era mais complexo de “mostrar” para o buscador e também para o navegador o que era o que dentro de um site, mas isto agora vai mudar devido a novas tags do HTML5, como por exemplo <header> <footer> <article>, que são facilmente compreendidas pelos buscadores, assim dando a devida importância para cada área.

Também há outras novidades com APIs gráficas através da novidade <canvas>, que é algo interessante para imagens 2D, pois embora ainda não plenamente desenvolvido talvez futuramente seja a solução para a correta indexação de imagens.

Ainda falando em indexação, sabemos que o Google segue os links do menu, para isso o HTML5 também já possui seu elemento específico que é <nav>, vale lembrar que quanto melhor seu blog “falar a língua do buscador” melhor ele tende a ser indexado.

Outro grande dilema no desenvolvimento também era o momento de distribuir as tags H1 até H6, pois a repetição de determinada tag poderia enfraquecer o “poder” da próxima entre outros problemas, mas isso também estará resolvido com <section>, que são marcadores para “partes” distintas do site ou blog. Desta forma poderá estruturar seu código de forma a uma área não interferira em outra!

O que Significam estes novos Elementos do HTML5?

Mesmo a nomenclatura já sendo bastante sugestiva de para que serve cada um dos elementos, segue aqui uma breve lista com os principais elementos com os quais vai começar a se deparar pela web e também a usar em seus blogs e sites.

  • Header <header>: Este elemento define o cabeçalho de seu site em HTML5.
  • Nav <nav>: este elemento define a área de navegação, com menus e links importantes do site.
  • Article <article>: é o conteúdo propriamente dito que deverá ir nesta área, como os posts do blog por exemplo.
  • Section <section>: irá definir uma seção do layout, que trabalha de certa forma de maneira independente, podendo até mesmo conter um header e um footer.
  • Aside <aside>: este é outro interessante elemento que serve para envolver conteúdos que sejam diretamente ligados ao conteúdo do blog, como por exemplo a sidebar ou mesmo um menu lateral.

Entendendo o Poder da <section>

Para ficar mais claro como se pode utilizar a <section> de forma a distribuir melhor a autoridade de cada elemento em separado dentro do blog fiz esta imagem:

Repare que são estrutura independentes para o código, ou seja, o H1 do título do blog não irá interferir no H1 do título do post, assim cada qual terá seu grau de relevância correto para os buscadores.

Ainda falando em section poderia por exemplo ter um footer no section do post, desta forma poderia até inserir elementos de certa relevância como artigos relacionados. (o que também pode ser feito com aside).

HTML5 Grátis no WIX!

A Wix é uma empresa que vem crescendo a passos largos, antigamente fazia apenas sites gratuitos em flash, mas a grande novidade é que agora é perfeitamente possível fazer um site de ótima qualidade em HTML5 na Wix sem saber nada de HTML. Tudo é feito com recursos extremamente simples de arrastar e soltar.

Também vale citar que poderá fazer a otimização SEO para cada página do site de forma independente, isso também ajuda bastante! Para saber mais detalhes sobre os sites em HTML5 da Wix poderá ver em Criar um Site Grátis em HTML5 é com a Wix!

Tags | , ,

27

abr
2012

Sem Comentários

Em Blog
CSS
HTML

Por Allison

Sites usando HTML5 e CSS3

Em 27, abr 2012 | Sem Comentários | Em Blog, CSS, HTML | Por Allison

Fonte: James Leme/cssextremo

O uso do HTML5, em combinação com CSS3, está realmente começando a decolar. Safari, Chrome e Mozilla estão dando mais suporte a cada nova versão de seus navegadores.

A melhor maneira de aprender novas técnicas é tentando. Atualmente você já pode começar a usar HTML5 apenas mudando o tipo de documento.

<! DOCTYPE HTML>

Ele vai validar com o seu código atual, mesmo se você estiver usando XHTML ou HTML.

Para você se inspirar e começar a usar HTML5 e CSS3, listei alguns dos melhores sites usando essas tecnologias.

Edgar Leijs

Vaullt

Ella Design

Tags | , , ,

25

abr
2012

Sem Comentários

Em Blog
HTML

Por Allison

W3C revela progresso com HTML5 e vai desenvolver seu sucessor

Em 25, abr 2012 | Sem Comentários | Em Blog, HTML | Por Allison

Fonte: IMasters

Com informações de The H

O W3C liberou um comunicado sobre seu progresso com a especificação HTML5 e como planeja proceder a partir de agora. Como parte de seu plano de padronização, o HTML Working Group Chairs anunciou um segundo review para a última chamada para a especificação HTML5.

Um novo grupo de editores será necessário para realizar o processo de ratificação das especificações do HTML5 e do HTML Canvas 2D Context; ao mesmo tempo, o W3C irá refazer o contrato do HTML Working Group para começar a trabalhar na padronização da próxima versão do HTML. Como resultado desse processo, o trabalho no que deve vir a ser o HTML6 será executado em paralelo com o trabalho que ainda precisa ser feito para tornar o HTML5 um padrão completamente ratificado.

De acordo com o W3C, a adoção do HTML5 continua forte, assim como seu trabalho de implementação. Entretanto, a organização ainda não disse quando pretende finalizar a especificação, mas disse que a pesquisa por novos editores deve levar aproximadamente um mês.

Tags | ,

07

mar
2012

Sem Comentários

Em Blog
HTML

Por Allison

Quais as Vantagens Do Html5 Para o Usuário Comum?

Em 07, mar 2012 | Sem Comentários | Em Blog, HTML | Por Allison

Fonte: 170Web

Com Informação de http://www.tecmundo.com.br/flash/4587-quais-as-vantagens-do-html5-para-o-usuario-comum-.html


Anteriormente, nos artigos “O que é HTML5?” e “HTML5 x Flash: uma guerra iminente?”, o Baixaki descreveu como funciona o HTML5 e quais as principais diferentes entre este e o Adobe Flash.

No entanto, o que mudará em sua vida quando a tecnologia realmente vingar? Esse é o tema deste artigo e, com ele, você entenderá a razão pela qual o HTML5 é tão bem visto pelos desenvolvedores.

O que muda?

Um pouco sobre a linguagem: em termos simples, o HTML usa tags para estruturar as informações de um site. O HTML 5, por sua vez, é uma tentativa de padronizar a maneira como os navegadores interpretam as informações recebidas – cada um as interpreta de maneira distinta, o que pode resultar em distorções na visualização.

A principal mudança que talvez seja percebida pelos usuários seria a de você não precisar instalar diversos plugins para assistir a vídeos em diferentes formatos (dependendo do site eles são exibidos em Flash, QuickTime, Windows Media Player, etc.), assim como para exibir outros elementos da página que dependeriam dos mesmos plugins. Todavia, não se engane, o HTML 5 não veio para eliminar o Flash.

Por mais que alguns dos componentes do HTML 5 sejam capazes de executar funções similares às do Flash, é preciso levar em consideração que ainda são poucos os navegadores que suportam totalmente a tecnologia. Além disso, para sequer pensar nessa possibilidade, será necessário não só a compatibilidade do navegador, mas também vídeos em formatos adequados e uma total reestruturação dos sites que queiram substituir tudo pelo HTML5.

Em resumo, para os desenvolvedores, o HTML 5 deixa algumas tarefas mais simples e oferece outras maneiras de fazer as mesmas coisas. Já para os usuários, a mudança será percebida, principalmente, ao usar celulares – ou outros portáteis – para acessar a internet. Isso porque não haveria a necessidade de instalar plugins (algo nem sempre possível nos navegadores “mini”) para visualizar aquilo feito com HTML 5.

Tags | , , ,

29

fev
2012

Sem Comentários

Em Blog
HTML

Por Allison

HTML 5 – Coisas que ele ainda não faz…

Em 29, fev 2012 | Sem Comentários | Em Blog, HTML | Por Allison

Fonte: Gustavo D. Castro/CriarNet

Para quem não sabe o HTML 5 é a nova linguagem que veio para substituir o nosso já tradicional HTML 4 que já está em nosso convívio a mais de 10 anos. o HTML5 promete revolucionar a forma como criamos sites atualmente, ela traz importantes evoluções na linguagem de marcação e promete também substituir o uso do flash, porem a linguagem ainda está sendo desenvolvida apesar de já ser possível desenvolver um site usando o HTML 5.

A previsão oficial é que em 2014 seja liberada a versão estável da linguagem até certamente a linguagem evoluirá bastante, por hora veja o que ainda não é possível de se fazer com o novo HTML5.

O que ainda não podemos fazer usando o HTML 5

O HTML 5 não interage com uma webcam nem mesmo com um microfone

O HTML 5 ainda não permite interagir com uma webcam nem mesmo com um microfone, nem em ondemand (ao vivo) nem para fins de armazenamento de imagens ou sons, o que também impede aplicações de chat online ou vídeo conferencia.

O HTML5 não lida bem com efeitos 3D

Se pretende desenvolver uma animação com efeitos 3D repense se for escolher o HTML 5 para tal aplicação, o HTML cinco não é a melhor ferramenta para isso, o flash ainda domina tal trabalho.

Não é possível criar aplicações desktop com o HTML5

O Html 5 é simplesmente um desastre para desenvolver aplicações para desktop, talvez quando a linguagem estiver amadurecida esse aspecto melhores, por em quanto html 5 para aplicações desktop não.

O Html 5 ainda é muito limitado para lidar com vídeos

Trabalhar com vídeos no HTML5 ainda não é tarefa fácil já que a linguagem ainda não adiciona objetos em cima dos vídeos, como por exemplo títulos, propagandas, legendas, etc…

O Html 5 não faz quase nada que o ActionScript faz.

O Html 5 por enquanto faz somente algumas coisas que o ActionScript faz, muito limitado, por isso se deseja animações complexas, ainda sim terá que optar pelo flash.

Certamente o HTML5 evoluirá bastante e certamente substituirá por completo o uso flash, fato que comprova essa tese é que a Adobe já anúncios o fim do desenvolvimento do flash admitindo que o futuro da internet é a nova linguagem de marcação.

Tags | , , ,

29

fev
2012

Sem Comentários

Em Blog
CSS
HTML

Por Allison

Caixa de Feed Simples com CSS3

Em 29, fev 2012 | Sem Comentários | Em Blog, CSS, HTML | Por Allison

Fonte: Iago Melanias/BlogandocomFacilidade

No artigo de hoje, aprenderemos como inserir uma caixa de feed simples no Blogger. Precisamos sempre achar formas de conseguir mais leitores fidelizados, os feeds ligam muito os leitores aos blogs, e as caixas de assinar feed são táticas para conseguir mais assinantes. A caixa possui gradientes com CSS3 e tem um Design bem interessante. Temos abaixo a imagem que demonstra bem o que vamos inserir.


Vamos ao Tutorial:

1º – Acesse o painel do seu blog e clique na guia modelo.

2º – Clique no botão Editar HTML e segure as teclas CTRL+F e procure por:

]]></b:skin>

3º – E, acima dele, cole o seguinte código:

#input-rss {
width: 185px;
padding: 8px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 8px 0px inset;
box-shadow: rgb(204, 204, 204) 0px 0px 8px 0px inset;
-moz-box-shadow: rgb(204, 204, 204) 0px 0px 8px 0px inset;
border: 1px solid #CCC;
font-size: 12px;
height: 15px;
border-image: initial;
float: left;
margin-right: 6px;
}
#input-rss:focus {
border: 1px solid gray;
outline: none;
}
#btn-assinar {
cursor: pointer;
margin-top: -7px;
height: 31px;
color: white!important;
background: #1F9CD8;
background: -moz-linear-gradient(top, rgba(31, 156, 216, 1) 0%, rgba(14, 131, 201, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(31, 156, 216, 1)), color-stop(100%,rgba(14, 131, 201, 1)));
background: -webkit-linear-gradient(top, rgba(31, 156, 216, 1) 0%,rgba(14, 131, 201, 1) 100%);
background: -o-linear-gradient(top, rgba(31, 156, 216, 1) 0%,rgba(14, 131, 201, 1) 100%);
background: -ms-linear-gradient(top, rgba(31, 156, 216, 1) 0%,rgba(14, 131, 201, 1) 100%);
background: linear-gradient(top, rgba(31, 156, 216, 1) 0%,rgba(14, 131, 201, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f9cd8', endColorstr='#0e83c9',GradientType=0 );
border: 1px solid #085988;
font-size: 17px;
color: white;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 8px;
cursor: pointer;
float: left;
line-height: 12px;
text-shadow: 1px 1px 1px #117AAB;
filter: dropshadow(color=#117aab, offx=1, offy=1);
border-image: initial;
}
#btn-assinar:hover {
background: #1F9CD8;
}

4º – Depois, clique em Salvar Modelo.

5º – Agora, vá até a guia Layout e clique em Adicionar Gadget.

6º – Selecione o Gadget HTML/Javascript e no conteúdo dele cole o seguinte código:

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NOME DO SEU FEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input style="display: initial;" id="input-rss" class="input-rss" type="text" name="email" />
<input type="hidden" value="NOME DO SEU FEED" name="uri" /><input type="hidden" name="loc" value="pt_BR" />
<input id="btn-assinar" class="mais" style="width: 90px;margin-top: 1px;font-size: 15px;" type="submit" value=" ASSINAR " />
</form>

Lembre-se de substituir as duas partes que tem “Nome do seu Feed”.

7º – Depois, clique em Salvar.

Tags | , , ,

29

fev
2012

Sem Comentários

Em Blog
HTML
SEO

Por Allison

Como o HTML5 pode influenciar na otimização para mecanismos de busca (SEO)

Em 29, fev 2012 | Sem Comentários | Em Blog, HTML, SEO | Por Allison

Por Sergio Nascimento

Nova semântica do HTML5 e SEO devem andar juntas. Como critério de desempate, o site que tiver um conteúdo de qualidade bem organizado (HTML5/semântica) terá prioridade para mecanismos de busca, em especial o Google. E relevância de conteúdo envolve tanto um bom conteúdo – leia-se, o mais enxuto e aderente possível ao que você deseja transmitir em um post ou página do seu site ou portal – como um código bem estruturado e relevante em web semântica, sendo o HTML5 a opção mais confiável atualmente para organizar essas informações, “traduzindo-as” da melhor forma possível para os robôs de busca.

Pois bem. Pensando nisso, Sergio Nascimento aka Elvis Detona, especialista em web standards, HTML5 e CSS3, elaborou algumas dicas básicas para aqueles que desejam usar a nova semântica do HTM5 com o intuito de obter um posicionamento adequado nos buscadores:

Para mim, cada página tem que ter APENAS um <h1>, mas o W3C, na especificação do HTML5, coloca que cada section pode ter um <h1>, mas eu não uso assim.

“Se eu usar vários <h1>, o Google vai me punir?” O Google não vai punir… isso usando HTML5 ou não. A não ser que você use de forma inadequada.

Além disso, utilize as tags adequadas de acordo com o seu conteúdo, heading tags seguindo uma hierarquia, tag de navegação <nav>, cabeçalho <header>, conteúdo <section>, <article>, <p>, <video>, <audio>, <figure>… os novos types de formulário (email, search, url, tel…), link relations, microdata…

Volto a lembrar, o Google quer conteúdo com qualidade e semântica.

INFELIZMENTE, existem técnicas que “bagunçam” toda a organização do código/semântica a fim de se obter melhores resultados nos buscadores. (Essa de colocar vários h1 na página é lenda, ok?) Não é isso que o Google quer… mas em algumas situações, o resultado é bem melhor sim! Só tem que ficar esperto para não ser punido.

Quando você desenvolve um projeto é claro que quer resultado (conversão/venda de produto ou serviço), mas acho que não é só isso! EU, Sergio (@elvisdetona), penso num todo. Desenvolvo sempre meus projetos pensando num bom resultado nos buscadores e que seja o mais acessível/compatível possível com a maioria dos dispositivos que têm acesso à web.

Se você pensa “Eu preciso ficar em primeiro no Google a qualquer custo”, não se preocupe tanto com semântica e siga a orientação de caras especialistas em SEO.

Tags | , ,

21

fev
2012

Sem Comentários

Em Blog
HTML

Por Allison

Como saber se um site foi desenvolvido em html 5

Em 21, fev 2012 | Sem Comentários | Em Blog, HTML | Por Allison

Fonte: Gustavo D. Castro

Como saber se um site foi desenvolvido em HTML 5?

Simples, basta acessar o site, clickar com o botão direito do mouse sobre o site e solicitar que seja exibido o código fonte no mesmo, nas primeiras linhas você verá a citação referente ao ao DOCTYPE do site, essa linha diz ao navegador em qual HTML e sua versão que o site foi desenvolvido.

O HTML 5 diferente do HTML 4 dispensa citações de versões, basta um código para que ele diga ao navegador que se trata de HTML 5, por isso basta observar se o DOCTYPE está idêntico ao código abaixo:

<!DOCTYPE html>

Se estiver igual, o site está sendo interpretado como HTML5, se estiver diferente trata-se da versão 4. Mas atenção, apesar do site ter sido marcado como HTML 5 não quer dizer que o desenvolvedor utilizou os novos recursos da linguagem.

Outras opções para saber em qual HTML o site foi desenvolvido:

Foi desenvolvida uma extensão para quem utiliza o Crhome da Google, a extensão detecta automaticamente se o site foi ou não desenvolvido em HMTL 5. Para utiliza-la é simples, basta ter o navegador da Google instalado em seu pc, e acessar a seguinte url através dele: Extensão Google Chrome

Agora click em “instalar extensão” e proceda com a instalação normalmente. Reinicie o navegador e pronto! A partir de agora sempre que acessar um site que foi criado em HTML5 irá aparecer o ícone do mesmo logo após o endereço do site.

Tags | , , ,

20

fev
2012

Sem Comentários

Em Blog
HTML

Por Allison

Introdução ao HTML5, fatores que você não pode deixar de saber…

Em 20, fev 2012 | Sem Comentários | Em Blog, HTML | Por Allison

Fonte: Gustavo D. Castro/CriarNet

O HTML5 é a nova versão do nosso já conhecido HTML 4.1 trata-se de uma linguagem de marcação já utilizada a mais de 10 anos, ela traz importantes evoluções e promete revolucionar e muito a maneira em que navegamos nos sites atualmente.

A grande verdade é que o HTML 5 veio para ficar e aos poucos dominará o mercado até substituir de vez o atual html que usamos hoje, então que tal ficar por dentro do assunto? Veja cinco fatores sobre o HTML5 que você deveria saber.

HTML 5 revolucionará a tradicional linguagem de marcação.

Com o HTML 5 o HTML deixa de ser apenas uma linguagem de marcação, logicamente ela não deixará de ser uma linguagem de marcação com todos os recursos existentes no HTML 4 mas ela passará a ser uma linguagem mais completa que nos permitirá fazer muito mais que realizar a marcação html nas páginas mais também fazer animações, sistemas, etc… O Html 5 veio para enriquecer e revolucionar a internet.

Seus conhecimentos em HTML 4 serão extremamente uteis para desenvolver em HTML5

Ao contrario do que muita gente pensa a respeito do HTML5 todos os seus conhecimentos em relação ao html 4 serão extremamente uteis, por isso não pense que eles ficarão no passado, pois o HTML 5 engloba tudo que usamos atualmente porem com recursos extras. O que terá que fazer é aprender os novos recursos do HTLM 5 para implementa-los em seus novos projetos.

Não seria possível maneira mais fácil de usar HTML 5

Para quem não sabe definimos a linguagem de nossas páginas com uma simples declaração no inicio das páginas, no HTML 4 existem uma infinidade de variações de declarações que podemos usar, mas no html 5 existe apenas uma que ja diz tudo que o navegador precisa saber: “Trata-se de HTML5”

<!DOCTYPE html>

HTML 5 ainda não está pronto, mas já funciona…

A versão final do HTML5 ficará pronta e disponível em 2014 certamente muita coisa ainda será acrescentada a linguagem porem o HTML já está liberado para a utilização, quem desejar já pode programar seus novos layouts em HTML5, porem é importante saber que alguns navegadores mais antigos não interpretarão da maneira corretas as páginas, agora fica a seu critério, programar pensando no que já é passado como por exemplo o Internet Explorer 6 ou programar pensando no futuro que nesse caso está muito bem representado pelo HTML 5.

Html5 definitivamente veio para ficar.

Com a chegada do HTML 5 muita coisa mudará na internet e já está mudando, um fato que pode comprovar essa evolução é que a Adobe produtora do Flash já anunciou o fim da ferramenta, já anunciou também mais de 300 demissões e divulgou que a empresa será re-estruturada e novos produtos voltados a web surgirá.

O HTML 5 na verdade forçou a empresas a mudar seus rumos ja que a linguagem englobará tudo aquilo que o flash faz atualmente. Até mesmo nos resultados de pesquisa o hatml5 influenciará, já que os bots terão muito mais facilidade de realizar a leitura das páginas.

Com tudo isso, podemos afirmar que o HTML 5 é o futuro da internet.

Tags | , , ,

13

fev
2012

Sem Comentários

Em Blog
HTML

Por Allison

O Dilema da Sintaxe no HTML5

Em 13, fev 2012 | Sem Comentários | Em Blog, HTML | Por Allison

Fonte: BlogdoExpert

Fechar ou não as tags? Colocar os valores de atributo entre aspas? Estas escolhas nem sempre podem ser uma questão de gosto.

Com o HTML5, a sintaxe volta a ser aquela do HTML, sem as restrições preconizadas pelo XHTML (todas as tags com fechamento, tags e propriedades em minúscula, valores de propriedades entre aspas, etc). E os desenvolvedores voltaram a se sentir livres para codificar o HTML da forma que lhes é mais conveniente.

Bom, não é bem assim. Embora o XHTML fosse frustrante com relação à semântica e não era tão revolucionário quanto propunha, as regras mais rígidas de sintaxe foram seu maior legado. O código escrito era consistente e, se não seguisse as regras, não iria renderizar corretamente no navegador. Além disso, era compreensível para qualquer desenvolvedor. É uma questão de organização e padronização, como uma diretriz que normatiza o comportamento dos elementos para que haja qualidade e consistência.

Pense nas linguagens que você conhece, tanto de programação, quanto de marcação, estilo, etc. Por exemplo: PHP, CSS, XML, JS. Todas possuem regras de sintaxe que, se não forem seguidas, o código não funcionará. Quem programa em PHP sabe que se esquecer um único ponto-e-vírgula, compromete a interpretação de todo o código. O JS, apesar da flexibilidade com relação a o ponto-e-vírgula no final da linha, é case sensitive, ou seja, há diferença entre o que é escrito em maiúsculas e minúsculas.

Em grande parte das linguagens existentes, há uma sintaxe a ser respeitada e esta serve para que o código seja bem formado e tenha uma estruturação lógica, definindo um sentido para a interpretação do código. Basta remetermos ao significado original de sintaxe, que herdamos da linguística:

A sintaxe é a parte da gramática que estuda a disposição das palavras na frase e das frases no discurso, incluindo a sua relação lógica, entre as múltiplas combinações possíveis para transmitir um significado completo e compreensível. […] É o ramo que estuda os processos generativos ou combinatórios das frases das línguas naturais, tendo em vista especificar a sua estrutura interna e funcionamento.

Fonte: http://pt.wikipedia.org/wiki/Sintaxe (grifo nosso)

Algumas práticas recomendadas:

  • Utilizar todos os elementos e atributos em minúsculas;
  • Incluir tag de abertura de fechamento para as tags que possuem conteúdo (no caso de tags órfãs, como <img>, <input>, <meta>, isto não fica tão grosseiro se for escrito com a sintaxe do HTML);
  • Inserir todos os valores de propriedades entre aspas duplas; Via Tableless

Tags | , ,