Arquivo do autor:Clécio Bachini

Sobre Clécio Bachini

Fundador, Sócio e Diretor de Pesquisa e Desenvolvimento da Soyuz Sistemas. Foi professor de tecnologias Web no Centro Paula Souza. Palestrou em eventos como Web Expo Forum, Front In Londrina e Road Show TI do SENAC. Especializou-se em simplificar a interface entre o ser humano e dispositivos digitais. No momento, dedica-se à Open Web Platform, Internet das Coisas, BI e Visualização de Dados. É desenvolvedor Web desde 1997 e é certificado em HTML5 pelo W3C Escritório Brasil.

7Masters do iMasters: Uma conversa sobre a era pós-dispositivos

No dia 24 de julho de 2012 aconteceu o 7Masters  do iMasters sobre Mobile. Fui convidado a dar uma visão sobre Open Web Platform. Uma conversa informal e muito enriquecedora.  Veja o vídeo da apresentação:

Palestras 7Masters Mobile | A era pós-device com Clécio Bachini por imasters no Videolog.tv.

A Plataforma Aberta da Web – Open Web Platform

Grafeno: se tudo der certo, circuitos serão feitos disto

Grafeno: se tudo der certo, circuitos serão feitos disto

Está surgindo uma nova era, e poucos ainda se manifestaram sobre ela. É a era da Plataforma Aberta da Web. Mais do que o rótulo de HTML5, as tecnologias ligadas à Web vão sofrer uma revolução com os novos recursos agregadores de mídias, armazenamento e transmissão de dados. O mecanismo que hoje chamamos de browser vai se tornar a grande máquina virtual, que estará em todos os dispositivos.

Sei que você pode imaginar que o tablet é realmente a grande revolução da mobilidade. Mas ele está longe, mas muito longe do que nós discutíamos no Ipiranga (no tempo do colégio técnico em eletrônica na GV) nos anos 90. Longínquos anos 90! Lá já falávamos de folhas de papel touch screen com sistemas em nuvens. Portanto, estamos ainda na pré-história.

Não pense em dispositivos. Os dispositivos, como pensamos hoje, serão uma piada. A web estará em tudo. Nas roupas, nos livros, nas paredes, nas tintas, nas lâmpadas. E por que a web, e não Java ou Python ou Ruby ou C? Porque a web é a maneira mais inteligente e humana de se criar interfaces! A web, quase por acaso, se tornou o meio mais simples e rico de se transmitir e interagir com a informação.

Isto acontece pela maneira como as tecnologias web são construídas. Explico – temos camadas: a grande camada semântica e estrutural – HTML; a camada de estilo, beleza, decoração e agora animação: CSS; e a camada de interatividade, a cola que faz a web rica: o Javascript ou EcmaScript. Cada uma dessas camadas deve funcionar e ser construída de maneira independente, permitindo que a riqueza da experiência não seja destruída por uma intervenção em alguma das camadas.

A camada HTML permite que objetos sejam criados de uma maneira muito peculiar: eu posso explicar o sentido de cada objeto, para que alguém com uma cultura diferente possa tentar entender. Esse alguém pode ser um ser humano ou uma máquina. No caso de ser um ser humano, eu posso tentar explicar detalhadamente o que estou tentando mostrar naquela interface. Por exemplo, explicar a um deficiente visual que a minha página ensina crianças a criar jogos com blocos de montar. Isto tornar essa estrutura rica e fascinante. Indo além, meu código pode ser entendido por alguma máquina. Assim, poderia desenvolver um robô que compreenda o sentido da minha página e faça conexões com outras páginas, para criar um resultado completamente diferente, que talvez nenhum ser humano fosse capaz de notar. A isto chamamos semântica. E o HTML é uma forma espetacular de fazer códigos que façam sentido para os seres humanos e as máquinas.

Depois da semântica criada, podemos dar forma e estilo. Isso fazemos com uma tecnologia chamada CSS. E essa linguagem é distinta do HTML, mas não menos genial. Ela permite que uma mesma estrutura possa ter aparência diferentes de acordo com diversos fatores, até mesmo a vontade do ser humano responsável. Assim, com essa independência, eu posso dar formas visuais diferentes a um mesmo código, sugerindo diversas experiências sem interferir ou destruir a semântica original.

Por fim, cola. O Javascript (Ecma) é o que permite ações e reações relacionada às duas camadas anteriores. Ele é a eletricidade. Ele ouve e fala. Ele é a alma (do latim “o que anima”) da Open Web Plarform. Vejamos: o HTML e CSS é apenas um retrato inicial da sua interface. Sim, uma fotografia do que o projetista da interface quis como inicio. Mas só como inicio. O Javascript permite modificar os objetos HTML bem como seu estilo CSS. Assim, podemos criar e modificar livremente conteúdo em tempo real. Podemos ouvir um evento, como um clique, e a partir disto criar um texto dentro de uma caixa. Podemos mudar a cor, podemos animar e arrastar. Podemos, com HTML5, praticamente tudo.

Pense que os objetos do HTML são como aquela bonecas russas, uma aninhada dentro da outra. Um objeto pai pode conter inúmeros objetos filhos. Assim, porque estamos lidando com objetos, podemos dizer que se trata de um Modelo de Documentos em Objetos, em inglês a sigla é DOM. E se temos pai e filho, temos herança. Entenda a herança como se pegássemos a boneca russa e mudássemos de lugar. Todas as que estão dentro se movem juntas. Assim acontece com os objetos em Open Web. E isto cria um maneira muito simples de construir interfaces. Eu crio um bloco semântico que contém alguns objetos relacionados.

Matroshka, Bonecas Russas: Objetos em Cascata

Matroshka, Bonecas Russas: Objetos em Cascata

Ok, introduzido o HTML e a Open Web, por que eles são revolucionários?

Porque a Web vai ser a máquina virtual universal. O sonho que o Java tinha, a web vai concretizar.

A web já roda em praticamente todos os dispositivos microprocessados. E vai rodar em tudo mesmo. O motor que toca o HTML nos browsers vai estar presente em todos os lugares. O processamento, com a internet de alta velociade, não vai ser local, mas remoto. Em um futuro muito próximo, folhas de papel, plásticos, tecidos revestidos de grafeno terão capacidade de se tornar dispositivos inteligentes, conectados em rede. Ou seja, qualquer objeto vai ser um computador em potencial – barato e descartável. Nesse dispositvo, eu aposto, rodará web.

Por que web é simples e fácil de fazer. É fácil de aprender e ensinar. É de graça e universal. A Web é poderosa, e sua semântica, quando usada com sabedoria, é abrangente e poética. E agora, com a inclusão de suporte a áudio, vídeo, animação e 3D avançados, não há motivo lógico pra se usar outra interface. As outras linguagens não vão morrer, muito pelo contrário, vão ter um vida longa e próspera rodando no lado dos servidores, produzindo Open Web.

Telas Flexiveis

Samsumg Youm: Telas Flexiveis

Daqui a dez anos o metro vai parar na estação e toda sua superfície vai estar coberta com um adesivo de propaganda, como hoje. A diferença é que ele vai ser animado e interativo. Esse adesivo vai rodar Web. Dentro do metro, você vai ver uma propaganda que diz “Curta essa marca”. Você vai poder clicar no adesivo e curtir. No supermercado, o iogurte vai falar com você. E, não duvido, até o dinheiro vai interagir, para evitar falsificações, com dados de geolocalização e rastreabilidade. Pense numa Onça animada na nota de cinquenta reais. Isto está mais perto do que você pensa, e isto é Web. Prepare-se.

Então, Web não vai estar mais dentro do laptop ou desktop, ou de um celular ou tablet. A web vai estar colada em tudo, interagindo com a internet que vem da nuvem. Portanto, pensar hoje em fazer apps para um único dispositivo é no mínimo uma estratégia desastrada. As pessoas devem se preparar para um mundo onde o dispositivo não importa. O que importa é a experiência humana, a interface.

PS: Conversando com a Talita Pagani, ele me introduziu o conceito de Tangible User Interface e Organic User Interface. Dêem uma olhada neste artigo:http://www.organicui.org/?page_id=5. E agora imagine que roda web. É isto. :D

Redes Sociais: Ensinando andróides a pensar

Apple McIntosh

Isto é uma maçã

Um pequeno robô vê uma maçã. Maçã: fruta suculenta, a preferida de muitas pessoas. Também deu nome à fábrica de dispositivos eletrônicos. Alguns amam, outros detestam. Mas a inspiração – essa veio do Newton, que estava embaixo da macieira quando a fruta, madura, vermelha e suculenta, caiu na sua cabeça revelando a gravidade. Lenda ou verdade? O robô talvez não saiba responder, mas ele sabe o que as pessoas sabem e sentem a respeito disto.

Dois dias atrás, conversando com o Fábio Flatschart, ele me apresentou o Pinterest. Ok, mais uma rede social que a profissão nos obriga a conhecer. Só que para mim, o Pinterest foi a maçã do Newton. Caiu na minha cabeça e percebi algo que nunca tinha pensado: estamos ensinando às máquinas pensamento subjetivo!

Vejam só: há muitos anos existem máquinas que aprendem. Aprendem por experiência e obervação, como um filhote. Neste perfil, quem programa o instinto inicial é o construtor da máquina. Ele também coloca alguma informação e inteligência artificial. Geralmente tudo isto embarcado ou em alguma rede local.

Pois é, inteligência artificial: para mapear todo o conhecimento humano com sua subjitividade cultural qualquer fabricante de software levaria décadas. E mais – quando alguém responde uma pergunta com algum tipo de estimulo, como dinheiro ou prêmios envolvidos, a transparência das informações é comprometida. Quantas vezes eu vi os carros de pesquisa para novos produtos parados na rua Tuiuti e o povo fazendo fila pra responder que adorou só pra ganhar algum prêmio.

Mas agora, meus amigos, todo conhecimento humano, em nível racional e emocional está sendo mapeado. E, nenhuma empresa está pagando por isto. Muito pelo contrário, as pessoas estão fazendo isto de graça, como voluntárias, e com prazer. Isto se chama Redes Sociais.

Nas redes sociais as pessoas compartilham livremente suas opiniões, emoções, fatos do cotidiano, imagens, músicas, gostos, cultura, religião etc. Eu deixo claro que gostei no Facebook, eu coloco um hashtag no Twitter. Tudo pra deixar bem explicito o que quero dizer.

E isto, se ninguém notou ainda, está criando um vetor cultural, que vai ensinar às máquinas, com alguma inteligência artificial baseada em pilares muitos simples, entender subjetividade.

Superman 1941

Robô Wi-Fi - Superman -1941

E como o Pinterest me ensinou isto? Vamos lá: eu navego na rede e vejo uma foto de uma maçã. Eu coloco um pin nesta maçã, e pinduro no meu quadro virtual dentro do Pinterest. Este quadro tem um nome, dando valor semântico ao objeto virtual. Outras mil pessoas fizeram a mesma coisa com a mesma imagem. Só que cada um criou um valor semântico único, classificando essa imagem e fazendo um comentário. Jogando um pouco de inteligência artificial em cima disto, eu posso obter um vetor que aponta qual a tendência emocional aquela imagem causa em determinados grupos sociais. Ou seja, a máquina é capaz de saber que emoção uma determinada imagem causa nas pessoas. Assustador, não? Mas isto é só o começo!

Na ficção científica, os andróides se assemelham tanto ao homem que, como nós, carregam o conhecimento embarcado. Até pouco tempo, sempre pensamos em robôs que seriam programados para entender certos problemas. Mas agora minha visão mudou. É um chute, mas penso que a inteligência artificial vai existir primordialmente na nuvem. E que todo autômato vai estar ligado em nuvem como um terminal burro que consulta seu mainframe. Isto vai desde os nano-robôs que vão construir os edificios, até os adesivos interativos colados nos postes. As embalagens das bolachas que tocam propaganda, a garrafa de Gatorade que controla o seu treino. Essa é a grande era da internet das coisas! E a tecnologia pra isto se chama Open Web Platform, do W3C.

Minha visão é que todo o conhecimento das pessoas está sendo armazenado de maneira natural e vai alimentar uma base de inteligência que vai fazer a Matrix parecer um Fiat 147. Caso não tenha percebido isto está acontecendo agora. E não é uma coisa boa ou ruim. É um fato.

Não se iluda com os estudos sobre redes sociais que publicitários estão fazendo. Publicitários não conhecem Alan Turing, autômatos e Prolog. Eles apenas sugam a nata gordurosa e perceptível que está sobre as mídias sociais. O melhor, o incrível e o extraordinário estão em baixo. Este é o leite que vai alimentar as máquinas, num futuro que nem Verne, Asimov ou Orwell ousaram imaginar.

Do Androids Dream of Electric Sheep?  - perguntou Philip K. Dick. Eu agora prefiro pensar que os Andróides sonham com Redes Sociais.

Tudo isto até a próxima tempestade solar. :D

Grandes mentiras sobre HTML5

Pinocchio

Pessoas más falando sobre HTML5

Você anda de congresso em congresso, de palestra e palestra e vai colecionando uma série de leis e cânones que vem de cima pra baixo sobre HTML5. As vezes, fico ruborizado ao ver aquela pessoa que tem pouca informação, má fé ou má intenção, dizendo absurdos sobre HTML5 ou qualquer uma das novas API agregadas a ele. A verdade é que tudo é muito simples – e que tem pouca gente com coragem de dar a cara pra bater fazendo o que tem que ser feito: abandonar o desgastado, velho e semanticamente limitado XHTML.

Vamos classificar algumas mentiras clássicas sobre HTML5:

1. HTML5 não pode ser usado comercialmente

Essa mentira tem um fundo de preguiça. Um pouco de preguiça de aprender, mais um pouco de preguiça de mudar paradigmas Há Soyuz abandou o XHTML desde setembro de 2010 e até hoje não sentimos saudade. Já fizemos mais de 20 sites e sistemas próprios e para clientes com a tecnologia e não sentimos problemas graves. Obvio que temos que ensinar por meio de técnicas aos browser antigos e sem suporte como interpretar as novas tags ou até elementos de CSS3, mas isto não é impeditivo pra que uma web mais rica e semanticamente mais elaborada seja apresentada às pessoas cujos navegadores tem suporte nativos ao HTML5.

2. A maior mudança do HTML5 foram os Vídeos, Áudios e Canvas

Mentira ingênua. A maior mudança do HTML5 foram semânticas. Introdução de tags que melhoram a compreensão do código para o browser, leitores e robôs. A nova semântica, com o passar do tempo, vai fazer com que a web vire um grande repositório de dados interligados. As próprias tags de áudio e vídeo, além de atuar como players, também são semanticamente mais ricas e indicam que a página tem um conteúdo multimídia até para dispositivos incapazes de tocá-los.

3. Objetivo do HTML5 é matar o Flash

Mentira guerrilheira. O objetivo não era matar o Flash. Era agregar tecnologias que o Flash, por muito tempo, trouxe na frente. Se o Flash se tornar obsoleto, a Adobe está preparada pra isto, pois é muito mais barato fazer softwares de edição para HTML5 do que manter uma equipe pra produzir um player próprio. Não seja bobinho. Tecnologias abertas dão muito mais lucro hoje em dia. Milhares de geeks mundo afora debugam de graça.

4. HTML5 não faz diferença pra SEO/SEM

Veja este vídeo:
http://www.youtube.com/watch?v=xIxDJof7xxQ&feature=g-like

Em 2008 o Google já estava desesperado por uma nova semântica que indicasse para robô o que os conteúdos queriam dizer. Ele queria ter acesso a mídia. Ele queria semântica. Muita semântica. E você, meu bom amigo, acha mesmo que ele está ignorando todo a nova semântica? Acha que tem um cara falando: ah, não faz diferença pra mim saber que isto é um artigo ou menu ao invés de um DIV genérico. Você está em negação. E vai ser atropelado. Sua sorte é que tem muita gente no mercado que acredita em Saci Pererê. Mas eu não. :D

5. HTML5 tem falhas graves de segurança

Não use! Não use… Tecnologia! Toda tecnologia tem furos, não se engane (nem você, usuário de Mac): tudo em TI tem furos. E HTML5 deve ter seus furos, sim! Mas nada é mais grave do que o que sempre existiu! É uma tecnologia em formação, e é lógico que tem muitos gurus do caos querendo apregoar o apocalipse. Novas tecnologias, mas mesmas e velhas boas abordagens de segurança. A vantagem é que estamos desenvolvendo uma plataforma aberta, o que possibilita que a falhas sejam descobertas e tratadas de maneira muito mais rápida e honesta.

Concluindo:

Há mais, e eu vou me lembrar pra acrescentar. Por enquanto, essas são as mais chocantes. Espero que vocês não sejam medrosos e abusem da Plataforma Aberta da Web. Só  assim a tecnologia vai avançar e atingir a todos igualmente e democraticamente. Plante a coragem de ter coragem e não o medo que torna as pessoas reféns.

Soyuz apoia Front In Londrina

FrontInLondrina -  LogoA Soyuz apoia e patrocina o FrontInLondrina!

Clécio Bachini, fundador e diretor da Soyuz, vai conversar sobre os desafios que o desenvolvimento mobile trouxe para o mercado – sob uma visão além do HTML5, mas da  Plataforma Aberta da Web.

FrontInLondrina será uma oportunidade para desenvolvedores Front-end de Londrina e região buscarem aprimoramento, maior valorização e profissionalização do mercado. Um espaço para a troca de experiências e a interação em benefício de todos nós.

Ed. Moderna – Sistema Uno Internacional

Sistema UNO de Ensino

A Soyuz entregou em 30 dias aproximadamente 2600 slides em HTML5 para a Editora Moderna, num trabalho para o Sistema Educacional UNO Internacional direcionado ao México, cuja a exigência era ser aberto a correções e compatível com iPad e Web.

Além disso, desenvolvemos uma metodologia baseada na nova semântica do HTML5 que facilitou o processo de ajustes e correção de textos e imagens pela própria equipe de moderna.

Agradecemos a confiança de Fabio Flatschart e Cristiano Galan, parceiros nesse projeto.

Agência Brocco

Este é o site dos nossos amigos e parceiros da Agência Brocco!

Nele, customizamos o WordPress para  mostrar os cases e portfólio de forma dinâmica e otimizada, unindo  o design de primeira desenvolvido pela Brocco aos novos recursos de semântica do HTML5 e estilo CSS3.

Além disso integração com mídias sociais e jQuery para animações e interações.

IV Jornada de Anatomia – USP

Logo Jornada de Anatomia

IV Jornada de Anatomia

Site desenvolvido em uma semama, graças a combinação do design afinado da Brocco com WordPress e HTML5. Os novos formulários em HTML5 foram essenciais para que a validação dos dados fosse resolvida em prazo recorde.

Além disso, foi desenvolvido um sistema para atribuição de notas e ranking dos candidatos.

Soyuz e nata do desenvolvimento Web no Front In BH

FrontInBH

Em 13 de Agosto de 2011 acontecerá em Belo Horizonte o FrontInBH, um grande evento voltado para os desenvolvedores web interessados em qualidade, usabilidade e código bem feito. Será uma oportunidade sem comparação para troca de experiência com os profissionais que fazem a web acontecer de verdade no Brasil.

Nosso amigo Alysson Franklin vai estar lá, como não deixaria de ser, para falar das suas experiências de usabilidade, acessibilidade e interface de usuário. Sergio Nascimento, o @elvisdetona aqui da Soyuz, vai compartilhar experiências do desenvolvimento em HTML5 e CSS3.

Você não pode perder a oportunidade única para ouvir e trocar ideias com estes profissionais.

E Rafael Carvalho, @rafildis, vai entrar por conta da Soyuz no evento! Parabéns!

Soyuz no curso de HTML5 e CSS3 da W3C

W3C Escritório Brasil

W3C Escritório Brasil

É com muito orgulho que podemos dizer que a Soyuz é uma das únicas empresas de desenvolvimento Web no Brasil que tem três profissionais que participaram do curso de HTML5 do W3C. Clécio Bachini, Sergio Nascimento e agora, nossa líder de desenvolvimento e novo membro do clube, Silvia Rodrigues.

A seleção para o curso é muito rigorosa, o que nos faz valorizar ainda mais o feito.  Silvia vai nos ajudar ainda mais com seus novos conhecimentos de CSS3, exclusivos para quem participou desta última edição. Continue lendo