Saiu o Bootstrap 4 Beta!

Foi lançada a versão BETA do novo Booststrap 4. Esperada por desenvolvedores web ansiosamente, essa versão promete novidades para a criação de sites cada vez mais compatíveis as diversas telas e resoluções na criação de aplicações web cada vez mais “responsivas”.

O Bootstrap é um conjunto de ferramentas de código aberto para desenvolvimento com HTML, CSS e JavaScript. Essa ferramenta permite a criação de um protótipo rapidamente, auxiliando em projetos, idéias e criação de aplicativos completos com as variáveis ​​Sass e mixins, sistema de grade responsivo, extensos componentes pré-construídos e plugins poderosos criados no jQuery.

Para baixar e experimentar a novidade, clique aqui meu jovem padawan.

Anúncios

O Flash na mira: ainda é viável utilizar essa tecnologia?

O Flash da Adobe está sob discussão desde semana passada, quando o Firefox decidiu não mais utilizar o plugin em todos os navegadores em um curto período de tempo. Além da raposa, o diretor de segurança do Facebook espera que a empresa anuncie a data de fim de vida do Flash.

Na sequência de duas vulnerabilidades críticas que deixaram os navegadores em risco, a equipe Firefox passou a tratar o plugin como vulnerável, utilizando a opção “clique para ativar”. Poucas horas depois do movimento da Mozilla, a Adobe liberou uma atualização.

Em meio à controvérsias, vem a indagação. Você, desenvolvedor, mudou de vez para HTML5, ou você ainda desenvolve com applets Flash, Silverlight ou Java?

Na comunidade de desenvolvedores, as opiniões são misturados sobre se há uma alternativa viável para o Flash.

Chad Weiner, diretor de gerenciamento de produtos da Mozilla, disse recentemente que a equipe

“vai continuar a trabalhar com os desenvolvedores para incentivar a adoção de tecnologias mais seguras e estáveis, tais como HTML5 e JavaScript.”

Koen Witters, desenvolvedora de jogos para RPG Playground , disse

“Você pode não gostar do Flash, mas ele é importante por funcionar em todas as plataformas / navegadores com a mesma base de código. Agora, eu lhe pergunto, qual é a alternativa para o Flash? Será que HTML5 oferece gravação em tempo real, executa o mesmo em todas as plataformas / navegadores? Não, não faz, e isso nunca vai. Mesmo páginas HTML simples estão cheias de hacks do browser corrente.”

Bobajeff também comentou que

“Flash não faz parte da Web. Não é de um fornecedor neutro. Os desenvolvedores dependem da Adobe aceitar as melhorias oferecidas por eles em termos de bug fixes, desempenho e segurança. Se a Adobe não decide dar suporte por um tempo à plataforma, significa que os usuários dessa plataforma são deixados sem um meio para acessar conteúdo em Flash. Se você é um usuário isso é inaceitável.”

Comentando sobre as vulnerabilidades, uma declaração oficial de comunicações corporativas da Adobe defendeu Flash, dizendo que o Flash é um alvo de hackers mal-intencionados simplesmente porque é “uma das peças mais onipresentes e amplamente distribuídos de software do mundo.”

PS: Texto baseado em uma matéria publicada no site da InfoQ versão internacional. Traduzido e colocado comentários por mim mesmo.

Quer programar? Eu digo Bora!

Hoje nós não temos tantas limitações em se tratando de desenvolvimento. Linguagens tidas como para programação desktop já tem suas opções de vinculo com a web, e vice-versa. Partindo desse pressuposto, as dicas que trago aqui valem para quem quer aprender linguagens atuais para desenvolvimento de softwares e apps.

Trouxe aqui então dicas de livros e materiais úteis para quem quer começar a programar “sozinho”, mas com uma leve instrução de quem entende um pouco mais. As dicas são válidas para quem quer desenvolver para a web. Vale sempre lembrar que programar não é bicho de 7 cabeças, mas requer o mínimo de dedicação e vontade, além de organização de prefêrencia. Mas vamos ao que interessa.

JavaScript

Para a linguagem, livros atuais são bem mastigados e com vários exemplos, o que ajuda bastante. Indico os livros da editora Casa do código. Com uma variedade grande de escritores, seus livros são extremamente bem elaborados e com um material gráfico bacana. Destaque para os livros DOMINANDO JAVASCRIT COM JQUERY e COLETÂNEA FRONT-END. Outro livro bacana que encontrei grátis online é o JAVASCRIPT FURTIVO do Eric Douglas (até o lançamento desse post, o livro ainda estava em desenvolvimento contínuo).

HTML5 e CSS3

Assim como para JS, o livro COLETÂNEA FRONT-END trás uma gama de artigos e tutoriais compilados em um único livro, com dicas e ótimas formas de se trabalhar com estas linguagens básicas para o desenvolvimento web. O livro é um apanhado de textos de feras no assunto Front-end.

PHP Continue Lendo “Quer programar? Eu digo Bora!”

[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.

[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”

[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”