27 abr 2014

O Super-HTML5

Submitted by bardo

Super-HTML5

Ontem tivemos o FLISOL - Festival Latinoamericano de Instalação de Software Livre. Aqui em Arapiraca, já realizamos o evento 3 vezes antes, mas há alguns anos deixamos de fazer. Este ano, graças ao Eduardo Barbosa, tivemos mais uma edição. E nele meu papel foi falar um pouco do HTML 5.

Infelizmente, imprevistos às vezes acontecem e terminei não podendo utilizar a apresentação que havia preparado com Inkscape e Sozi. Por isso, estou publicando aqui a apresentação e alguns links interessantes. Quem esteve na palestra vai perceber que eu terminei cobrindo a apresentação quase toda (e indo além dela).

Na metade dos slides é proposto o desafio de fazer um cronômetro, dando várias dicas. Lá embaixo, neste post, eu publico link para os aplicativos simploes que mostrei ontem, mas se você quer aprender mesmo HTML 5, recomendo que primeiro tente fazer o cronômetro antes de ver o código que eu fiz.

Não deixe de visitar também o Dive into HTML 5. É um excelente livro sobre tudo isso.

CódigoBibliotecasDescrição
Flisol Timer (edit)NenhumaCronômetro com histórico de paradas.
Calculadora (edit)MooToolsCalculadora simples, simulando uma de mesa (sem memória, só as 4 operações).
2048 (edit)NenhumaPuzzle onde você precisa juntar números iguais para dobrá-los até chegar a 2048. Use as setas do teclado.
Demo (edit)BootstrapBarra de Menus suspensos, blocos alternantes e dica suspensa sem esforço.
Demo (edit)ChartJSGráficos de linhas, barras, radar e pizza.
TableQuest (edit)MooToolsTeste de movimentação para RPG tradicional (visão de cima).

Aplicativos Interessantes

  • AppMaker - crie aplicativo web HTML5 sem programar.
  • Code Skulptor - IDE para Python.
  • PDF.js (0) - Visualizador PDF
  • Popcorn Maker - editor de vídeos.
  • WolfBlood - jogo de puzzle.
  • Princess Keeper - Outro jogo simples.
  • Alex, the Allegator - Jogo estilo plataforma.
  • Demo da Snap.SVG
  • Code Combat - Projeto de serious game para ensinar programação.
  • Galaxoid - jogo estilo Galaga usando DOM+JavaScript+CSS.
  • Kid Disco - jogo usando WebGL (threejs).
  • Projetos Bardo WS

  • Chair37 - Controle de tesouraria.
  • Fila Simples - Controle de fila de atendimento (tickets).
  • Jasmim - Livro em formato de aplicativo web móvel.
  • Lancelot - Rolador de Dados e sorteador de coisas.
  • NetSC - Calculadora de endereços de rede.
  • RarEfeitos - Sons diversos.
  • 31 mar 2014

    CyanPack 14.1 - Keystone Kapers

    • Acrescentados Putty e Links no Trisquel
    • Acrescentada Revista XBox Blast 1
    • Atualizado: FileZilla 3.7.4.1, Firefox 28.0, LibreOffice 4.2.2, LibreOffice Magazine 9, Pidgin 2.10.9, Python 3.4.0, Qbittorrent 3.1.9, Revista Nintendo Blast 52 e 53 , Revista PlayStation Blast 20 e 21, SpeedCrunch 0.11, Thunderbird 24.4.0 e VLC 2.1.3

    Quem viveu a Era Atari certamente conhece o jogo Keystone Kapers, um dos clássicos daquele videogame e o tema desta edição do CyanPack. As principais novidades desta versão são o acréscimo do putty e do links no Cyanpack-Trisquel-mini Toutatis-atari.

    Também foi acrescentada a primeira edição da Revista Xbox Blast. LibreOffice, Firefox e outros sofreram atualizações na nova versão.

    Você está organizando um Flisol? Que tal uma ferramenta totalmente livre, que traz softwares livres para windows e ainda um Sistema Operacional 100% livre? Usem e divulguem o CyanPack! ;-)

    Baixe o CyanPack 14.1

    Softwares desta edição:

    • F-Droid (para Android) 0.58

    Software

    Tipo

    Versão Windows

    Versão Trisquel

    Licença

    7-Zip

    Compactação

    9.20

    Use o File Roller

    GNU LGPL

    Audacity

    Gravador de audio multitrilhas

    2.0.5

    2.0.0

    GNU GPL

    Ekiga

    Comunicação SIP (voz e vídeo)

    4.0.1

    3.3.2

    GNU GPL

    FileZilla

    Cliente FTP, SFTP, entre outros

    3.7.4.1

    3.5.3

    GNU GPL

    Firefox

    Navegador Web

    28.0

    28.0

    MPL

    GIMP

    Editor de fotos e imagens

    2.8.10

    2.6.12

    GNU GPL

    Geany

    Editor de código-fonte

    1.23.1

    0.21

    GNU GPL

    Gtk2 Runtime

    Biblioteca

    2.24.10

    2.24.10

    GNU LGPL

    InfraRecorder

    Gravação de CD/DVD

    0.53

    Use o Xfburn

    GNU GPLv3

    Inkscape

    Editor de imagens vetoriais

    0.48.4

    0.48.3.1

    GNU GPL

    KeepassX

    Gerenciador de Senhas

    0.4.3

    0.4.3

    GNU GPL

    Klavaro

    Curso de Digitação

    2.0.0

    1.9.3

    GNU GPL

    LibreOffice

    Ferramentas de Escritório

    4.2.2

    3.5.7

    GNU LGPLv3

    LibreOffice

    Ajuda do LibreOffice

    4.2.2

    3.5.7

    GNU LGPLv3

    MD5 Summer

    Checagem de arquivo

    1.2.0.05

    Use md5sum

    GNU GPL

    Pidgin

    Mensagem Instantânea

    2.10.9

    2.10.3

    GNU GPL

    Python

    Linguagem de programação e ambiente Idle

    3.4.0

    3.2.3

    PSF

    Qbittorrent

    Gerenciador de torrents

    3.1.9

    2.9.7

    GNU GPL

    SpeedCrunch

    Calculadora

    0.11

    0.11

    GNU GPL

    SumatraPDF

    Leitor de PDF e Livros Digitais

    2.4

    Use o epdfview

    GNU LGPL

    Thunderbird

    Cliente de email e RSS

    24.4.0

    24.3.0

    MPL

    VLC

    Player multimídia

    2.1.3

    2.0.8

    GNU GPL

    XBMC

    Media player sofisticado em modo tela cheia.

    12.3

    11.0

    GNU GPL

    Xournal

    Anotações (inclusive em PDF)

    0.4.7

    0.4.6

    GNU GPL

    Zim

    Anotações estilo wiki

    0.60

    0.54

    GNU GPL

    uGet

    Gerenciador de downloads

    1.10.3

    1.8.0

    GNU LGPL

     

    17 fev 2014

    Lancelot 1.1

    Submitted by bardo

    Desde a época em que eu estudei Pascal, comecei a fazer do simulador de lances de dados o meu próprio Hello World. Fiz um em Pascal, depois em Delphi. Quando comecei a fazer aplicativos para GNU/Linux, fiz um lançador de dados em Perl+Gtk2, que terminou depois sendo portado para Python+Tkinter. Em JavaScript, claro, fiz um também, que usava como bloco lateral do Bardo WS em uma versão mais antiga do Drupal. Então, para começar a criar aplicativos móveis para Firefox OS, nada melhor do que um lançador de dados. Foi assim que nasceu (de novo) Lancelot!

    Lancelot, início

    Pois é, já nem lembro quando exatamente comecei com isso de Lancelot, mas deve ter sido bem no início, ainda no mundo Windows, já que a versão em Perl já se chamava xlance. A piada do nome é com o ato de "lançar" dados, ou seja, sem muito valor para quem não conhece Português (ou mesmo para quem conhece, mas enfim...).

    As primeiras versões do Lancelot para Firefox OS foram feitas apenas com HTML+CSS+JavaScript, sem nenhuma biblioteca especial. Simples, mas com recursos limitados, até que resolvi testar o jQuery Mobile. Lancelot foi reescrito, tornando-se mais configurável e completo.

    Lancelot - segunda geração

    Enfim, terminei adotando MooTools como minha biblioteca de estimação. De uma forma mais minimalista, comecei a criar aplicativos apenas com ela mesmo. Assim, Lancelot (for Firefox OS), chegou na sua terceira geração.

    Lancelot 1.1

    A nova versão do Lancelot (1.1) traz as seguintes características:

    • Conjuntos de dados personalizáveis (1d10, 3d6, 7d253 ou o que você quiser);
    • Rolagem de dados manual (sem salvar, você simplesmente rola);
    • Um gerador simples de nomes aleatórios;
    • Sorteio de carta, naipe, mês e dia da semana.
    • Suporte a dois idiomas (Português e Inglês)
    • Funciona totalmente offline.

    Você tem Firefox OS? Testa lá o Lancelot!

    6 fev 2014

    RarEfeitos 2.0

    Submitted by bardo

    Um dos primeiros aplicativos para celular que eu fiz foi o RarEfeitos, um conjunto de "botões" que disparam sons variados. É um gênero bem comum por aí, pelo menos para Android já vi alguns. Não sei se o gênero em si já tem nome, mas se não tiver já tá em tempo de receber um. :-P

    Primeira versão do RarEfeitos

    No início o RarEfeitos foi desenvolvido usando DHTMLx Touch. A versão mais nova, entretanto, foi refeita usando apenas MooTools. A interface foi recriada do zero. Apesar de ter sido simplificado em termos de bibliotecas e visual, essa nova versão mostra informações rápidas sobre alguns dos sons, além de os botões serem um pouco diferentes, de acordo com a categoria do som: música, efeito sonoro, fala...

    RarEfeitos 2.0

    É engraçado falar em "desenvolvimento", já que o aplicativo usa menos de 50 linhas de código JavaScript. :-P

    No RarEfeitos você encontra no momento 35 sons, com coisas como Topo Gigio, Mumm Rá e Sexo Frágil.

    Se você já tem o Firefox OS, dá uma olhada por lá! (e se gostar, avalie!)

    3 fev 2014

    Dois Mundos

    Submitted by bardo

    Serpentinamente saltitando pelo chão
    Sei que vem e sempre traz mais outro pra prisão
    Crendo ser o mundo mundo torto, pra ele certo
    Crendo estarmos nele todos nós, os vossos servos

    Mas quem crê na vida tem mais força pra lutar
    Que quem se diz Força e chega bravo ao nosso lar
    É, quem crê na vida e num futuro forte e vivo
    Consegue fazer real um sonho coletivo

    -- Cárlisson Galdino

    1 fev 2014

    IDEs para HTML5

    Uma das formas mais bacanas de trabalhar com criação em HTML5 hoje em dia (pelo menos de iniciar projetos menores e utilitários) é usando um serviço de editor online. Neles, você pode editar código, testar a vontade e até salvar na própria ferramenta (ganhando uma URL impronunciável, mas com o seu código salvo "nela"). Aqui apresento algumas ferramentas interessantes para isso:

    • CodePen - Editor que oferece edição do HTML, CSS e JavaScript, exibindo o resultado abaixo das áreas de edição. Oferece um plano pago, que permite upload de arquivos, modo colaborativo e modo professor.
    • JS Bin - Cinco áreas disponíveis: HTML, CSS, JavaScript, Console e Output. O mais completo nesse aspecto. Ainda não o utilizei de fato.
    • jsdo.it - Seria uma excelente ferramenta, não fosse um bug muito inconveniente. Nele, você se cadastra e cria projetos. Um projeto pode referenciar outro projeto, o que é bastante útil quando lidamos com bibliotecas e aplicativos de forma separada. Permite também fazer upload, o que dá condições de fazermos jogos em HTML5, mandando imagens e sons para lá. Ele também faz verificação do código escrito, com um depurador JavaScript rodando no cliente deles. O bug de que falei entra justamente aí. A opção Salvar aparentemente não salva, salva apenas para efeito de teste. Nos meus testes, perdi dois dias de trabalho por confiar nessa opção Salvar...
    • jsfiddle - O mais popular. Divide a tela em 4 áreas: HTML, CSS, JavaScript e Result. Poderiam oferecer um modo de atualização automática do "Result", mas é uma excelente ferramenta. O grande diferencial é a disponibilidade de várias versões diferentes para as mesmas bibliotecas.
    • Liveweave - Divide a área em 4 como o jsfiddle, mas com a vantagem de atualização em tempo real, também com opção de desativar tal recurso. Considero um dos melhores.
    • Reloado - Área de JavaScript e de HTML. O usuário escolhe se quer visualizar o resultado em tempo real, a cada mudança, ou se prefere ficar clicando no botão Render. Dos melhores, na minha opinião.

    Bem, agora o principal: um comparativo entre eles (adoro essas tabelas-comparison), considerando as bibliotecas oferecidas para fácil inclusão, por padrão, em cada um:

     

    CodePen

    jsbin

    jsdo

    jsfiddle

    liveweave

    reloado

    Angular JS

     

    1.2.1

    1.1.5

    1.0.7

    1.0.3

    1.2.1

    1.1.1

    1.0.7

     

    Arctic JS

     

     

    20120123

     

     

     

    Backbone

     

    latest

    1.0.0

    1.0

    latest

    0.9.1

    Bootstrap

     

    latest

    2.3.2

    3.0.0

    2.2.2

     

    latest

    latest

    Bonsai

     

    0.4.latest

     

    0.4.1

     

     

    Brick

     

     

     

    edge

     

     

    CanJS

     

    2.0.3

     

     

     

     

    Cannon JS

     

     

    0.4.3

     

     

     

    Chart JS

     

     

     

     

    0.2

     

    CoffeScript

     

    Não-identificada

     

     

     

    Não-identificada

    Create JS

     

     

    2013-02-12

    Não-identificada

    latest

     

    D3

     

    3.x

     

    3.0.4

    3.0

     

    Dojo

    latest

    latest

    1.8.4

    1.7.4

    1.7.3

    1.9.0

    1.8.4

    1.7.4

    1.6

    1.5

    nightly

    latest

    1.6.0

    Dijit

     

    latest

    1.8.4

    1.7.4

     

     

     

     

    Ember

     

    1.0.0

     

     

    1.1.2

     

    Enchant.js

     

     

    0.70

     

     

     

    Enyo JS

     

    latest

    2.2.0

    2.2.0

    2.1

    2.0.1

    nightly

     

    latest

     

    ES5 shim

     

    2.0.8

     

     

     

    1.2.4

    Ext-core

     

    3.1.0

     

     

     

    3.1.0

    Ext JS

    latest

     

    4.0.2

    4.2.0

    4.1.1

    4.1.0

    3.4.0

    3.1.0

    3.0.0

    4.2.0

     

    Ext JS all

     

     

    4.0.7

     

     

     

    Fabric JS

     

     

     

    1.4.0

    1.2.0

    0.9

    1.3.0

     

    Font Awesome

     

    4.0.3

     

     

     

     

    Foundation

     

    5.0.3

     

     

     

     

    Handlebars.js

     

    1.0.0

     

     

     

     

    HTML5 shiv

     

    Não-identificada

     

     

     

     

    jPlayer

     

     

    2.2.0

     

     

     

    Jquery

    latest

    2.x WIP

    2.0.3

    1.x WIP

    1.10.2

    1.9.1

    1.8.3

    2.0.3

    1.10.2

    1.8.3

    2.x (edge)

    2.0.2

    1.x (edge)

    1.9.1

    1.8.3

    1.7.2

    1.6.4

    1.10.1

    latest

    latest

    WIP

    1.7.2

    1.6.4

    Jquery Easing

     

     

    1.3

     

     

     

    Jquery UI

    latest

    WIP

    1.10.4

    1.9.2

    1.10.3

    1.10.3

    latest

    1.8.13

    Jquery-migrate

     

    1.2.1

     

    1.2.1

     

     

    Jquery Mobile

     

    WIP

    1.4.0

    1.3.2

    1.2.1

    1.1.2

     

    1.3.1

    latest

    latest

    1.0.1

    1.1.0rc1

    Jquery Tools

     

     

     

     

    1.2.7

     

    JSDeferred

     

     

    0.3.4

     

     

     

    JsdoitController

     

     

    Não-Identificada

     

     

     

    JSX Transformer

     

     

     

    0.4.0

     

     

    Jtypes

     

     

     

    2.1.0

     

     

    Kendo UI

     

    Q3

    Q2

     

     

     

     

    Kinetic JS

     

     

     

    4.3.1

    4.0.5

    4.7.3

     

    Knockout JS

     

    2.2.1

    2.1.0

    3.0.0

    2.3.0

    2.2.1

    2.1.0

    2.0.0

    3.0.0

     

    Less

     

    1.3.3

     

     

     

    1.1.3

    Lodash

     

    1.2.1

     

    2.2.1

     

     

    Lungo

     

    Não-identificada

     

     

     

     

    Marionette JS

     

    latest

     

     

     

     

    Minified

     

     

     

    1.0 Beta 1

     

     

    Modernizr

     

    2.6.2

     

     

    latest

    2.5.3

    Moo Tools

    latest

    latest

    1.4.5

    1.4.2

    1.4.5

    1.3.2

    nightly

    latest

    1.3.2

    1.2.4

    Moo Tools More

     

     

    1.4.0.1

    1.4.0.1

     

     

    OrbiterMicro

     

     

    1.1.0.514

     

     

     

    Paper JS

     

     

     

    0.22

    0.9.9

     

    Polymer

     

    0.1.1

     

     

     

     

    Power Tools

     

     

     

    1.2.0

     

     

    Prefixfree

     

    1.0.7

     

     

     

     

    Processing JS

     

    1.4.1

    1.4.0

    1.4.1

    1.3.6

    1.2.3

    1.4.1

    1.2.3

    Prototype JS

    latest

    latest

    1.7.1

    1.6.1.0

    1.7

    1.7.1

    1.6.1.0

    latest

    latest

    1.7.0.0

    1.6.1.0

    Pure CSS

     

     

     

     

    0.30

     

    Qooxdoo

     

     

     

    2.1

    2.0.3

    3.0.1

     

    Qunit

     

    latest

     

     

     

     

    Raphael JS

     

    2.1.0

    1.5.2

    2.1.0

    1.5.2

    1.4

    2.1.0

    2.0.0

    React

     

    0.8.0

     

    0.4.0

    0.3.2

     

     

    RightJS

     

     

     

    2.3.1

    2.1.1

     

     

    Sammy

     

    0.7.4

     

     

     

    0.6.3

    Script.aculo.us

     

    latest

    1.8.3

     

    1.9

    latest

    1.8.3

    Scripty

     

     

     

    2.0b1

     

     

    Sencha Touch

     

    Não-identificada

    2.0.0-gpl

     

     

    Não-identificada

    Shipyard

     

     

     

    0.2

    nightly

     

     

    Snap SVG

     

     

     

     

    latest

     

    Socket.IO

     

     

    0.8.7

     

     

     

    SVG JS

     

     

     

    0.x

    latest

     

    SWFObject

     

     

    2.2

     

     

     

    Thorax

     

     

     

    2.0.0rc6

    2.0.0rc3

     

     

    Three JS

     

    r58

    r60

    r54

    latest

     

    Tmlib JS

     

     

    0.1.5

     

     

     

    Traceur

     

    Não-identificada

     

     

     

     

    TwitterLib

     

    Não-identificada

     

     

     

    Não-identificada

    Underscore JS

     

    Não-identificada

    1.4.4

    1.4.4

    1.4.3

    1.3.3

    latest

    1.3.1

    Web App Install

     

     

     

    0.1

     

     

    Web Font Loader

     

     

     

     

    1.4.10

     

    X Toolkit

     

     

     

    edge

     

     

    YUI

    latest

    3.10.0

    2.9.0

    3.3.0

    3.8.0

    3.7.3

    3.6.0

    3.5.0

    3.4.1

    3.14.0

    3.10.1

    2.8.0r4

    3.13.0

    3.3.0

    2.8.2

    Zepto

    latest

    latest

    1.0

     

    1.0rc1

    latest

    0.7

    29 jan 2014

    Fila Simples 1.5

    Submitted by bardo

    Fila Simples 1.5

    Este fim-de-semana ajudei na matrícula dos feras, onde trabalho. Para controlar melhor a fila dos feras, terminei criando peças que aos poucos se tornaram o Fila Simples, uma solução em HTML5.

    Recursos:

    • Controle de chamadas por ticket
    • Geração de tickets
    • Suporte a duas mesas consecutivas (onde todos os clientes precisam passar por duas mesas)
    • Opção de desativar uma mesa e ter uma mesa só
    • Definição de letra de prefixo (na imagem de exemplo, o "W") e nome para as duas mesas
    • A cada chamada, toca som de chamada e faz efeito de destaque no painel da mesa correspondente
    • Histórico dos tickets chamados mais recentemente
    • Manual de uso no início do programa

    A impressão de tickets não funciona tão bem por si, já que é gerado um HTML e os tickets impressos direto a partir do navegador podem ser cortados de uma página para outra. A solução que usei foi gerar os tickets, selecionar tudo e colar em um documento novo do LibreOffice. Feito isso, nas Propriedades da Tabela, basta desmarcar na aba Fluxo de Texto a opção Permitir linha quebrar entre páginas e colunas.

    Para quem precisar de uma personalização, basta baixar o código aqui e mudar à vontade: estou liberando sob a licença GNU AGPL. Para quem precisa de uma solução básica mesmo, utilitária, coloquei no ar o Fila Simples no recém-criado A.Bardo.WS, um local onde colocarei aplicativos web utilitários em geral (exceto os mobile, que comecei colocando em M.Bardo.WS).

    Espero que seja útil!

    28 jan 2014

    Curso de Gamification

    Submitted by bardo

    Gamification, falando simplesmente, é a adoção de técnicas e ferramentas de game design em ferramentas que não tem nada a ver com jogos. Adicionar ranking num sistema de helpdesk ou criar troféus para um ambiente de ensino, por exemplo.

    O Coursera é uma estrutura que oferece diversos cursos à distância. Cada curso funciona mais ou menos como uma disciplina de graduação. Várias universidades ofertam cursos por lá. Em partircular, a University of Pensylvania tem um curso sobre Gamification, conduzido por Kevin Werbach, um dos autores do livro For the Win, um livro que aparenta ser muito bom (e uma das poucas referências) sobre Gamification.

    Pois bem, se você se interessa pelo tema e quer se inscrever no curso, corra que ele começou esta semana!

    27 jan 2014

    Escuro

    Submitted by bardo

    Quem tem medo de escuro?
    A Lua cheia traz a luz
    Não precisamos nos esconder
    Até mesmo por ser impossível

    Pra quem tem medo de escuro
    A Lua cheia traz a luz
    Para iluminar as noites
    E nos fazer ver o que não queremos

    Quem tem medo de lobisomens
    Quem já viu algum?
    Tem medo de escuro?

    Pra quê ter medo de escuro
    Se o escuro pode nos provar
    Que é mesmo aquilo que tememos

    -- Cárlisson Galdino

    Engenho: 

    Páginas

    Subscribe to Cordeis.com RSS