Html5 parte 2, conheça as principais novas APIs

Conheça algumas das novas Apis que foram adicionadas a nova especificação da linguagem Html5

Olá pessoal, continuando nossa série de artigos sobre o tema Html5 que teve início na sexta-feira passada, vou hoje abordar um tema bem interessante dessa nova especificação da linguagem Html, trata-se das APIs inclusas na especificação, essas APIs são acessadas através de comandos em Javascript e permitem a manipulação e a utilização em conjunto com os novos elementos da especificação.

Hoje vou destacar 5 dessas APIs, são elas:

WebForms 2.0

Esta API foi criada para facilitar a vida do desenvolvedor na criação de formulários de entrada de dados, dentre as suas funcionalidades temos, novos tipos de entradas de dados como: Seletores de data, intervalo de dados, seletor de cor entre outros. Outro ponto muito trabalhado nesta API é a validação dos dados de formas mais simples com base na utilização de patterns definidas diretamente no formato de atributo do input.

Veja um exemplo de utilização abaixo:

WebForms 2.0
WebForms 2.0

Nesse link, nesse e nesse você pode obter mais informações sobre a WebForms 2.0 API,com certeza essa API merece e vai receber uma artigo mais aprofundado sobre sua utilização por aqui nas próximas semanas.

Web SQL Database

Como o nome já explica trata-se de uma Api para manipulação de dados através da linguagem SQL do lado do cliente , e é sem podemos assim dizer uma API ainda um tanto obscura dentre as novas APIs do html5, o que se deve ao fato de ainda ser muito pouco utilizada, mas passa a ser uma opção aos cookies dando maior liberdade ao front-end, que passa a não depender de uma linguagem server side para trabalhar com banco de dados.

Nesse link você tem um exemplo de implementação dessa API.

Web Storage

Html5 Web Storage
Html5 Web Storage

Através dessa API o desenvolvedor pode armazenar e manipular dados em um volume de até 5mb sem necessidade de definir um tempo de expiração dessa informação. Ela possui uma grande vantagem de performance em relação aos cookies justamente por ser carregada no modelo just in time ou seja apenas quando vai ser utilizada, o que não ocorre com os cookies que são carregados em todas as requisições.

Mais informações sobre a definição dessa API, você consegue aqui, aqui e aqui.

É isso pessoal, até a semana que vem com mais sobre Html5 aqui no blog, até lá.

Google I/O 2013, novidades do primeiro dia de evento.

Google I/O 2013, saiba quais os lançamentos mais relevantes do primeiro dia de evento.

Google I/O 2013
Google I/O 2013

Teve início ontem o Google I/O 2013, principal evento da Google dedicado a comunidade de desenvolvedores das plataformas Android e Chrome. O evento é realizado em São Francisco, Califórnia, mais precisamente no Moscone Center, curiosamente o mesmo palco utilizado pela Apple em seus famosos keynotes da WWDC.

Dentre as novidades apresentadas pela alta cúpula de diretores da empresa, na apresentação que abriu o e evento e incluiu um brasileiro, Hugo Barra, VP de produtos da área de Android, os pontos que mais me chamaram a atenção foram:

Android

Segundo dados da empresa já foram ativados 900 milhões de dispositivos na plataforma, o que é uma base considerável, também foram apresentadas diversas APIS para a plataforma com destaque para a API de social gaming, muito similar ao Game Center da Apple.

Google Plus

Foi apresentada também a nova interface da rede social, que redesenhou a timeline utilizando colunas, e como você pode verificar abaixo o resultado é muito similar ao que encontramos hoje no Pinterest, e no próprio Facebook como você pode ver na imagem abaixo que fiz da minha timeline.

Novo Layout Google Plus
Novo Layout Google Plus

Google Cloud

Talvez a parte mais interessante da apresentação, se deu nos serviços do Google Cloud, que agora conta com 15 GB gratuitos para armazenamento de fotos e inclui ferramentas para tratamento de imagens da nuvem, o que segundo os exemplos apresentados no eventos se mostraram muito interessantes.

Trecho da apresentação do Google Cloud
Trecho da apresentação do Google Cloud

Os vídeos do evento que dura toda a semana podem ser vistos no link:https://developers.google.com/events/io/ em 4 canais diferentes e simultâneos do Yotube.

Até o momento é isso pessoal, estou acompanhando o evento que dura toda a semana e pintando novidades interessantes por lá, publicarei aqui no Blog.

Até a próxima!

 

Inteligência Artificial, uma pequena introdução…

Saiba mais sobre a Inteligência Artificial, como ela funcionam e para quais aplicações pode ser utilizada.

Olá pessoal, durante as últimas 5 semanas, sempre as quartas-feiras eu trouxe para vocês uma pequena introdução sobre o tema robótica, nada muito aprofundado mas sim uma noção sobre os seus conceitos, exemplos de utilização na automação industrial e até uma aplicação prática e que pode ser feito por qualquer um utilizando o Lego Mindstorms.

Porém a partir de hoje vou escrever para vocês sobre um tema que caminha lado a lado com a robótica e que tem se tornando no ultimo ano, o meu assunto preferido, trata-se da Inteligência Artificial, ou simplesmente IA.

O meu interesse sobre o assunto começou em 2012 quando realizei um curso online sobre o assunto, organizado pelos professores Stuart Russel e Peter Norvig e aplicado através da plataforma de e-learning da Universidade de Stanford no site: https://www.ai-class.com, iniciativa essa que levou os conceitos básicos de IA a mais de 100 mil alunos de todo o mundo, e que hoje está disponível gratuitamente no www.udacity.com

Você pode inclusive assistir ao próprio Peter explicando a experiência durante o TED talk no vídeo abaixo:

Dito isto, pretendo nas próximas, muitas, semanas abordar aqui os temas inerentes ao estudo da Inteligência Artificial, bem como trazer e desenvolver exemplos práticos de sua utilização no nosso dia a dia, e esse conteúdo eu terei como fonte o livro escrito pelos dois professores  e que é um clássico da área chamado: “Artificial Intelligence A Modern Approach”, e o conteúdo do meu professor de Inteligência Artificial, www.niltoncanto.com.br, ou seja não será a minha opinião, a menos que eu deixe isso claro 🙂

Para começar acho válido destacar alguns conceitos básicos:

O que é a Inteligência Artificial?

De modo geral o conceito de inteligência, é definido de diversas maneiras principalmente quando tratado na área de tecnologia, em nosso contexto, podemos definir a inteligência artificial como a capacidade de um sistema computacional tomar a “decisão correta” com base nas informações por ele recebidas, da forma mais próxima possível aquela que um ser humano faria.

Outras vertentes que podem caracterizar um sistema como inteligência é:

  • Capacidade de aprender
  • Capacidade de raciocínio
  • Capacidade de tomar decisão
  • Capacidade de reconhecer padrões

Estas característica são basicamente os objetivos principais do estudo e desenvolvimento de aplicações de inteligência artificial nos dias de hoje, existindo para isso uma série de técnicas e conceitos que discutiremos aqui nas próximas semanas.

Por hoje é só pessoal, espero que vocês gostem do assunto assim como eu me apaixonei por ele nos últimos tempos, na quarta feira que vem tem mais, quando vou explicar um pouco sobre os conceitos de IA Forte e IA Fraca, quais são as caraterística, e como pensam seus defensores.

Até lá!

Como criar um módulo para sua loja Opencart? Parte 1

Veja como criar um módulo para sua loja Opencart de forma simples e padronizada

Tudo bom queridos leitores? Hoje é dia de colocar a mão na massa e falar de código aqui no blog, como vocês já puderam perceber nas últimas semanas tenho dedicado essa série de posts práticos a plataforma de comércio eletrônico Opencart e eu já expliquei aqui como funciona a estrutura e a modelagem de dados da plataforma, e na semana passada expliquei a importância do VQmod na manutenção da integridade da plataforma e hoje vou explicar como contruir um módulo simples para a plataforma.

O que nosso módulo vai fazer?

Para evitar uma maior complexidade neste artigo o plugin terá como função criar um box com um formulário em nossa loja que receberá dois campos para nome e email de usuários interessados em receber newsletter da loja, basicamente um plugin para captação de base .

Onde o modulo será exibido na loja?

Como utilizaremos o modelo padrão de plugins do sistema, o módulo poderá ser exibido em qualquer template do sistema e na localização definida na configuração do módulo, como você pode visualizar na imagem abaixo:

Módulo para sua loja Opencart
Módulo para sua loja Opencart

Criando a interface administrativa do módulo

O primeiro passo para a criação do módulo é disponibilizar o mesmo na área administrativa da loja, para isto você deve criar os seguintes arquivos, nos caminhos indicados:

/admin/controller/module/rfnewsletter.php

Arquivo responsável pelo controle das ações do módulo na interface administrativa do módulo, ou seja é o responsável por tudo que ocorre no admin, ativação do módulo, visualização de dados e exportação da base de cadastrados

/admin/view/template/module/rfnewsletter.tpl

Arquivo responsável pelo template da área de ativação e localização do módulo da frente de loja

/admin/view/template/module/rfnewsletter_data.tpl

Arquivo responsável pelo template de exibição dos dados dos usuários cadastrados no módulo.

/language/portuguese-br/module/rfnewsletter.php

Arquivo responsável pelas informações de idioma do módulo.

Após esse primeiro passo você deve criar a tabela no banco de dados que será responsável pelo armazenamento dos dados, para criar a tabela utilize a query abaixo:

CREATE TABLE `rfnewsletter` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `email` varchar(255) DEFAULT NULL,
  `time` timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
 )

Se você seguiu todos os passos corretamente o módulo deve estar disponível para instalação no menu extensões > módulos do seu Opencart, mas você deve estar se perguntando, ué? Mas o que eu coloco nos arquivos? Como é muita coisa para descrever aqui no post, você pode baixar o plugin pronto e em funcionamento no site do Opencart onde coloquei o módulo

É isso pessoal, o post hoje ficou mais longo do que o normal devido a complexidade do assunto, espero que possa ajudar na criação de muitas ferramentas e customizações para o Opencart, até semana que vem quando vou explicar como deve ser feita a criação da estrutura do módulo na loja e também falar sobre a instalação do módulo, até lá!

How Opencart database works?

Learn a little more about how Opencart database was modeled

Opencart database
Opencart database

Hi everyone, thurday, day to make a “hands-on” in the blog, and talk about development on the road.

As i promised last week today I will continue to tell you about the structure of the Opencart e-commerce platform, more specifically about their data modeling.

first of all remember that we are talking about a database built in MySql

A lot of tables, and a little bit of mess

On this default installation i’m using 1.5.1 version, the output Opencart account with absurd 89 tables, which in my opinion is overkill, just being common means when compared to other platforms in the same class like Magento.

Looking deeper into the data modeling we can identify some groups of tables, especially the prefix used in the name of the same, the main ones are.

  • attribute_…

Responsible for, the product attributes, things that have no relation to the grid or stock, but characteristics.

  • banner_…

Thats make sense, is only about advertising

  • category_…

Control the categorie tree, responsible by the store navigation

  • customer_…

Group almost all customer data, because the address is saved in other table named Address 😐

  • information_…
Responsible by content pages, looks like an WordPress posts
  • option_…

Group stock data, likes sizes, colors, etc

  • product_…

Product data only it in incredible 16 tables

  • return_…

Responsible by RMA system

A lot  of things?

Yet there are other smaller and less relevant gruops, but I think seeing that amount of groups and tables you already get an idea of the complexity, not always necessary, included on that database.

All this amount of tables is crafted almost a traditional manner by the models of the system which as I said last week are duplicated between the store and the administrative system  because system not uses one framework to encapsulate the queries or data.

Well, i think thats enough for today, on next thursday i will continue to talk to you about Opencart, explaining this time, how VQmod works with the Opencart System.

Hug, see you!

Dobrando a sua produtividade com Emmet!

Saiba como o Emmet vai fazer a sua produtividade dobrar deixando a codificação muito mais divertida

Olá leitores mais inteligentes da internet, hoje é segunda-feira, dia, aqui no blog de dicas de produtividade para quem trabalha com desenvolvimento, e como diria o pessoal de call-center: “Vamos estar Dobrando a sua produtividade” com essa dica de hoje, alias o post de hoje é o artigo de número 400! aqui no blog, mas vamos conheçer um pouco mais sobre o Emmet.

Se você não tem paciência para ler o texto, assista o Screencast no final do post

O que é o Emmet?

Pra quem nunca ouviu falar da Emmet esse o novo nome/marca da biblioteca mais famosa biblioteca de html/css “improvement”, ou seja ela torna o ato de programar escrever Html/CSS extremamente mais produtivo com base em uma série de atalhos e pequenos  truques que facilitam a vida do desenvolvedor.

Quem criou o Emmet?

A biblioteca Emmet foi criada e é atualmente mantida por Sergey Chikuyonok desenvolvedor russo que possui além desse uma série de outros projetos open-source que você pode acompanhar em seu Github

Por que o Emmet vai dobrar a sua produtividade

Simples, você vai digitar menos, a mecânica do plugin é muito simples, basta digitar o atalho e apertar o Tab e a mágica acontece, veja o exemplo:

Você digita:

div#container>ul>li*3

Aperta TAB e o editor transforma em:

Produtividade com Emmet
Produtividade com Emmet

E quando falamos de CSS, basta que você decore alguns atalhos que irão fazer mágica com sua produtividade, veja a lista abaixo, e não esqueça de sempre ativar o atalho com a tecla table-layout:

m50 = margin: 50px;
w30 = width: 30px;
tl = text-align: left;
fs = font-style: ;

E a lista é gigantesca, e você pode conferir aqui na documentação do projeto

Como instalar o Emmet no SublimeText?

O Sublime é o meu editor preferido dentre outras coisas pela facilidade em se installar plugins, e neste caso não é diferente, basta abrir o gerenciador de pacotes (CMD+SHIFT+P e procure Package Manager) Selecione instalar novo pacote, procure por Emmet e aperte Enter, reinicie o sublime e pronto.

Onde baixar o Emmet? 

No site oficial do projeto você encontra plugin do Emmet para as plataformas mais usadas do mercado como SublimeText, TextMate, Coda, Eclipse, Notepad++ dentre outras (http://emmet.io/download/)

É isso pessoal, até amanhã!

Assista no Screencast abaixo como utilizar o Emmet no Sublime

 

Html5 passo a passo – parte 1

Saiba o que é o Html5 passo a passo, e conheça todos os detalhes dessa tecnologia que vem revolucionando a forma como desenvolvemos sites.

Sexta feira, dia de falar de usabilidade e interface aqui no Blog, hoje o post demorou mais do que o normal para ser publicado por que o dia foi bem corrido, mas vamos ao que interessa Html5 passo a passo.

Semana passada eu falei para vocês sobre como criar um layout responsivo utilizando o Skeleton framework, em um passo a passo sobre como baixar instalar e criar seu projeto em cima deste framework, se você ainda não leu não perca tempo e leia agora!

Mas hoje vou iniciar uma série sobre HTML5, onde pretendo explicar em detalhes os conceitos por tras dessa nova especificação da linguagem html, além dos detalhes sobre os novos elementos, como funcionam e como podem ser utilizados, sempre com exemplos práticos.

HTML 5
HTML 5

O que é o HTML5?
Na década de 90 foi desenvonvida a especificação da linguagem de marcação HTML4, de lá pra cá muita coisa achonteceu, a tecnologia mudou, os navegadores evoluiram e se mostrou necessária uma atualização da especificação, e essa atualização deu origem ao HTML5.

Todavia a especificação criada pelo W3C ainda não se encontra finalizada ou indicada como padrão, uma vez que nenhum navegador ainda possui suporte completo a todas as suas definições, a previsão para que isso aconteça nesse momento é 2014

Quais são as vantagens do HTML5?

As principais vantagens desta especificação do HTML são:

* Seus novos recursos baseados na utilização do DOM
* Maior facilidade para identificar e corrigir erros de codificação
* Maior compatibilidade entre plataformas diferentes (Mobile/Desktop)
* Menor necessidade de plugins (Flash)
* Utilização da linguagem MathML
* Utilização da linguagem SVG
* Inclusão de uma série de novos elementos
* Remoção de elementos desnecessários ou obsoletos

Essas são apenas algumas das centenas de vantagens dessa nova especificação, e que vou entrar em detalhe nos próximos artigos da série.

Por hoje é só, sexta-feira que vem eu volta para falar sobre as novas APIs que foram inclusas nessa nova especificação. Até lá!

 

Personal Branding – Você esta cuidando da sua marca pessoal?

Personal Branding, você sabe o que é? Como você tem cuidado de sua marca pessoal nos meios digitais? Veja algumas dicas.

Personal Branding – Bom dia pessoal, quinta-feira é dia de um papo menos técnico por aqui, e ontem em um papo muito interessante com o Marcelo Balerone do blog Esquenta, acabei relembrando o conteúdo de um palestra que ministrei na Universidade Anhembi Morumbi em 2011 e como esse assunto se faz ainda mais relevante nos dias de hoje.

Veja abaixo os slides da palestra que dei em 2011 e uma resenha interessante sobre ela

Digital Personal Branding from Rafael Franco

Provavelmente com os slides você não vai conseguir captar o conteúdo mas consegue ter uma idéia do que foi falado, e é basicamente a estratégia que aplico na gestão da minha marca pessoal no meio digital.

Basicamente posso resumir a idéia geral do conceito de gestão de marca pessoal em uma construção de marca que transmita de forma clara e sólida a imagem que você deseja as pessoas que você não conhece pessoalmente.

Nesta apresentação falei um pouco sobre os principais erros cometidos quando a gestão de marca pessoal é mal feita, que considero:

  1. Relacionamento de sua marca com conteúdo inadequado
  2. Dispersão de público devido a indefinição correta desta marca
  3. Marca não existente
  4. Marca não identificável

Esses são apenas alguns de uma série de problemas encontrados e que pretendo abordar nas próximas semanas,  mas hoje gostaria de aproveitar o assunto para indicar um livro curto, direto e bem objetivo sobre a gestão de perfis no LinkedIn, a leitura é rápida por se tratar de um livro curto porém é de grande valia para quem está começando a identificar o valor de uma gestão mais assertiva da sua marca pessoal

Trata-se do Linkedin, como se destacar – do autor Wagner D da Silva o livros está em formato e-book disponibilizado de forma gratuíta na Ibookstore e você pode baixar aqui

Linkedin, como se destacar
Linkedin, como se destacar
 Faça a leitura dos dois materias e comece hoje a cuidar da sua marca pessoal, e até a próxima!

Manipuladores, as ferramentas utilizadas na robótica

Manipuladores, peça principal no cenário da robótica e da automação industrial, saiba como são e funcionam.

Oi pessoal como estão? hoje é quarta-feira dia de dar segmento a nossa série de posts sobre o tema robótica, quero trazer hoje um tema muito importante e que complementa as informações dos nossos últimos dois posts (1) (2) dedicados a utilização de robôs na automação industrial que são os manipuladores.

Os manipuladores como o nome diz são robôs especialistas na manipulação de objetos de todas as formas e tamanhos e basicamente podem ser dfinidos como os tipos de robôs utilizados na automação industrial básica, e tem como característica básico o fato de não se tratar de humanóides como você pode estar imaginado e sim de braços robóticos e em sua maioria são classificados em um dos grupos listados abaixo:

Retangulares –  Tem como vantagens a facilidade de visualização e de programação além de sua estrutura rígida e como desvantagens o fato de só poder alcançar o que esta a sua frente, possuindo assim uma baixa relação entre envelope de trabalho e área ocupada, se você não sabe o que é envelope de trabalho, leia aqui.

Manipulador Retangular
Manipulador Retangular

Gantry – Similares aos cartesianos, mas funcionando com base em suportes paralelos na lateral.

Manipulador do tipo Gantry
Manipulador do tipo Gantry

Cilíndricos – Tem como principal característica o movimento por meio de coordenadas cilíndricas que são definidas com base nas variáveis: altura, rotação e extensão do braço. Tem como vantagens o fato de  conseguir alcançar tudo em seu entorno, eixos rígidos e eixos de rotação de fácil construção  já como desvantagens podemos elencar o fato de não conseguir  alcançar o ponto imediatamente acima do manipulador e a não capacidade de ultrapassar obstáculos

Manipulador Cilíndrico
Manipulador Cilíndrico

Esféricos – É basicamente controlado por meio de coordenadas polares: Rotação, Tilt e Extensão do braço. Podemos destacar como vantagem principal seu grande alcance na horizontal. e como desvantagem o fato de não conseguir ultrapassar um obstáculo e de forma geral um pequeno alcance vertical.

Manipulador Esférico
Manipulador Esférico

Articulados – São os mais completos e utilizados, e caracterizados por juntas rotativas verticais, com eixos na horizontal. Funciona como uma escavadeira e possui em geral 3 juntas rotatórias que permitem atingir qualquer posição no espaço em alta velocidade.
Vantagens: Pode alcançar sobre ou sob obstáculos; Possui a maior área de trabalho, com a menor área de alcance na mesa. e como desvantagem mais latente temos a sua complexidade de programação.

Manipulador Articulado
Manipulador Articulado

SCARA– É um manipulador considerado não tradicional, e que possui juntas rotativas com eixos na vertical (juntas na horizontal) criado para manipular objetos pequenos e com precisão, normalmente é utilizado em objetos de tamanho reduzido, veja no vídeo abaixo, esse manipulador sensacional.

É isso pessoal, com esse artigo nós fechamos essa primeira série de posts com os conceitos básicos da robótica aplicados a área de automação industrial, espero que tenham sido interessantes e que possam lhe auxiliar no estudo desta área tão interessante da tecnologia.

Quarta feira que vem estarei de volta com mais um artigo dedicado a área de Robótica e Inteligência Artificial.

 

Como funciona o VQmod no Opencart?

Saiba como funciona o VQmod no Opencart e como ele vai facilitar a sua vida na customização desta plataforma

VQmod no Opencart
VQmod no Opencart

Bom dia pessoal, terça-feira, dia de colocar a mão na massa aqui no blog e falar de código na prática, hoje eu vou dar segmento a série de posts que venho fazendo (1), (2), sobre a plataforma de comércio eletrônico Opencart e como eu prometi na semana passada, hoje eu vou explicar pra vocês: como funciona o VQmod, e como ele ajuda a facilitar a vida do desenvolvedor que trabalha com o Opencart.

O que é o VQmod?

Conceitualmente é uma idéia muito simples, você criar pequenos patchs para os arquivos php do core da ferramenta, porém agrupa os mesmos em um arquivo XML localizado na pasta do VQmod, sempre pontuando qual arquivo deseja alterar, o ponto de início da alteração e se deve ser feita via replace, ou incluindo código antes ou depois do ponto de alteração.

Feito isso o VQmod no momento da execução do PHP original, aplica o Patch e cria uma nova versão do arquivo que é salva em CACHE e sempre que o arquivo é executado o Apache vai utilizar a versão de cache e não a original, dessa forma você pode alterar os arquivos do core do sistema, sem efetivamente altera-los.

Porque utilizar o VQmod no Opencart?

Infelizmente o Opencart não conta com um sistema adequado de atualização ou customização, desta forma os desenvolvedores sempre que desejam atualizar a plataforma, tem como único meio para isso: copiar os arquivos novos sob os antigos, perdendo desta maneira todas as customizações realizadas e/ou melhorias no core da ferramenta.

É justamente para melhorar esse cenário que surge o VQmod como forma de encapsulamento e separação das customizações criadas pelo desenvolvedor, da parte atualizável do sistema, permitindo assim atualizações menos traumáticas.

Como instalar o VQmod no Opencart?

A instalação do módulo, por assim dizer é bem simples, basta baixar o pacote aqui, e descompactar na raiz da sua aplicação, após este passo, acesse pelo navegador a pasta de instalação, onde será necessário dar permissão de escrita nos arquivos indexes da plataforma, além de permissão na pasta de cache do módulo, ou seja em dois minutos você realiza a instalação. Feito isso é só escrever os XML de alterações.

Outras implementações do VQmod

Segundo a equipe de desenvolvimento do projeto, o mesmo não foi desenvolvido exclusivamente para Opencart, podendo ser aplicado a qualquer plataforma MVC escrita em PHP com apenas alguns ajustes, e já existem implantações para phpbb e cmsmadesimple, e em breve outras surgirão.

Aproveitando, o pessoal do Surgimento, fez um vídeo explicando passo a passo como funciona o VQmod, vale a pena dar uma olhada.

É isso pessoal, até terça-feira que vem com mais dicas sobre o universo do comércio eletrônico, colocando a mão na massa no desenvolvimento de soluções.

Um Abraço!