Articles

KineticJS – Framework HTML5 + JavaScript

In HTML5, Javascript, Kinect, Mobile on 13 de abril de 2012 by Gesmar Júnior Marcado: , , , ,

Olá pessoal,

Há alguns dias estava pesquisando uma forma de acessar o Kinect pela web e acaei encontratndo uma biblioteca fantástica, a  KineticJS. O KinectJS é uma biblioteca feita com JavaScript e o Canvas do HTML5, que permite interação de forma natural (NUI) para aplicações desktop, web e móveis. Ela permite desenhar as imagens e formas, utilizando a API canvas, adicionar eventos, mover, escalar e rotacionar um objeto de maneira independênte dos outros, o que permite um alto desempenho, mesmo com o aplicativo usando milhares de imagens e formas.

image

O KinectJS necessita de um elemento DOM (Document Object Model) no HTML, permitindo trabalhar com os elementos separadamente, trazendo o dinamismo necessário para a aplicação manipular as camadas (Layers). Cada layer é ligado a seu próprio elemento de tela e pode conter grupos ou diferentes formas geométricas. Os grupos podem ser utilizados para conter as formas e também outros grupos. Para o KinectJS ser tão rápido quanto prometem os desenvolvedores, ele contém duas camadas próprias que o usuário não tem acesso (além das ilimitadas camadas que podem ter sido definidas pelo usuário, que podem conter elementos gráficos, animações e eventos). Essas camadas próprias são:kinecktjs3

Backstage Layer: Essa camada oculta ao usuário utiliza um canvas personalizado para renderizar as formas e detectar as manipulações (eventos). Ela é a “mágica” que permite a alta performance mesmo com milhares de elementos gráficos.

Buffer Layer: Camada também oculta, que trabalha o reconhecimento dos pixels e do canvas gerado.

 

O site também fornece tutoriais para o KineticJS, que ficam hospedados dentro do site Html5 Canvas Tutorials. Vários exemplos feitos por eles e exemplos da comunidade são exibidos dentro do próprio site da Biblioteca.

Site: http://www.kineticjs.com/
Documentação: http://www.kineticjs.com/docs/symbols/Kinetic.Stage.php
Forum: http://www.kineticjs.com/forum/

Um abraço,

Gesmar Júnior
Diretor @AgisIntellicode
MSP | GO/MG | Brasil
Email: gesmar.junior@studentpartner.com
Twitter: @gesmarjunior
Facebook: /gesmarjunior

clip_image001

Articles

Desenvolvimento multiplataforma mobile com HTM5 – Parte 1

In CSS, HTML5, Javascript, jQuery, Mobile, Web Standards, Windows Phone on 1 de abril de 2012 by Gesmar Júnior Marcado: , , ,

Olá pessoal,

Atualmente estamos em um momento em que as pessoas ao redor de mundo estão mudando a forma como agem e interagem. Esta nova forma de interação, seja com outras pessoas ou através da internet somente tornou-se possível através da mobilidade!
Com isso, precisamos desenvolver soluções para esse novo público, que está interagindo e muito com essa nova plataforma, a Mobile.

Porém, Mobile não é só um ou outro dispositivo, são todos dispositivos que trazem mobilidade, flexibilidade, onipresença e são fáceis de transportar de um lugar pra outro.


Daí vem o desafio, “Como desenvolver de uma forma que se aproveite uma solução para diferentes dispositivos?”. Há pouco tempo era praticamente impossível alcançar o resultado deste desafio, visto as diferentes plataformas existentes e seus Sistemas Operacionais, Designer e principalmente linguagens e IDE próprias.

Há algum tempo uma solução para grande parte desse problema vem surgindo, e ela se chama HTML5. Todos falam apenas em HTML5, e eu também costumo algumas vezes dizer assim, porém ele sozinho não é a solução. Quando se diz “o HTML5”, na verdade queremos dizer o “HTML5 + CSS3 + JavaScript”.

Nesta série de posts sobre o Desenvolvimento multiplataforma mobile com HTM5, espero descrever algumas ferramentas e APIs para o desenvolvimento mobile com HTML5:

image

Vamos começar com uma plataforma incrível para desenvolvimento mobile: o PhoneGap.

PhoneGap é uma API aberta construída para desenvolvimento em HTML5, CSS3 e JavaScript, para rodar em praticamente todos os dispositivos móveis (iOS, Android, BlackBerry OS, HP WebOS, Windows Phone, Symbian e bada). Isso pode incluir aplicativos que rodam diretamente no broswser (web apps) ou nativos do próprio dispositivo.

Por trás do PhoneGap está a empresa Nitobi, que foi a criadora original e um dos principais contribuintes da plataforma, mas outras empresas contribuem, como IBM, RIM e Microsoft, além da comunidade de desenvolvimento Mobile com HTML5. Em outubro de 2011, a Adobe adquiriu a Nitobi focando a equipe apenas no projeto PhoneGap. Mas isso não faz do PhoneGap uma plataforma fechada, ele está sob a licença Apache Software Foundation (ASF).

Site: www.phonegap.com

MobileOne

O MobiOne é uma ferramenta visual que facilita o desenvolvimento para iOS, sem precisar de conhecimentos de programação avançados. A grande vantagem dele é que você pode desenvolver para iOS no Windows, sem precisar de um Mac para desenvolver e compilar o seu app. Ele utiliza as ultimas novidades do HTML5, CSS3 e JavaScript para o desenvolvimento, permitindo você escolher se vai gerar um aplicativo nativo ou uma webapp. Ela promete em breve um suporte para Android e sem previsão para Windows Phone por enquanto.

Site: www.genuitec.com/mobile/

appacelerator mobile_chaos_295x271

A empresa AppCelerator lançou o Titanium Mobile SDK, que além de desenvolver utilizando HTML5 e ser voltado para Mobile como os demais listados, também oferece junto a IDE Titanium Studio, baseada em Eclipse. Eles tem a versão Community que é gratuita e outras duas, que são pagas. A desvantagem é que só suporta iOS e Android ou uma web app. Outro grande diferencial do pessoal da AppCelerator além da IDE é a Open Mobile Marketplace, que é uma especie de loja de componentes em HTML5, CSS3 e JavaScript, alguns até gratuitos, para serem utilizados pelos desenvolvedores da plataforma, isso sim é um passo a frente e dá pra aproveitar e não ter que fazer um determinado componente do zero. Esses componentes podem ser usados em projetos em HTML5 de qualquer lugar, não necessariamente junto ao Titanium SDK.

Site: www.appcelerator.com

Worklight_logo_website
A empresa Worklight, que foi adquirida pela IBM por um valor em torno de 70 milhões, fornece também uma plataforma para desenvolvimento para dispositivos móveis, com uma IDE baseada em Eclipse, voltada para smartphones e tablets. Ele suporta iOS, Android e também o Windows Phone. O único problema é que ela oferece um Trial apenas, para a versão licenciada é necessário entrar em contato para adquirir. O que achei mais interessante foi que eles utilizam o framework do PhoneGap para criar os apps híbridos para as diferentes plataformas mobile.

Site: www.worklight.com

Um abraço,

Gesmar Júnior
Diretor @AgisIntellicode
MSP | GO/MG | Brasil
Email: gesmar.junior@studentpartner.com
Twitter: @gesmarjunior
Facebook: /gesmarjunior

clip_image001

Articles

Evento – Nokia Hackathon – São Paulo

In Comunidade, Games, HTML5, Javascript, Mobile, MSP, Windows Phone on 25 de março de 2012 by Gesmar Júnior Marcado: , , , ,

Olá pessoal, hoje vou falar de um dos melhores (ou o melhor) evento que já participei! Espero participar de outros desse formato.

As 13hs do Sábado dia 24 de março às 18hs do domingo 25 de março no “The Hub São Paulo”, na Rua Bela Cintra 409 Consolação – São Paulo-SP, um lugar muito aconchegante, tranquilo e que incentiva a inovação, foi realizado um evento diferente dos por mim vistos geralmente, o “Nokia Hackathon”.

image

O Nokia Hackathon é a primeira maratona brasileira de desenvolvimento para Windows Phone realizada pela Nokia, ocorrendo justamente no lançamento dos Windows Phones da Nokia Lumia 800 e 710 no Brasil. O evento que aconteceu durante o fim de semana, um grande estimulo para aprendizado e desenvolvimento na plataforma do Windows Phone, junto com especialistas da Nokia e Microsoft que estiveram presente o tempo todo para responder todas as suas dúvidas durante a competição.

Eram duas possibilidades de participação, categoria individual ou em grupo de até três pessoas.

Para participar das premiações, os Apps deverão ser publicados no Marketplace. Vamos aos prêmios principais, vários outros também foram sorteados (pen drivers, camisetas, vouchers de compras, etc):

Primeiro Prêmio: 01 Nokia Lumia 800 e 01 Xbox

Segundo Prêmio: 01 Nokia Lumia 710

Terceiro Prêmio: 01 Xbox

Foram analizados os critérios de avaliação:

1-) Qualidade e uso de funcionalidades: O aplicativo deve ser totalmente funcional, sem erros, ser rápido e responsivo. Também será avaliado as funcionalidade do aplicativo e nível de utilidade entregue ao consumidor.

2-) Nível de integração com dispositivos: será avaliado o uso das APIs disponíveis na tecnologia Silverlight para Windows Phone.

3-) Singularidade e inovação: Será avaliado se o aplicativo é original e demonstra um uso inovador das tecnologias de desenvolvimento disponíveis.

4-) Interface de usuário: Será avaliado se o aplicativo é visualmente atraente, fácil de usar e segue as diretrizes do padrão METRO da Microsoft.

Haverá uma segunda premiação para os Apps com mais downloads e consumer reviews positivos que será anunciado no dia 07 de maio de 2012. Para isso todos os Apps deverão ser publicados no Marketplace e o link enviado para os organizadores. Prêmios:

Primeiro Prêmio – 01 Nokia Lumia 800

Segundo Prêmio – 01 Nokia Lumia 710

A agenda do evento prevista, era começar as 13 horas do sabado e terminar às 18 do domingo, porém a galera estava animada a finalizar o quanto antes os aplicativos e acabamos virando a noite…

Galera de madrugada correndo com os projetos de jogos/aplicativos para Windows Phone

A galera estava muito animada e muitos não conheciam a plataforma antes e passaram não só a conhecer, mas também aprederam a programar na plataforma submeteram aplicativos, agora já podem fazer seus próprios aplicativos, comercializar e ganhar dinheiro, hehehe…

Segue abaixo algumas fotos do evento e também dos momentos de Pizza e muito Red Bull que rolaram durante todo o evento:

No total foram publicadas mais de 50 aplicativos, que era a espectativa inicial, e no total foram 61 apps.

Eu acabei me empolgando com o evento e publiquei 2 apps na categoria individual, um que estava parado no meu PC a um tempo: PCI Concursos. Está na versão 0.1, mas a ideia é dar um up nela em breve, e o outro referente a estudos de física, focado especificamente na gravidade e com colisão de elementos, chamado Gravidade 2D, feito em HTML5, que fiz baseado em alguns exemplos que estava estudando a um tempo!

Junto ao Pieter Voloshyn publicamos um aplicativo que busca em um webservice a operadora do seu contato e o exibe, independente de ter sido feita a portabilidade, chamado Consulta Operadora, e também podendo fazer a busca de um número digitado na hora. E junto ao parceiro Alexandre Chohfi fizemos um game muito parecido com um que joguei quando tive o primeiro computador, o nome ficou “Arrows vs Balloons”, e aproveitei pra aprender um pouco de XNA com ele, que manja muito.

Então é isso aí pessoal, um abraço,

Gesmar Júnior
Diretor @AgisIntellicode
MSP | GO/MG | Brasil
Email: gesmar.junior@studentpartner.com
Twitter: @gesmarjunior
Facebook: /gesmarjunior

clip_image001

Articles

Vem aí o Microsoft Web Dev Camp em Uberlândia

In Microsoft .Net on 24 de março de 2012 by Gesmar Júnior

Em abril, no dia 19/04/2012, quinta-feira, à partir das 19 horas haverá em Uberlândia o evento Web Dev Camp, que é voltado para desenvolvimento web (como o próprio nome diz) com ferramentas atuais da Microsoft.

Quem ministrará o treinamento é o Fabrício Lopes Sanchez que é Especialista de produto na Microsoft Brasil e Microsoft Most Valuable Professional. O evento é uma parceria do programa MSP e a comunidade DotNetSô.

O evento é restrito, limitado de 60 pessoas, porque é a quantidade de máquinas disponível na UFU, onde será realizado o evento, portanto,  fiquem atentos ao meu Twitter e Facebook que em breve disponibilizaremos o link para inscrição.

Abaixo uma breve descrição do que vocês verão no evento:

A internet é um ambiente dinâmico e evolutivo. Neste cenário, as tecnologias que suportam a internet em termos de desenvolvimento de aplicações, evoluem na mesma medida. Este curso apresenta as principais tecnologias disponíveis na plataforma .NET para a construção de aplicações web robustas, seguras e com baixo custo. Aprenda a utilizar as principais ferramentas da Microsoft para construção de aplicações web bem como suas principais tecnologias (ASP.NET, Razor, ASP.NET MVC, etc.).

Conteúdo programático

Tema Descrição
Introdução ao cenário web Neste tópico serão discutidos alguns aspectos chave relacionados a internet bem como o processo de evolução experimentado por ela de seu surgimento até os dias atuais.
Conhecendo o WebMatrix Neste tópico será apresentada a ferramenta WebMatrix. Aqui serão apresentados aos alunos as ideias e conceitos envolvidos com a ferramenta e como ela pode se apresentar uma interessante opção no processo de construção de aplicações web.
Conhecendo Visual Studio Express Neste tópico apresentamos o Visual Studio Express. Os alunos serão levados a conhecer as principais características do produto em questão e sua aplicação em projetos web.
Webstandards: HTML, CSS e JS Nesta seção serão apresentados as características básicas relacionadas aos webstandards. O que são, para o que servem e como utilizá-los em projetos web são algumas questões a serem respondidas neste tópico.
Conhecendo o ASP.NET Razor ASP.NET Razor é a nova view engine de projetos web desenvolvida pela Microsoft. Nesta seção, os alunos serão apresentado aos conceitos fundamentais desta tecnologia e suas importantes melhorias para o processo de desenvolvimento web com WebMatrix.
Conhecendo o ASP.NET MVC MVC (Model-View-Controller) é um modelo arquitetônico para a escrita de aplicações web. A plataforma .NET implementa um poderoso framework para escrever aplicações para web neste modelo. Nesta seção, apresentaremos os recursos fundamentais relacionados a este modelo de programação.
Construindo um bookmark Aqui construiremos uma aplicação simples de guest book para ilustrar os conceitos vistos anteriormente com WebMatrix e ASP.NET Razor.
Publicando a aplicação Aqui apresentaremos a ferramenta de publish do WebMatrix e como ela auxilia desenvolvedores com este processo.

Então não perca tempo, fique de olho que em breve teremos o link de inscrição, qualquer dúvida ou mais informações basta entrar em contato Smile

Um abraço,

Gesmar Júnior
Diretor @AgisIntellicode
MSP | GO/MG | Brasil
Email: gesmar.junior@studentpartner.com
Twitter: @gesmarjunior
Facebook: /gesmarjunior

clip_image001

Articles

Jogos em HTML5 – Command and Conquer com HTML5 + JavaScript

In Games, HTML5, Javascript on 23 de março de 2012 by Gesmar Júnior Marcado: , ,

Olá pessoal,

Hoje irei falar de um site/jogo que encontrei esses dias na internet, uma recriação do tão famoso “Command and Conquer”, que era um jogo de estratégia em tempo real (RTS) lançado em 1995 pela Westwood Studios e comprado pela Electronic Arts em 2003, desta vez desenvolvido inteiramente feito em HTML5 + JavaScript.

Link do jogo: http://www.adityaravishankar.com/projects/games/command-and-conquer/

Alguns navegadores ele funciona melhor, de acordo com as tags usadas do HTML e a compatiblidade de cada browser. As imagens podem demorar um pouco para carregar. Testei no Chrome, Firefox, Maxthon e Opera e funcionou tranquilo. No IE9 ficou carregando mas não foi.

Confira o vídeo de demonstração da ultima versão do jogo, que eles estão trabalhando no desenvolvimento:

Demonstração do Command and Conquer em HTML5

A ideia deles é tornar o jogo o mais parecido com a versão original possível, implementar o modo multiplayer e permitir que você entre no site e escolha um parceiro para jogar contra.

Para acompanhar o desenvolvimento, vá no GitHub do projeto: https://github.com/adityaravishankar/command-and-conquer/

Mais informações sobre o desenvolvedor do jogo, outros jogos por ele desenvolvidos e artigos referentes a programação de jogos basta acessar o blog: www.adityaravishankar.com/

O projeto destina apenas como uma prova técnica de conceito para demonstrar os elementos básicos de funcionamento de um jogo RTS em HTML5. Não tem fins comerciais. Mas se você gostar de jogar o jogo e quiser apoiar o desenvolvimento eles aceitam doações / contribuições para manter a hospedagem, na página tem um link para doações.

Um abraço,

Gesmar Júnior
Diretor @AgisIntellicode
MSP | GO/MG | Brasil
Email: gesmar.junior@studentpartner.com
Twitter: @gesmarjunior
Facebook: /gesmarjunior

clip_image001

Articles

O que e porque utilizar o Internet Explorer 9? – Parte 2

In HTML5, IE, Web Standards, Windows, Windows 8 on 21 de março de 2012 by Gesmar Júnior Marcado: , , , ,

Olá pessoal,

Continuando o post anterior (para não ficar muito grande e chato de ler), vamos para falar de outros recursos do Internet Explorer 9.

Tirar maior proveito do hardware do PC com jogos e outros aplicativos mais “pesados” é uma tarefa que não era muito utilizada, antes os navegadores utilizavam muito pouco do hardware da máquina. Um jogo que mostra a performance e fluidez do navegador é o Cut the Rope, para testa-lo, basta acessar o site e jogar Cut the Rope agora: www.cuttherope.ie

Com uma experiência mais rica, sites mais dinâmicos e usando tecnologias de ponta, o IE 9, não se compara com o navegador em suas versões anteriores. A empresa The Hunger Games fez uma especie de jogo/site interativo e nele é possível visualizar essa nova e rica experiência, o “The Capitol”: www.thecapitoltour.pn/explore/

No quesito segurança o IE está bem na frente. O NSS Labs apresentou um relatório em Janeiro/2012 que mostra que o IE é de longe, o mais seguro browser para proteger seus dados:

image_thumb[69]

Um alerta que o site sobre o IE faz em relação aos outros browsers é em relação a privacidade, deve-se tomar cuidados com os browsers a cerca de coleta de informações pessoais sem seu conhecimento, isso acontece com diversos navegadores e muita gente confunde estastísticas de uso do navegador com coleta de informações pessoais, o primeiro é necessário, o segundo com certeza ninguem gostaria de compartilhar.

A nova interface está mais limpa e mais elegante, com mais ferramentas, com uma disposição mais “clean” e a busca e navegação pode ser feitas no mesmo lugar. A ideia é trazer o site acessado pra frente. O link abaixo mostra um vídeo com a diferença entre a interface do IE 8 e o IE9 e também apresenta alguns novos recursos do IE9: http://windows.microsoft.com/en-US/internet-explorer/products/ie-9/features/focused-on-your-websites

Nesse outro link tem vários vídeos sobre os recursos e funcionalidades do IE9: http://windows.microsoft.com/en-US/internet-explorer/products/ie-9/videos

Os controles de navegação tem foco em agilidade e simplicidade, baseado no que você usa mais:
-Botão de voltar maior;
-Barra de endereços e caixa de pesquisa são combinadas em uma nova barra de endereços;
-Menu único com todas as opções apenas nele, diferente das versões anteriores que tinha uma barra horizontal cheia de menus.

image

E aqui embaixo as estastísticas feitas através do site html5test.com, não foi uma nota muito boa, mas se for analizar, além do navegador estar com uma versão 10 prestes a sair, apresento abaixo o resultado dos dois, em alguns requisitos o navegador já nessa versão tem um ótimo suporte,  como Geolocation, Elements, Audio, Vídeo e Canvas, então mãos a obra Open-mouthed smile

image

Resultado do teste do IE9 - 141 Pontos

Resultado do teste do IE10 no Windows 8 - 314 Pontos

Outro site site bom para fazer testes no IE:  www.ie.microsoft.com/testdrive/

Então era isso, até um próximo post, um abraço,

Gesmar Júnior
Diretor @AgisIntellicode
MSP | GO/MG | Brasil
Email: gesmar.junior@studentpartner.com
Twitter: @gesmarjunior
Facebook: /gesmarjunior

clip_image001

Articles

O que e porque utilizar o Internet Explorer 9? – Parte1

In HTML5, IE, Web Standards, Windows, Windows 8 on 20 de março de 2012 by Gesmar Júnior Marcado: , , , ,

Olá pessoal,

A algum tempo eu venho estudando o HTML5, e não tem como estudar essa linguagem sem analisar também os navegadores web, com isso venho conhecendo melhor os navegadores em geral, vantagens e desvantagens do uso de um ou de outro navegador. Uma das coisas que percebo, é que nenhum deles é melhor, ou mais bonito, ou mais rápido. Todos eles tem seus diferenciais e também suas melhorias a serem desenvolvidas.

E hoje vou falar um pouco das novidades vindas do IE9 (Internet Explorer 9). A um tempo atrás, para o lançamento do IE9, fizeram um site muito bacana: www.beautyoftheweb.com. E o que esse site trás de bom?

Então, nele é mostrado alguns recursos, que irei mostrar abaixo:

Primeiramente, o site é todo feito em HTML5, usando vários recursos da linguagem, um recurso muito bacana que é utilizado é o Parallax. Isso significa que apresenta uma diferença no objeto quando visto de diferentes linhas de visão. O efeito Parallax em Web Design é uma técnica que, de acordo com o scroll da página, apresenta imagens se movendo em torno do site em diferentes velocidades e perspectivas, criando uma ideia 3D (Tridimensional). O que isso tem a ver com o navegador? Esse recuso começou a ser amplamente utilizado na web em navegadores com a vinda do HTML5, CSS3 e junto do Javascript, e não são todos os navegadores que o exibem corretamente, nessa funcionalidade o Internet Explorer fez com alta qualidade, passando a ideia do site em três dimensões com elegância.

A combinação do IE9 + Windows 7 é muito boa, você pode fixar seus sites favoritos na barra de tarefas com facilidade, apenas arrastando a aba para a barra de tarefas o atalho é fixado. Vários sites podem notificar o usuário quando tem uma nova mensagem, tweet, alerta ou outra nova informação disponível atravéz do ícone fixado a barra de tarefas:

image

A imagem abaixo mostra o atalho sendo fixado na barra de tarefas

image

A imagem abaixo mostra como fica a página que foi fixada na barra de tarefas, os locais circulados de vermelho mostram algumas diferenças e personalizações em relação aos ícones. No caso por exemplo de aplicativos web isso pode ser um diferencial interessante.

image

De acordo com as funções do site, ao clicar com o botão direito do mouse é apresentado algumas tarefas para acesso rápido, abaixo a imagem mostra o caso da página do Facebook:

image

 

Vou parando por aqui para não extender muito o post, numa próxima parte falarei de outros recursos relevantes do Internet Explorer 9.

Um abraço,

Gesmar Júnior
Diretor @AgisIntellicode
MSP | GO/MG | Brasil
Email: gesmar.junior@studentpartner.com
Twitter: @gesmarjunior
Facebook: /gesmarjunior

clip_image001