Categorias
HTML5 Tutoriais

Trabalhando com a propriedade CSS currentColor

Nesse post vamos falar sobre a palavra-chave currentColor do CSS ele já está aí a um bom tempo e ela pode ser bem útil para melhorar o nosso código CSS e nesse tutorial vamos ver como.

currentColor

É uma palavra-chave que pode ser adicionada na propriedade CSS color. Basicamente ela irá refletir a cor definida na propriedade “color” no elemento em que ela se encontra:

p { color: peru; padding: 1em; border: 5px solid currentColor; }
Code language: CSS (css)

E o resultado será o seguinte:

Isso mesmo a cor peru é uma cor válida CSS, mas o importante aqui é que não precisamos repetir o valor da nossa cor para a propriedade na borda simplesmente chamamos a palavra-chave e ele passa a útil quando temos elementos que passam por mudança de estado, por exemplo, botões e links:

button { color: salmon; background: white; border: 3px solid currentColor; padding: 1em; transition: 300ms all; } button:hover { color: navy; }
Code language: CSS (css)

No exemplo acima um botão, seguindo as mesmas propriedades do parágrafo anterior, entretanto nesse caso estamos a trabalhar com um botão e quando o nosso botão está no estado hover adicionamos a cor “navy”, assim o resultado será o seguinte:

Botão no estado normal
Botão no estado “hover”

Além disso, podemos resgatar o valor do (color) de uma elemento pai como no exemplo abaixo:

<div class="salmon-box"> <p>Test CSS</p> <p>Test CSS</p> <p>Test CSS</p> </div> <style> .salmon-box { color: salmon; } p { padding: 1em; border: 3px solid currentColor; } </style>
Code language: HTML, XML (xml)

Assim o resultado será o seguinte:

Detalhe para o exemplo anterior o botão não conseguiu resgatar o currentColor somente quando a cor é definida no próprio elemento.

Suporte

currentColor ganhou suporte em 2009 pelo navegador Opera e desde então os navegadores passaram a dar suporte a palavra-chave e hoje a propriedade tem suporte em 98.8% dos navegadores.

Para mais tutoriais acesse a página da categoria tutoriais.

Categorias
JavaScript Mobile Tutoriais

Trabalhando gestos com Hammer.js

Hammer é uma biblioteca JavaScript que dispara eventos para os gestos realizados em suas aplicações com HTML+JS. O Hammer.js é simples de usar, como muitas bibliotecas ele usa o esquema “jQuery-like”.

Para utilizar a biblioteca de gestos precisamos dos seguintes passos, carregar a biblioteca do Hammer disponível no link: http://eightmedia.github.io/hammer.js/, além de encontrar o fonte lá você vai encontrar exemplos de como usar a biblioteca. Com os arquivos importados agora vamos ao código, inicialmente selecionamos o elemento o qual vamos “ouvir” os gestos e depois especificamos o gesto que vamos acompanhar.

Exemplo:

var element = document.getElementById('box');
var hammertime = Hammer(element).on("swipe", function(event) {
        	alert('swipe!');
    	});

No código acima temos um exemplo que acompanha o movimento de swipe, quando realizado ele dispara um alert. E o que podemos fazer com isso? Slide de fotos, invocar menus, ações em jogos, mudança de conteúdo. Podemos notar que no código acima recebemos um evento na função chamada pelo Hammer, vamos usar o “console.log” para inspecionar esse item e o resultado será o seguinte:Captura de Tela 2014-01-03 às 16.16.03

Ele retorna um objeto com uma sério de propriedades, no final da lista temos algumas propriedades importantes, type(tipo do evento), timeStamp, target(onde foi realizado o evento), srcElement(O elemento responsável por chamar o evento) e  gesture um objeto que capta as infos sobre o “toque” realizado pelo usuário, esse item vamos detalhar a seguir:

Captura de Tela 2014-01-03 às 16.16.26

No objeto gesture temos como pegar a angulação que foi realizado o toque, a velocidade x e y, escala, distância, rotação e direção do toque. É muito informação que pode ser trabalhada

Agora vamos a um evento mais prático:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hammer Tutorial</title>
    </head>
    <body>
        <div id="box">
        	<nav id="menu" class="hide">
        		<ul>
        			<li><a href="#">item 1</a></li>
        			<li><a href="#">item 2</a></li>
        			<li><a href="#">item 3</a></li>
        			<li><a href="#">item 4</a></li>
        		</ul>
        	</nav>
        </div>

        <script type="text/javascript" src="js/hammer.min.js"></script>
        <script type="text/javascript">
        	var element = document.getElementById('box');
			var menu = document.getElementById("menu");

        	Hammer(element).on("swipe", function(event) {
        		//verificamos qual o valor da propriedade direction caso "right"
        		// ele adiciona o class ao menu active
        		// caso o valor do direction for "left" ele adiciona o class "left"
        		if(event.gesture.direction == "right"){
        			menu.className = "active";	
        		}else if(event.gesture.direction == "left"){
        			menu.className = "hide";
        		}
    		});
        </script>
    </body>
</html>

No exemplo acima em nosso elemento com id box, adicionamos uma tag nav com id menu esse item que vamos exibir e esconder. No código JavaScript no final do nosso arquivo verificamos no objeto gesture qual o valor do direction, caso “right” adicionamos o class active, caso contrario adicionamos o class “hide” a transição nos fazemos com CSS3 o código eu mostro a seguir:

#box {
	padding: 0;
	margin: 10%;
	width: 80%;
	height: 300px;
	background-color: green;
	display: block;
	position: relative;
	overflow: hidden;
}

#menu {
	width: 200px;
	height: 100%;
	background-color: yellow;
	margin: 0;
	position:absolute;
	transition:  left 300ms linear;
}

#menu.hide{
	left: -250px;
}

#menu.active{
	left:0;
}

Um exemplo simples mas muito usado em muitas aplicações. O exemplo completo desse tutorial você pode conferir no GitHub: https://github.com/fellyph/Tutorial-bbUI/tree/master/hammer/www

 

 

Categorias
HTML5 Tutoriais

Crie accordion sem javascript

 

<details> é uma tag que podemos encapsular de desencapsular um determinado conteúdo, para obter informações adicionais sobre uma determinada informação, resumindo um accordion. Para trabalhar com esse recurso além da elemento <details>, precisamos do elemento <summary>, ele deve ser incluso como filho do <details>. Com este elemento conseguimos prover uma legenda ou um capítulo para o conteúdo restante, ele também será responsável por clicarmos nele e o conteúdo ser exibido.

O elemento <details> tem um atributo chamado open, ele define se o conteúdo será inicialmente visível ou não. Por default essa propriedade é false. Com esse recurso produz uma interatividade sem nenhum javascript.

Vamos ao código:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Details </title>
	<style>
		details{
			border-radius:3px;
			padding:5px;

		}
		summary{
			border-radius:3px;
			border:1px solid #ddd;
			padding:5px;
			outline:none; 
		}

		details[open]{
			background:#ddd;
			border:1px solid #333;
		}
		details[open] summary{
			border:none;
		}
	</style>
</head>
<body>

<details open>
	<summary>Autor</summary>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, nemo, dolores numquam fugit ipsum velit eaque repudiandae ea libero est.</p>
</details>

<details>
	<summary>Livros</summary>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, nemo, dolores numquam fugit ipsum velit eaque repudiandae ea libero est.</p>
</details>

<details>
	<summary>Jobs</summary>
	<p> Consequuntur, consequatur ut earum dolore placeat doloribus in voluptatem culpa.</p>
</details>
</body>
</html>

No código acima adicionei um CSS para dar um acabamento visual, nele vou fazer duas observações, o summary por default quando clicado exibe um highlight para remove-lo basta adicionar a propriedade “outline:none; “. A segunda observação é referente a como estilizar um item quando ele está ativo, para isso utilizamos o seguinte seletor “details[open]”. No código HTML o primeiro item tem a propriedade open setada assim ele inicia com seu conteúdo exibido. e o resultado será o seguinte:

 

Um recurso simples que economiza o uso de Javascript. O código desse tutorial você pode encontrar no meu gitHub no seguinte link: https://github.com/fellyph/Tutorial-bbUI/tree/master/details

Categorias
Eventos Mobile Dev Group São Paulo

Conferência web.br 2103 – Dia 01

Nos dias 18 e 19 de novembro de 2013 aconteceu em São Paulo a Web.br 2013, 5º edição conferência organizada pela W3C Brasil, o evento reuniu os principais nomes do desenvolvimento Web no Brasil. O evento aguardados por muitos, no ano passado tive a oportunidade de participar como ouvinte, com 4 trilhas durante os dois dias, cada seção com nomes bem peculiares, header, section, canvas e input. No início de cada dia, contava com um keynote principal. No primeiro dia contou com Fernanda Weiden(Facebook), falando sobre:A evolução dos sistemas de informática e Web no Brasil.

Após o Keynote principal tive a oportunidade de representar a BlackBerry com a palestra Criando aplicações de alta performance em HTML5 . A palestra foi baseada na apresentação do Demian Borba no Brazil JS, onde falei sobre o trabalho que a BlackBerry vem fazendo junto aos Tech Centers, projeto que faço parte e listei 20 dicas sobre performance para aplicações em HTML5.

Palestra de Fellyph Cintra - Foto: Peu Robles/W3C Brasil
Palestra de Fellyph Cintra – Foto: Peu Robles/W3C Brasil

Após a minha palestra foi a vez da Talita Pagani entrar no palco canvas, com a palestra sobre Jogos com HTML5, foi uma palestra esclarecedora para quem deseja entrar no mercado de games e utilizar HTML5 como ferramenta, falou um pouco sobre o cenário atual do mercado, sobre suas experiências no dia-a-dia de como é trabalhar com HTML5 para jogos, listou as novas features que se encaixam como uma luva no desenvolvimento de jogos e alguns frameworks que ajudam bastante no desenvolvimento de jogos.

Os slides da apresentação da Talita você confere aqui:

Desenvolvimento de Jogos com HTML5 from Talita Pagani

A primeira palestra que tive oportunidade do conferir após o almoço foi com Bruno Azevedo, com o tema Responsivo na prática. O palestrante trabalhou um bom tempo no terra, hoje encara o desafio de empreender a frente da empresa Marimbondo. A palestra teve o foco na web responsiva, o tema é coisa séria não é simplesmente moda. “Entregar a melhor experiência possível ao teu usuário, independente do seu dispositivo” essa foi uma citação que resume o nosso cenário atual. Com o terreno preparado o Bruno entrou na parte técnica da coisa e os slides da apresentação você pode conferir aqui:

 

Talita Pagani falando sobre jogos em HTML5 - foto de Peu Robles/W3C Brasil
Talita Pagani falando sobre jogos em HTML5 – Foto: Peu Robles/W3C Brasil

A segunda palestra da tarde foi com Diego Eis e Deivid Marques falaram sobre WAI-ARIA.

WAI-ARIA – Interações acessíveis na web from Diego Eis

A palestra começou com uma introdução sobre as novas tags do HTML5 e seu significado semântico, tema até abordado na palestra do Diego Eis no webbr 2012, mas é sempre bom relembrar. Após a introdução sobre semântica foi a vez de abordar o tema principal WAI-ARIA, segundo um resumo da palestra do Diego:

“A WAI-ARIA serve para estender o significado das interações do seu site. Quando as tags do HTML5 vieram, elas já começaram um trabalho importante de dar significado às estruturas do layout. Você consegue marcar agora o que é um menu de navegação, uma sidebar, um header, um footer etc. Esse trabalho é muito importante por que ajuda a definir a importância dos elementos que cada elemento contém.”

Isso estamos em uma época de muita interação online e como adaptar isso para os usuários que necessitam de acessibilidade? O Diego levantou alguns tópicos sobre o assunto algumas features e em seguida o Deivid mostrou a parte prática como implementar e como testar. Durante a palestra um deficiente visual comentou sobre a qualidade dos leitores de tela disponíveis no mercado, e falou um pouco sobre a experiência de acessar conteúdo na web hoje.

Após a palestra Diego rolou um coffee break momento para encontrar alguns amigos. Depois de recarregar as baterias com o coffee foi a vez da dobradinha da galera do loop infinito Caio Gondim e Almir Filho. Primeiro a se apresentar foi o Caio Gondim com a palestra com HTML5 Sensitivo: Seu browser no plano astral. As duas palestras foram temas em outros front ins esse ano, mas particularmente ainda não tinha visto as duas palestras, o loop infinito sempre levam apresentações bem acabas, com o assuntos bem amarrado e experimentos que deixa a galera impressionada. A palestra abordou o uso dos sensores do seu browser e como criar uma nova experiência do usuário, ou seja, não tenho muito o que comentar é ver para crer.

 

A última palestra que conferir no primeiro dia foi com Almir Filho, Com a palestra CSS Layout: ontem, o hoje e o depois.. A apresentação mostrou toda a história de como os layout eram montados, o processo de “destabelização” da web para uma pseudo “tabelização” com div’s fatiando o layout em forma de tabelas. E os novos recursos do CSS3 e o futuro do CSS3. Os novos recurso otimizam bastante a programação da amostragem do conteúdo na tela. Como dividir a informações em colunas ou porcentagens, de uma forma inteligente. Muito recurso bom já está implementado e muita coisa boa estar por vir. A palestra focou bastante nas features do CSS3 mostrando planejar e aplicar esses novos recursos, a palestra do Almir filho você confere aqui:

 

CSS Layout: o ontem, o hoje e o depois com Almir Filho - Foto: Luíza Troina / W3C Brasil
CSS Layout: o ontem, o hoje e o depois com Almir Filho – Foto: Luíza Troina / W3C Brasil

Muita gente veio de longe conferir o evento, exemplo, Qaiq Alves estudante da UFMG deu o seguinte depoimento:

“A organização do evento está realmente de parabéns pois conseguiram fazer com houvessem diversas dúvidas sobre qual palestra assistir. Com tanto conteúdo de qualidade e palestrantes daquele gabarito não tinha como ser diferente. Foi fantástico!“

Qaid Alves estudante da UFMG veio de BH conferir o evento
Qaid Alves estudante da UFMG veio de BH conferir o evento

O primeiro dia foi bem intenso todas as palestras foram de alto nível, a W3C criou uma grade perfeita, queria muito ter acompanhado todas as palestras. Espero que role alguma gravação para ver as demais apresentações.

fotos do evento você confere aqui: http://www.flickr.com/photos/nicbr/sets/72157637797171915/