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
Mobile Dev Group São Paulo

Já está disponível o novo WebWorks SDK 2.0 Beta baseado no Apache Cordova

A BlackBerry trabalhou pesado para essa grande novidade, o WebWorks 2.0, essa nova foi totalmente construída em cima do Apache Cordova. Que vem cheia da novidades

Apache Cordova

Resumindo essa grande novidade o WebWorks agora é uma distribuição do Cordova com uma série de adaptações com foco na melhoria da experiência dos desenvolvedores. WebWorks automaticamente inclui todas as APIs do Apache Cordova, bem como as funcionalidades já existentes no WebWorks(que já foram implementadas como plugin do Cordova e estão disponíveis aqui). Claro que isso também já foi incluído com a nova interface de linha de comando baseada no “Cordova command line” mas com algumas melhorias do BlackBerry 10.

O novo WebWorks SDK

Com essa nova versão do SDK, contém o novo instalador e uma nova ferramenta gráfica, este recurso irá reduzir bastante o tempo de desenvolvimento. A ferramenta gráfica foi desenvolvida pelo Tech Center da UFAL.

A nova ferramenta ajuda na administração dos seus projetos, setando informações básicas no seu config.xml, além de uma ferramenta de build/sign/deploy de sua aplicação para o device ou simulador. Este é o primeiro passo para um novo patamar em ferramentas de desenvolvimento para WebWorks.

Compatibilidade

Aplicações em WebWorks antigas e as que utilizam a nova versão SDK irão funcionar em todas as versões do BlackBerry 10. Isto permite uma flexibilidade para o desenvolvedor migrar quando quiser para o novo SDK 2.0. Vale lembrar que o novo SDK baseado no Apache Cordova será o foco para o novos devices da BlackBerry.

Uma das vantagens de se trabalhar com o Apache Cordova que ela permite uma fácil adaptação de sua aplicação para outras plataformas, como Cordova prove múltiplas camadas em comum com outras plataformas desenvolver soluções multi plataformas será muito simples.

Além disso, muitas das top soluções enterprise do mercado, com IBM e SAP, estão adotando o Apache Cordova. Assim suas aplicações WebWorks tornarão muito mais acessíveis para essa plataforma.

Migração

Se você quer migrar suas aplicações neste momento, você pode conferir a documentação aqui.

Documentação e Exemplos

A BlackBerry quer garantir que você tenha todas as ferramentas que você precisa para trabalhar com a mais nova versão do SDK, por isso já está disponível toda a documentação atualizada aqui, exemplos e API Reference(Incluindo conteúdo para APIs do núcleo Apache Cordova). O site do Developer BlackBerry foi bifurcado para garantir conteúdo para as duas versões.

Os exemplos do GitHub também foram atualizados e você confere aqui

Essa foi uma grande novidade para os desenvolvedores de aplicações em HTML5, isso abre novos horizontes para a plataforma e atrai cada vez mais novos desenvolvedores. Realmente foi um trabalho árduo que está apenas começando.

Mais posts sobre o assunto em breve.

Categorias
Mobile Dev Group São Paulo

Último Port-A-Thon! Não perca essa chance.


Port-A-Thon para você que não conhece é um evento organizado pela BlackBerry para incentivar o desenvolvimento para a plataforma. Durante 36 horas, os desenvolvedores da empresa e da comunidade dão total suporte online, para você que quer desenvolver o seu aplicativo. E o melhor de tudo, você ganha US$100 (dólares) por cada aplicativo aprovado.

Para receber esta bonificação você precisa enviar o aplicativo durante as 36 horas do dia 18 ao dia 19 de janeiro (lembrando que o evento ocorre no horários dos EUA, então ficar atento a isso).

Os passos necessários para participar são:

No Port-A-Thon que aconteceu no dia 11 de janeiro, foram 15.060 aplicativos enviados. Para o próximo Port-A-Thon(o último) que inicia no dia 18 de janeiro, são elegíveis aplicativos criados em: Appcelerator, Marmalade, Sencha, jQuery, PhoneGap, Qt, WebWorks,  Android, Nativo, Cascades e até aplicativos desenvolvidos em BlackBerry App Generator. Então só escolher qual a linguagem que você se sente mais a vontade em desenvolver.

Cada desenvolvedor pode enviar quantos aplicativos quiser, mas a bonificação tem um limite de 20 aplicativos por desenvolvedor. Ou seja, você pode ganhar até US$2.000, mas claro enquanto tiver saldo da verba reservada para o Port-A-Thon. E para esse último Port-A-Thon estão reservados $2.000.000. Isso mesmo, 2 milhões de dólares  (Informação foi confirmada dia 16 de janeiro no Inside BlackBerry Developer Blog).

Estamos a poucos dias do lançamento do BB10 e as expectativas são as melhores, O  último Port-a-Thon fecha com chave de ouro as ações para desenvolvedores antes do lançamento. Qualquer dúvida deixe um comentário ou procure os grupos de desenvolvedores no Facebook.

Participe!