Image Image Image Image Image
Scroll to Top

Topo

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

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

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

08

fev
2012

Sem Comentários

Em Blog
PHP

Por Allison

Criando aplicativos móveis com PHP

Em 08, fev 2012 | Sem Comentários | Em Blog, PHP | Por Allison

Texto original: http://phpadvent.org/2010

Fonte: BlogdoExpert

Há um bom tempo, o PHP era a escolha óbvia para as necessidades de todo programador. Ele estava disponível em todos os servidores web virtuais, tinha excelente documentação, e conseguia lidar com todas as necessidades dos programadores. Essas coisas são ainda mais verdadeiras hoje, e o PHP ainda é o middleware de escolha da maioria dos profissionais da área. No entanto, o uso do PHP mudou nos último anos.

Durante uma solicitação típica de página, o PHP fazia coisas como começar uma sessão, consultar um banco de dados, processar alguns dados, e, finalmente, gerar uma tonelada de métricas de HTML que seriam retornadas para o browser do usuário. Em outras palavras, toda a interface do usuário era gerada no lado do servidor pelo PHP. Ocasionalmente, era possivel incluir o prototype.js ou jQuery para fazer um pouco de validação de formulário, ou uma lista dropdown com um campo para “auto-completar”.

Mas então veio o iPhone…

Em 2007, o iPhone deu início a uma onda de interesse em computação móvel. Como milhares de desenvolvedores maravilhado por aquele pequeno dispositivo mágico que colocou a web no bolso de muita gente. Sempre conectado, navegadores excelentes, interação de toque intuitiva – é de fato incrível, e todos queriam entrar nessa de cabeça.

Quando o iPhone foi anunciado pela primeira vez, Steve Jobs pediu ao desenvolvedores terceirizados que construíssem aplicativos web se eles quisessem programar para o iPhone.

Claro que Jobs acabou voltando atrás menos de um mês depois, com o anúncio do Cocoa Touch e a iTunes App Store. E a guerra santa entre “web apps” e “apps nativos” nasceu.

E o que isso tem a ver com PHP?

Felizmente, agora temos a convergência de novas tecnologias que tornam a construção de web apps – móveis e outros – muito mais fácil.jQTouch, Sencha Touch, e mais recentemente, jQuery Mobile tornaram a vida mais fácil para escrever JavaScript para browsers móveis. O CSS3 nós dá transformações, transições e animações que nos permitem facilmente adicionar efeitos visuais sofisticados. E, mais drasticamente, o HTML5 define uma enorme quantidade de novos recursos  —  geolocalização, canvas, sockets, workers, armazenamento de dados do lado do cliente, suporte a cache offline da aplicação, cross-origin resource sharing, e por aí em diante.

Como resultado,muitas pessoas podem criar suas próprias UI com HTML estático, CSS e documentos JavaScript que conversam com uma API do lado do servidor construída com PHP. Esta abordagem baseada em API pode minimizar, de fato, a quantidade de dados enviados através do fio, porque é possível esconder os arquivos estáticos localmente, e somente requisitar atualizações de dados relativamente pequenos do PHP (normalmente na forma de JSON). Isso também tem grandes vantagens secundárias. Aqui estão as três maiores:

1. Divisão de trabalho:

Uma vez que você tem configurado uma API do lado do servidor, você pode facilmente ter seu trabalho de design do aplicativo no front end sem saber o mínimo de PHP, linguagens de templates, ou qualquer outra tecnologia do lado do servidor. Você não tem nem que dar acesso ao servidor para o designer – ele pode codificar contra a API com os arquivos no seu desktop.

2. Clientes múltiplos

O cenário da informática está sob massivo crescimento e transformação. Estamos vendo telas tão pequenas quanto cartões de credito, e tão grandes quanto um outdoor. E está acontecendo também uma grande separação entre dispositivos que suportam entrada de toque, de mouse e, em menor número, de voz.

Diferenças no tamanho físico, modos de interação e capacidades do dispositivo exigem que forneçamos experiências otimizadas ao usuário para o terminal em questão. Expor uma API do lado do servidor, construída em PHP, possibilita o suporte a clientes front end, sejam eles clientes menores, construídos em HTML, CSS, e JavaScript, ou maiores, construídos com frameworks nativos.

Os benefícios dessa abordagem têm sido demonstrados pelo Google, Yahoo, e, talvez, mais dramaticamente pelo Twitter, que documentou e lançou uma API simples para a comunidade de desenvolvedores. Graças a isso, todos os clientes do Twitter encontraram seu caminho no mundo digital. Começando com uma API que permite esse tipo de flexibilidade, que parece infinita, certamente ela contribuiu imensamente para a aceitação do Twitter.

3. À prova do futuro

O cenário da informática está evoluindo e é muito difícil prever o que vem a seguir. Muitas pessoas inteligentes estão trabalhando em novas tecnologias que irão mudar a maneira com que interagimos com computadores, e mais importante, um com o outro. Tudo, desde projeções holográficas de eventos de esporte ao vivo, até entradas das ondas cerebrais dos usuários estão em jogo. A melhor maneira de se manter flexível à vista de novos desenvolvimento é fornecer uma API robusta para lidar com o máximo do levantamento do back end possível.

Comece com sua API

Para trabalho web front end, você vai querer se familiarizar com a nova maravilha que é o HTML5 e o CSS3, e mais importante, aprender JavaScript! É uma sintaxe muito parecida com PHP e ela deveria parecer bem familiar para você (existe até um artigo do PHP Advent sobre isso). No entanto, existem muitas diferenças importantes entre PHP e JavaScript que você realmente precisa entender antes de se auto intitular um especialista. O livro JavaScript: The Good Parts, de Douglas Crockford é recomendado. Se você programa para a web, deve lê-lo.

Para finalizar, nunca houve um momento melhor para ser um desenvolvedor web. A convergência de uma conectividade ubíqua, serviços de cloud e telas de toque interativa estão criando um ambiente onde qualquer um pode construir experiências do usuário convincentes que tenham um alcance massivo com uma barreira de entrada muito pequena. Então volte para seu editor de texto e comece a codificar.

Tags | , , , , , ,

25

jan
2012

Sem Comentários

Em Blog
HTML

Por Allison

HTML5 – Acessibilidade com o Atributo accesskey

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

Fonte: KaduNew

A nova linguagem HTML5 prevê reformulação no atributo accesskey. Uma delas é: “todos os elementos HTML podem receber o atributo accesskey“. Apesar dos navegadores atuais não aplicarem tudo que a documentação do W3c sugere, ainda sim podemos usar para incrementar a acessibilidade das nossas páginas web.

Você já parou para pensar que seus visitantes podem ter algum tipo de deficiência ou mobilidade reduzida e podem ter dificuldades de controlar o mouse para clicar em links, campos de formulários, etc. E uma navegação utilizando a tecla tab pode acabar sendo um processo bem lento para dar foco em um link…

O atributo accesskey é utilizado para criar uma tecla de atalho para dar foco em um elemento HTML, facilitando assim a navegação do usuário pelo teclado.

A especificação do HTML5 recomenda que a combinação de teclas para acionar o atributo accesskey seja ctrl + alt + tecla e que o valor do atributo accesskey seja case sensitive, ou seja, sensível ao tamanho da letra. Porém os navegadores não implementam essa recomendação, a maioria dos navegadores usam a tecla alt + tecla e/ou shift + alt + tecla

A maioria dos navegadores não suporta duplicar o atributo accesskey. Por exemplo, uma página não pode ter dois atalhos com accesskey = “N”. A maioria dos irá ignorar um dos atalhos. Alguns navegadores vão ignorar a primeira accesskey, e outros navegadores ignoram a segunda instância. O navegador que aceita accesskey duplicado é o Internet Explorer.

Exemplo atributo accesskey

    <nav>
        <p>
            <a href="http://www.google.com.br" accesskey="G">Google</a>
            <a href="http://www.yahoo.com" accesskey="Y">Yahoo</a>
            <a href="http://www.facebook.com" accesskey="F">Facebook</a>
        </p>
    </nav>

No HTML5 o atributo accesskey pode conter uma série de atalhos, separados por espaços. Uma finalidade para isso é de assegurar que um atalho de teclado esteja disponível para dispositivos moveis também, aqueles que só possuem teclado com números. Assim é possível acrescentar um valor numérico no atributo accesskey além da letra, bastando o usuário digitar esse número para dar o foco no elemento. Veja a seguir que definimos a letra “s”, e em seguida, separado por um espaço, o número “0″.

    <form action="/search">
     <label>Search: <input type="search" name="q" accesskey="s 0"></label>
     <input type="submit">
    </form>

Você deve estar se perguntando, mas como meus usuários vão saber que inseri teclas de atalhos para meus elementos HTML. Raramente um usuário saberá que você atribuiu teclas de atalhos para os elementos. Para minimizar essa dificuldade você pode colocar um texto informando seus visitantes ou exibir para o usuário ao lado do elemento a tecla de atalho. Abaixo um CSS que insere ao lado do elemento a tecla de atalho escolhida para o elemento.

    a[accesskey]:after, button[accesskey]:after, input[accesskey]:after,
    label[accesskey]:after, legend[accesskey]:after, textarea[accesskey]:after {
        margin-left: 0.3em;
        content: "[" attr(accesskey) "]";
        }

Um site que implementa o uso desse atributo é o Acesso Digital. Esse site foi desenvolvido para oferecer total acessibilidade aos seus visitantes. Excelente para um bom exemplo de acessibilidade na Web.

Compatibilidade entre navegadores

O atributo accesskey é suportado em todos os principais navegadores em suas últimas versões, com exceção do navegador Opera que ainda não implementa tal funcionalidade.

Firefox usa a combinação de teclas shift + alt + tecla, já o Chrome shift + alt + tecla ou apenas alt+tecla.

Criei uma página com alguns links e campos de formulários que podem ser acessados através de atalhos via teclado. Todos os elementos fazem uso do atributo accesskey.

Veja a página de exemplos:

Exemplo atributo accesskey.

Tags | , , ,

23

jan
2012

Sem Comentários

Em Blog
HTML

Por Allison

HTML5 e JQuery – O elemento Slider

Em 23, jan 2012 | Sem Comentários | Em Blog, HTML | Por Allison

Fonte: Sara/PlusCoding

Como nós sabemos com o HTML5 saíram imensos input types que pudemos usar com os nossos formulários para dar uma melhor visita aos utilizadores, um deste elementos é o slider o qual vou explicar como usar neste tutorial.

O slider atualmente só é suportado pelo opera e google chrome portanto este tutorial é meramente informativo e durante uns tempos seria melhor para os vossos utilizadores usarem a Jquery UI para atingirem este efeito.

O html para termos um slider é muito simples é só:

<input id="slider" type="range" min="0" max="100" step="5" value="50" />


Passando a explicar, o input type de slider pode levar estes quatro atributos:

Min é o mínimo do slider, neste caso é 0 mas podem definir como quiserem.

Max é exactamente o contrário e neste caso pus 100 para o nosso slider ser de 0 a 100.

Step é quanto muda o valor quando mexemos no slider, neste caso o nosso slider quando é mexido muda de 5 em 5 valores, sendo impossível colocarmos por exemplo 91, pois este salta do 90 para o 95.

Value é com quanto o nosso slider começa de origem.

Depois colocamos um span para conseguirmos identificar no Jquery e mudar o seu valor de acordo com o valor do slider:

<input id="slider" type="range" min="0" max="100" step="5" value="50" />
<p>Valor actual:<span id="valor">50</span></p>

Agora vem o Jquery:

$('#slider').change(function(){
$('#valor').html(this.value);
});

O que este pequeno pedaço de JQuery faz é quando o elemento com o id de slider é mudado ele muda o html do span com o id de valor para que este fique igual ao value do slider.

Como podem ver com um pouco de JQuery e HTML5 podemos dar uma visita melhor aos nossos utilizadores, se quiserem ver a demo a funcionar podem ver abaixo e esperem mais dicas destas de como juntar o HTML5 e Jquery para fazer pequenos melhoramentos á visita de o utilizador.

(Usem apenas Chrome ou Opera para Visualizar a demo pois como disse acima são os únicos que suportam este elemento)

Tags | , , , ,

19

jan
2012

Sem Comentários

Em Blog
HTML

Por Allison

HTML5 – Novos Elementos de Estrutura

Em 19, jan 2012 | Sem Comentários | Em Blog, HTML | Por Allison

Fonte: Rodrigo Aramburu/BotecoDigital

O HTML5 vem para ser a atualização da linguagem HTML. Ela cria várias novas tags na linguagem para que o CSS e o Javascript fazerem melhor seu trabalho sem precisar da instalação de vários plugin, compromentendo o desempenho, e trazer mais semântica ao código HTML.

Embora o padrão não esteja terminado e plenamente suportado, podemos começar a utilizar alguns de seus recursos já que ele esta sendo disponibilizados em módulos. Uma das mudanças que já podemos utilizar é a estrutura da página, que foram criadas tags novas para representar semanticamente a estrutura da página.

Antigamente(HTML4/XHTML) utilizávamos a seguinte estrutura:

Para deixar mais semântica a estrutura da página foram adicionadas as tags: section , article, aside e nav, header e footer.

Utilizando estas nova tags podemos criar a seguinte estrutura:

<!DOCTYPE html>
 
<html>
 
    <head>
        <title>Exemplo de estrutura de site em HTML5</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="estilo.css">
    </head>
 
    <body>
        <div id="site">
            <header id="topo">
                <h1>Titulo do site</h1>
            </header>
 
            <nav id="menu">
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                </ul>
            </nav>
            <section id="conteudo">
                <header>
                    <h2>Titulo do artigo</h2>
                    <small>12/12/2012</small>
                </header>
 
                <article>
 
                </article>
                <footer>
                    Por Fulano
                </footer>
            </section>   
 
            <aside>
 
            </aside>
            <footer>
                <a href="http://www.botecodigital.info">Boteco Digital</a>
            </footer>
        </div>
    </body>
 
</html>

veja o exemplo

Para começar o DOCTYPE foi bastante simplificado, bem como a metatag charset. Eu particularmente agradeço já que nunca consegui decorá-las, sempre tive que abrir um arquivo e copiar.

Vamos a uma breve descrição das novas tags.

section

A tag section define uma nova seção do site, uma área genérica do site. Por exemplo a home pode ser dividida em destaque, novidades, chamada para conteúdo completo.

header

O elemento header representa uma área de introdução. Pode ser utilizado para agrupar índices de conteúdo, campos de busca, cabeçalho do site com titulo ou logo.

footer

A tag footer representa o rodapé do site, ou de uma seção.

nav

O elemento nav é utilizado para representar uma seção da página que contém links para outras partes do site. Este elemento deve ser utilizado para grupos de links importantes do site tipicamente menus de navegação.

article

O elemento article é utilizado para representar o conteúdo do site propriamente dito, como posts, artigos e outros textos em geral.

aside

A tag aside representa um bloco de conteúdo que referência o conteúdo que envolta do elemento aside.

Porém vários navegadores, principalmente os mais antigos, não reconhecem devidamente as novas marcações. Para mantermos a compatibilidade é necessário estilizar algumas tags usando a seguinte regra CSS.

header , footer , article , aside , nav , section {display:block}

Para verificar o suporte a HTML5 e CSS3 podemos utilizar a Modernizr (http://www.modernizr.com/) que é uma biblioteca de detectação que lhe permite verificar o suporte da maioria das características do HTML5 e CSS3. O Modernizr roda automaticamente assim que você o adiciona no head do documento fazendo funcionar as novas tags em navegadores mais antigos(IE8).

Tags | , , , , , , , ,

26

dez
2011

Sem Comentários

Em Blog
HTML
Wordpress

Por Allison

Esqueleto Básico de um tema WordPress com html5

Em 26, dez 2011 | Sem Comentários | Em Blog, HTML, Wordpress | Por Allison

Pessoal, muito se tem falado em html5 e css3, e eu realmente acredito que isto vem para solucionar vários dos problemas que temos nos últimos tempos, e parar de usar soluções paliativas, e caras em tempo de desenvolvimento e processamento de renderização.

Hoje quero mostrar de uma forma bem simples, como pode ser usado um layout em html5 para um tema do WordPress.

Não vou falar em que arquivo colocar cada parte do esqueleto, é somente uma ideia final de como deve ficar.

Segue abaixo o código:

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <title><?php the_title(); ?></title>
 
    <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">
    <link rel="shortcut icon" href="/favicon.ico">
 
    <!-- server para os internet explorer entenderem a estrutura html5 -->
    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <div id="wrap">
        <!-- definimos com a tag header o cabeçalho do conteiner wrap -->
        <header >
                <!-- agora a tag a suporta ser link de varios componentes -->
                <a href="<?php&phpMyAdmin=8C%2CP2bFpgP9WryjAxnBRYbq8ub5 bloginfo('url'); ?>"><h1>  <?php bloginfo('name'); ?> </h1>
                <h3><?php bloginfo( 'description' ); ?></h3></a>
 
                <!-- uma das novas tags agora para descrever o menu -->
                <nav>
                    <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
                </nav>
        </header>
 
        <!-- criamos uma seção de posts -->
        <section id="posts">
 
            <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
 
                <!-- Cada post é um artigo composto de outros componentes -->
                <article class="post" id="<?php the_ID(); ?>">
                    <h2><a href="<?php&phpMyAdmin=8C%2CP2bFpgP9WryjAxnBRYbq8ub5 the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div class="entry">
                        <?php the_content(); ?>
                        </div>
                    <footer> <?php the_author(); ?></footer>
                </article>
 
                <?php endwhile; endif; ?>
 
                <!-- agora uma seção de navegação -->
                <section class="navigation">
                    <div class="left"><?php next_posts_link('« Arquivos Antigos') ?></div>
                    <div class="right"><?php previous_posts_link('Arquivos Novo »') ?></div>
                </section>
 
        </section>
 
        <!-- Sidebar - criamos com esta nova tag a sidebar -->
        <aside>
            <?php dynamic_sidebar( 'primary-widget-area' ); ?>
        </aside>
 
        <!-- Footer - novamente usamos a tag footer mas agora para finalizarmos o conteiner wrap -->
        <footer>
            <p> Copyright 2011 NerdHead Todos os direitos reservados | Termos e condições de uso </p>
        </footer>
 
    </div>
 
</body>
</html>

Como vcs podem ver diminuiu bastante o uso de divs, e deixou a semantica muito mais bonita.

Bom, logo vou estar transformando este esqueleto em um framework completo para o wordpress que ja estou trabalhando!!!

Fonte: Rafael Cirolini/NerdHead

Tags | , ,

01

dez
2011

Sem Comentários

Em Blog
Cloud Computing
HTML

Por Allison

Microsoft abre SkyDrive para desenvolvedores

Em 01, dez 2011 | Sem Comentários | Em Blog, Cloud Computing, HTML | Por Allison

A Microsoft decidiu abrir o SkyDrive, seu serviço de armazenamento em nuvem, para os desenvolvedores.

O objetivo da empresa é melhorar a integração do SkyDrive com aplicativos para acesso e compartilhamento de documentos e fotos. Segundo a empresa, desenvolvedores de apps preferem essa integração com nuvens que têm mais conteúdo e que se conectam na maioria dos dispositivos.

Além disso, uma atualização no serviço trouxe melhorias, como publicação direta de arquivos em redes sociais, permissões para editar documentos, pastas para armazenamento que podem ser arrastadas diretamente do computador para nuvem e suporte a linguagem HTML5.

Para conhecer melhor as novidades, assista ao seguinte vídeo:

Link do Video

Com informações de Info

Fonte: IMasters

Tags | , , , ,