[Dica] Navegadores x Elementos HTML5, CSS3 e JS

Tá afim de usar um recurso novo no seu site e não sabe quais navegadores tem suporte para isso? É fácil saber! Não precisa testar em cada versão de navegador para saber. Existem alternativas na internet e te mostrarei uma bem legal.

suporte html css3 js - Pesquisa Google

Através do site oficial do framework Bootstrap, achei essa dica do site CanIuse.com onde você pode verificar e até comparar quais navegadores, tanto para desktop como para dispositivos móveis, tem suporte para cada recurso das novidades do HTML5, CSS3 e JavaScript.

Uma gama de informações podem ser verificadas, facilitando sua vida na hora de saber se alguma demanda específica de cliente pode ser atendida com seu novo projeto.

Teste e me digam o que acharam, ok? Abraço e até mais.

Programador, teste seus códigos ONLINE!

As vezes não temos instalado na máquina que estamos toda a estrutura necessária para testarmos nossos códigos. Quantas vezes você já passou por isso? Eu, várias. E por ter esse problema, procurei por várias soluções. Na pesquisa descobri várias soluções de sites que permitem você compilar, debugar e testar seu trecho de código ali mesmo, pelo navegador.

As dicas a seguir valem para várias linguagens, dentre elas as mais usadas como PHP, CSS, JS, Python, C e até JAVA. Utilizando essas você pode rapidamente testar e compilar nas mais variadas linguagens de programação existentes e ver o resultado imediatamente.

 

Continue Lendo “Programador, teste seus códigos ONLINE!”

JavaScript – Uma Visão Geral, Hoje

Olá meus amigos. Hoje falaremos sobre a linguagem JavaScript.js-cover

O objetivo é mostrar uma visão de cima sobre a linguagem de scripts fundamental na web atual, sua estrutura e como desenvolver boas práticas para a programação da mesma. Este meu artigo tem várias fontes, sendo a principal delas o site de desenvolvedores da fundação Mozilla.

Introdução

Enquanto nós temos a linguagem HTML como a base para a formatação do conteúdo em uma página web e o CSS como o configurador e determinador dos estilos e aparência da mesma, o JavaScript tem sido usado desde sua criação para tornar os sites mais interativos com o usuário final. Porém, de anos para cá, a linguagem não se restringe apenas a essa função, evoluindo e muito na forma de tratar informações na web.

Por esse fator, o “JavaScript” genérico é entendido contendo tanto elementos de sua linguagem original (a ECMAScript), como de suas coleções de Web API’s, dentre elas o DOM (Document Object Model).

O núcleo da JS é padronizado pelo comitê ECMA TC39, cuja linguagem é chamada de ECMAScript. Essa linguagem é usada também em ambientes no-browser, como no Node.JS.

O que se encaixa na ECMAScript?

Dentre outras coisas, a ECMAScript define:

– A sintaxe da linguagem (suas regras básicas, palavras chave, Controle de fluxo, inicialização de objetos, etc…)
– Mecanismos de correção de erros
– Objetos Globais (global object)
– Mecanismos de herança baseadas em protótipos, e etc.

Suporte nos Navegadores

Desde abril de 2013, a versão que os principais navegadores tem suportado é a ECMAScript 5.1, mas navegadores mais antigos mantém o suporte à linguagem na versão 3, e em algumas partes na versão 5.

Infelizmente, os desenvolvedores web tem percebido na prática que o DOM acaba sendo uma bagunça.  O suporte ao navegador varia muito de recurso para recurso. A principal razão para esta situação é o fato de que muitos recursos DOM importantes tiveram muito pouco clara as especificações (isso quando há). Além disso, diferentes navegadores adicionaram recursos incompatíveis que acabam por sobrepor outros (como é o modelo de eventos do Internet Explorer).

Mas atualmente há de se animar, visto que a W3C e a WHATWG estão definindo um melhor padrão para os navegadores, com o lançamento oficial do HTML5 como uma linguagem definitiva. Seguindo essa tendência, os navegadores estão melhorando suas implementações com base nessas especificações, o que deixará o processo de desenvolvimento mais equilibrado entre navegadores.

O mais seguro atualmente tem sido utilizar bibliotecas JavaScripts, pois elas permitem um padrão mais confiável e certas garantias de funcionamento em diferentes navegadores. As principais bibliotecas hoje em utilização são JQuery, Prototype e YUI.

[série] A estrutura e a semântica do HTML5 – Parte 3 (final)

… Continuação. Parte 3 do artigo/tutorial A estrutura e a semântica do HTML5

Ferramentas

Bem, chegou a hora de falar sobre as ferramentas. Talvez você espere que eu fale aqui sobre o Dreamweaver – afinal, bem ou mal, é o editor mais popular. Mas não, não falarei do Dreamweaver, nem de nenhuma ferramenta da Adobe.

Vou comentar aqui sobre três ferramentas que acho bem mais interessantes para o nosso trabalho (afinal, são as ferramentas que eu uso no meu trabalho). A primeira é a IDE Aptana Studio 3, a segunda é o editor Sublime Text 2, e a terceira é o HTML5 Boilerplate.

Aptana Studio 3

Aptana

Aptana (http://www.aptana.com/products/studio3) é uma IDE Open Source multi-plataforma para desenvolvimento web baseada no Eclipse, e sempre se destacou como um dos melhores editores para HTML, CSS e Javascript.

Nessa versão 3, o Aptana trás diversas novidades, entre elas o suporte integrado a PHP, Ruby on Rails e Python. Mas entre as novidades que mais me agradaram está o suporte ao HTML5 e ao CSS3, além do Zen Coding que antes necessitava da instalação de um plugin, e agora também está integrado aoAptana.

Aptana possui um dos melhores (senão o melhor) assistentes de desenvolvimento de código, que inclui informações sobre o nível de suporte para cada elemento nos principais navegadores. Nessa versão 3.0 ele traz suporte na criação de HTML, CSS, JavaScript, PHP e Ruby, além de suportar as mais recentes especificações HTML5 e CSS3.

Também é possível personalizar o seu ambiente de desenvolvimento, ampliando os recursos por meio de scripts com centenas de comandos personalizados, que o Aptana apresenta de acordo com o contexto do tipo de documento que estivermos editando.

Sublime Text 2

Sublime Text

Sublime Text (http://www.sublimetext.com/) foi o editor que desde a primeira vez que utilizei, me apaixonei e não larguei mais. Isso porque ele é muito leve, sem frescuras, limpo e com visual muito agradável.

É um editor simples, mas com funções muito úteis. Com ele você pode otimizar uma série de tarefas com recursos de auto-completar, repetir ações, construção automática e criação de macros, além de poder personalizar teclas de atalho, menus e barra de ferramentas.

A interface do Sublime Text te dá a possibilidade de dividir a tela em várias janelas, mudar as cores, visualizar uma miniatura de todo o código e navegar por abas entre documentos. Além de tudo isso, ele dá suporte para uma vasta gama de linguagens, como C, C++, C#, CSS, HTML, Haskell, Java, LaTex, PHP, Ruby, SQL, XML, JavaScript, Groovy e várias outras. Sem dúvida nenhuma, esse é o editor que eu recomendo para o seu trabalho.

HTML5 Boilerplate

HTML5 Boilerplate

HTML5 Boilerplate (http://br.html5boilerplate.com/) nada mais é do que um template HTML5 para servir como base aos seus projetos. Ele foi criado utilizando os melhores modelos de HTML/CSS/Javascript, com as melhores práticas de normalizações cross-broswer, otimizações de desempenho, e até mesmo de recursos opcionais como cross-domain para Ajax e Flash. Possui um arquivo .htaccess de configuração do Apache com regras de cache preparado para o seu site oferecer vídeos em HTML5, usar @font-face, comprimir com gzip, entre outras coisinhas mais.

HTML5 Boilerplate definitivamente é a melhor opção para você começar a trabalhar com HTML5 a partir de uma base sólida e bem construída. Você pode tanto baixá-lo através do site, como também pode gerá-lo através do Aptana Studio 3, no momento da criação de um projeto.


Gostou do post? Achou as informações úteis, ou falta alguma coisa? Comente e deixe sua opinião, vamos compartilhar informação 😉

[série] A estrutura e a semântica do HTML5 – parte 2

… Continuação da série sobre  A estrutura e a semântica do HTML5.

Charset

A metatag Charset é usada para indicar a codificação de caracteres que a nossa página está utilizando. No exemplo abaixo, estamos indicando uma codificação de caracteres do tipo:

<meta charset="utf-8">

Essa metatag foi simplificada em relação a forma que era utilizada na versão anterior do HTML. Porem, a forma antiga ainda é suportada no HTML, apesar de não recomendada:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

A semântica das novas marcações

Em todas as páginas da Web existem divisões básicas referentes aos tipos de conteúdo que são colocados em cada parte do layout, como cabeçalho, rodapé ou menu de navegação.

Nas versões anteriores do HTML não haviam tags com uma semântica apropriada para cada uma dessas divisões. Dessa forma, os desenvolvedores acabavam usando a tag <div> para todas as situações, e criando seus próprios padrões de nomeclaturas através dos atributos id ou class.

No HTML5 foram criadas diversas tags semânticas para indicar aos user-agents quais conteúdos estão sendo inseridos em cada uma das divisão da página, organizando e padronizando o desenvolvimento.

Anatomia do HTML5

Cabeçalho com o elemento <header>

O elemento <header> é usado para definir o cabeçalho de uma página ou sessão, e pode conter logo, títulos, menu de navegação, campo de busca, etc.

<header>
   <img alt="logo" src="/img/logo.png">
   <h1>Entendo a estrutura e semântica do HTML5</h1>
   <form action="www.enderecodosite.com.br/search" id="searchform" method="get">
       <label for="s">Pesquisa</label>
       <input type="text" placeholder="Pesquisa" id="s">
       <input type="submit" value="Pesquisa" class="submit">
   </form>
</header>

Dentro do <header> podemos também inserir o elemento <hgroup>, que serve para agrupar dois ou mais elementos de títulos (h1 até h6), organizando-os hierarquicamente. O elemento <hgroup> foi descontinuado e não deve mais ser usado.

O site http://destroyafteruse.com/ utiliza a marcação <header> em seu cabeçalho, como podemos ver (de forma simplificada) logo abaixo.

<header>
	<h1><a href="http://destroyafteruse.com/">Agent</a></h1>
	<p id="site-description">Disruptive Innovation &amp; Strategic Product Design</p>
	<div id="logo"><a href="http://destroyafteruse.com/"><img src="logo.gif"></a></div>
	<p class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></p>	                
        <nav>
		<ul>
			<li><a href="http://destroyafteruse.com/category/news">News</a></li>
			<li><a href="http://destroyafteruse.com/about-agent">ABOUT AGENT</a></li>
			<li><a href="http://destroyafteruse.com/category/missions">Top Missions</a></li>
			<li><a href="http://destroyafteruse.com/the-way-of-the-agent">THE AGENT WAY</a></li>
			<li><a href="http://destroyafteruse.com/business-units">Business Units</a></li>
			<li><a href="http://destroyafteruse.com/services">SERVICES</a></li>
			<li><a href="http://destroyafteruse.com/our-process">Our Process</a></li>
			<li><a href="http://destroyafteruse.com/category/the-agents">The Agents</a></li>
			<li><a href="http://destroyafteruse.com/category/press">Press</a></li>
			<li><a href="http://destroyafteruse.com/jobs">JOBS</a></li>
			<li><a href="http://destroyafteruse.com/meeting-point">Meeting point</a></li>
		</ul>
	</nav>
</header>

destroyafteruse.com

Continue Lendo “[série] A estrutura e a semântica do HTML5 – parte 2”

Como ser um dev frontend usando Linux

Muita gente me pergunta:

Você trabalha com frontend e usa Linux? Como faz pra usar Photoshop?

Como se front-end só trabalhasse com Photoshop. Mas vem comigo que te mostro.

Trabalhar com desenvolvimento frontend envolve muito código, por isso Linux – ao menos pra mim – é a melhor solução. Usar uma distribuição que não te deixe na mão e facilite a instalação de pacotes é essencial. No momento estou usando duas distros:Ubuntu Gnome – porque o Unity é muito palha – e Elementary OS.

As duas resolvem bem qualquer tipo de problema.

Uso o Terminator no lugar do terminal padrão do Ubuntu (dica do Carlos Becker, que inclusive tem uma coleção de dotfiles bem da hora).

Para codar, Sublime Text com algumas configurações específicas.

Shutter, para tirar prints da tela.

Gimp para tratar alguma imagem – não fico mexendo muito com imagens, uso mais para fazer as capas dos posts do blog.

Fogger para criar apps a partir de web apps – um que faz uma frente é o DevDocs.io

Mas e quando você recebe um layout no Photoshop, como você abre os PSDs?

Bom, já rodei Photoshop no Wine, – fica razoavelmente bom, com poucos bugs, mas fica pesado – já testei em máquina virtual, mas fica lento também. Até pouco tempo atrás, essas eram as únicas soluções.

Mas – por incrível que pareça – a Adobe pensou nos devs frontend que, como eu, gostam de usar Linux e só usam Photoshop para fazer recorte de imagens, pegar medidas, fontes, tamanhos de fontes, cores, etc., e lançou um serviço lindo chamadoProject Parfait, onde você faz exatamente isso: pode fazer upload de um PSD (ou vários), e extrair cores, fontes, exportar imagens, etc.

Agora você não tem mais desculpinha pra ficar usando Windows! E nem falo nada de programador BACK-END que usa Windows!

Don't Panic - It's not Windows

Mas brincadeiras à parte, use o sistema que você se sentir mais confortável, e te fizer mais produtivo! 😀 Desde que não seja Windows.

E você, qual o seu sistema operacional? E qual o seu workflow? Comente!

Post ooriginal por blog da2k

[série] A estrutura e a semântica do HTML5 – parte 1

Olá pessoal!
Irei postar aqui uma série que esmiúça a estrutura do HTML5 e sua semântica. O texto original pertence ao Edu Agni, ele é consultor especialista em User Experience, trabalha com isso há 11 anos. Entre outras coisas, o cara é curador da área de design e multimídia da Campus Party Brasil (um dos maiores eventos de tecnologia do mundo). Espero que apreciem. Será dividido em 3 partes. Segue a primeira.

A estrutura e a semântica do HTML5 – parte 1

Se você quer se aventurar com o HTML5, entenda aqui a sua estrutura básica, a semântica das principais novas marcações e algumas ferramentas. Sempre gosto de salientar para as pessoas que a maior evolução do HTML5 foi na sua semântica. A maior parte dos profissionais que vêm trabalhando com HTML estão muito  preocupados com aquelas animações pirotécnicas (que dependem muito mais de javascript do que do HTML), e sequer entendem o significado das marcações.

Bem, não caia nessa! Primeiro, as primeiras coisas… se você está querendo se aventurar pelo mundo encantado do HTML5, preste atenção: vou explicar aqui o que mudou na estrutura básica, falar sobre a semântica das principais novas marcações, e dar umas dicas de ferramentas para você trabalhar 😉

Estrutura básica, Doctype e Metadados

Olhando para a estrutura básica de código do HTML5, você vai perceber que ela se mantem praticamente idêntica à versão anterior, com excessão do Doctype e da Metatag Charset.

<!DOCTYPE html>
<html lang="pt-br">
   <head>
       <meta charset="utf-8"/>
       <title>Entendo a estrutura e semântica do HTML5</title>
   </head>
   <body>
       <p>Olá mundo!</p>
   </body>
</html>

Doctype e o elemento HTML

Document Type Defination (DTD, ou simplesmente Doctype) é uma instrução que informa ao navegador qual é a especificação do código que está sendo usada no documento, e deve ser declarado antes da tag <html>.

Na versão anterior do HTML, a declaração do Doctype era mais extensa e difícil de decorar, havendo a necessidade de referenciar para o navegador o arquivo DTD com as definições daquela especificação:

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

No HTML5 a inserção do Doctype foi simplificada, e a responsabilidade de buscar as definições da especificação fica por conta do próprio navegador:

<!DOCTYPE html!>

Após a declaração do Doctype, iniciamos o código HTML. Na árvore de elementos do código, a tag principal é a <html>, que comporta todos os outros elementos filhos.

<html lang="pt-br">

É na tag <html> que declaramos o idioma principal do documento, através do atributo (que pode ser usado também em outras tags do documento). Na tag <html> também podemos inserir atributos como o xmlns (XML Namespace), como quando usamos em nossa página elementos da FBML (Facebook Markup Language):

<html lang="pt-br" xmlns:fb="http://www.facebook.com/2008/fbml">

Metadados

Continue Lendo “[série] A estrutura e a semântica do HTML5 – parte 1”