Hello Guys! Its friday, User Interface day on this blog, and today i will write about a really nice topic! Its Parallax Design.
Parallax design, what is? Where did? How it works?
The concept of design or Parallax Parallax scrolling is definitely another one of those trends in user interface design that emerge as something new and innovative but which is actually based on very old concepts adapted to current technology. In this case the concept dates back to the 40s when it began to be used in the production of animations like the example below:
Optical illusion
In case of Parallax on animation, everything is just a technique of optical illusion where layers of animation moves in different speeds which gives us an impression of depth in the animation.
This technique is widely deployed and used in the gaming market since the early 80s and in recently has come to internet interface design for which shows very interesting to well-defined objectives.
In the below video you can see some examples of the Parallax Scrolling technique applyed to NES games.
Nice Parallax Design examples
It is easy to find on the internet dozens of good examples of using the Parallax effect on the internet projects, but I will list below some that are worth exploring:
Bom dia pessoal, sexta feira, dia de falar de Usabilidade e Interface por aqui, mas antes de começarmos que tal você dar uma lida nos últimos posts sobre Media Queries e sobre Layout responsivo? Bom vamos ao assunto do dia…
Parallax design, o que é? De onde surgiu? Como funciona?
O conceito de Parallax design ou Parallax scrolling é sem dúvida mais uma daquelas tendências do design de interface que surgem como algo novo e inovador mas que na verdade é baseado em conceitos muito antigos adaptados a tecnologia atual. Neste caso o conceito data dos anos 40 quando começou a ser utilizado na produção de animações como o exemplo abaixo:
Ilusão de ótica
No caso do Parallax na animação tudo não passa de uma técnica de ilusão de ótica onde os layers/camadas da animação se dão em velocidades diferentes o que nos dá uma impressão de profundidade na animação.
Esta técnica é amplamente difundida e utilizada no mercado de games desde o início dos anos 80 e nos últimos anos chegou ao design de interfaces para internet onde apresenta resultados muito interessantes para objetivos bem definidos.
No vídeo abaixo você pode ver alguns exemplos da aplicação da técnica de Parallax Scrolling em games do NES
Bons exemplos do uso de Parallax Design na internet
É fácil encontrar na internet dezenas de bons exemplos da utilização do efeito Parallax na internet, mas vou listar abaixo alguns que valem a pena conhecer:
Calma “pequeno gafanhoto”, isso eu vou explicar nas próximas semanas, quando vou trazer aqui um tutorial sobre como implementar Parallax desgin na prática.
Por hoje ficamos por aqui, veja os vídeos abaixo sobre o Parallax Design e até a semana que vem.
Saiba porque você vai usar um MYO em breve, e sim ele vai acabar com o Kinect
Oi pessoal, quinta feira, dia de falar um pouco sobre curiosidades do mundo da tecnologia, na semana passada falei pra vocês um pouco sobre o Glonass, sistema de localização russo, se você não leu, leia que vale a pena.
Mas o assunto de hoje é o MYO, um projeto da empresa americana, de Waterloo, Thalmic Labs, esse por sinal é o primeiro produto da empresa, e na minha opinião deve revolucionar muitas soluções de tecnologia que conhecemos atualmente e acabar com o conceito criado pelo Kinect.
Mas afinal o que é o MYO?
MYO
MYO, é nome do projeto de uma pulseira, ok, esta mais para um bracelete, capaz de identificar seus movimentos através da variação muscular e desta forma permitir que você controle dispositivos apenas através de gestos. Bem no estilo Minority Report.
Vídeo do MYO
Mas o Kinect já não faz isso?
Não, o sistema da Microsoft utilizado na contrução do Kinect utiliza câmera e infravermelho, o que te obriga a ficar em frente ao aparelho para que a coisa funcione, ja no MYO isso não é necessário pois é o bracelete que identifica seus movimentos e pode por exemplo, apagar uma lâmpada quando você fechar a mão.
As possibilidade do MYO são quase infinitas…
Outro ponto muito interessante é que a Thalmic vai disponibilizar jundo ao produto uma API que permite que qualquer desenvolvedor possa utilizar o aparelho apenas como um dispositivo de entrada para os seus próprios aplicativos, o que aumenta e muito o alcance da solução.
O MYO ainda está em fase de testes porém já pode ser comprado em pré-venda no site do projeto, as primeiras unidades serão despachadas no final de 2013 e o preço é de apenas US$ 149 o que diga-se de passagem não é muito se compararmos aos US$ 1500 do Glass.
Veja abaixo alguns vídeos do MYO
É isso, eu não vejo a hora de poder criar utilizando o MYO e você o que acha da solução? Comente abaixo e até a próxima!
Saiba um pouco mais sobre o uso da Robótica na automação industrial
Bom pessoal continuando como prometido a série de posts (1) (2) sobre o tema Robótica quero falar pra vocês hoje sobre a utilização destas maquinas na automação industrial.
Exemplo de automação industrial
O que é a Automação Industrial?
A área de conhecimento que trata da aplicação de equipamentos e técnicas específicas em uma determinada máquina ou processo industrial com o objetivo de aumentar sua eficiência e/ou reduzir a interação humana no mesmo, automatizando as tarefas repetitivas.
O termo automação, do latim, Automatus, significa mover-se por si, e é utilizado nos processos industriais com o objetivo de atingir os mesmos objetivos com menor custo, mais segurança e ainda reduzir o esforço ou interferência humana sobre o processo ou a máquina.
Entre os equipamentos utilizados na área temos: computadores, controladores lógicos programáveis (CLP, CNC, SDCDs); robôs, manipuladores e atuadores. Estes equipamentos em alguns casos, substituem tarefas humanas ou realizam outras que o ser humano não consegue realizar.
A automação pode ser classificada em 3 tipos, como você pode ver abaixo:
Automação Fixa – É utilizada quando o volume de produção é muito alto, pois utiliza equipamentos projetados para produção de produtos com alta velocidade e baixo ou nenhum nível de customização reduzindo desta maneira o custo individual por produto produzido.
Este tipo de automação possui uma grande parcela de risco envolvida, pois se a demanda pelo produto não for a esperada corre-se o risco de toda uma linha de produção se torna inútil ou obsoleta uma vez que foi projetada sob medida para tal produto.
Automação Programável– É utilizada quando o volume de produção é relativamente pequeno, pois possui maior flexibilidade e pode se adaptar de certa forma a produção de diversos produtos diferentes e tem sua programação orientada a produção de lotes de um produto.
Automação Flexível – É usada quando o volume de produção é mediano. Utiliza uma série de estações de trabalho conectadas por equipamentos de manipulação de materiais. Um computador central roteia e controla a produção de diferentes produtos. Possibilita a produção de diferentes produtos ao mesmo tempo. Possui características da automação Fixa e Programável.
É isso pessoal, essa foi uma pequena introdução sobre o tema automação, caso vocês tenham curiosidade deem uma olhada nos vídeos do post que mostram alguns exemplos da automação e robótica em ação, até a próxima semana quando vou trazer para vocês mais detalhes sobre os robôs que compõem os processos de automação suas classificações e usos.
Fábrica da Coca Cola
Na quarta feira que vem vou continuar com esta série de posts sobre robótica e o seu uso em nosso dia a dia.
What about know more about the Opencart structure?
Hello everyone! Today i will talk a little about the Opencart structure. If you don’t know, Opencart is a simple and powerful e-commerce platform developed using php/mysql and you can download the software for free at this Link.
The Opencart structure
The system was developed according to the classical MVC paradigm, with a well separation between Models, Views and Controls. Other unity is the language models, responsible to make multi-lingual stores at the same administration and templates.
MVC Classical Paradigm
Opencart Urls
For understand Opencart or another system, is realy important understand how these urls was built, see this example:
This is the category page, where route indicates how controller was loaded, in this case the controller is category, located at product folder after that in path parameter is located the current category id.
Two different worlds
One of the worst things on the system is the full separation between the system front and system admin, both have their own MVC structure and because that we need to repeat a lot of code on the both sides… This is a really waste of energy.
Understanding the Opencart Sintax
See the example of controller about the above url
We have her the classical controller creation and the definition of the first method, called getCategory, after that the language module was loaded following the same approach (folder/file name) at the same style was loaded 2 models.
A bit more
In this case we have on first line the search of category details, by the getCategory call realized to the loaded model, as you can see the pattern was fixed on the model call like:
$this->model_folder_file->methodName(Parameters)
After that whe have some calls to template methods used to attribute values who will be used on the template files, all data to be used on the template need to be added to $this->data array.
Thats it people, see you on the next week talking more about the Opencart, sorry about the English mistakes 🙂
Que tal conhecer um pouco mais sobre a estrutura do Opencart?
Bom dia pessoal, nessa minha volta ao blog ainda estou definindo a agenda de posts e quais serão os temas de cada dia, hoje neste post sobre como funciona a estrutura do Opencart vou inaugurar uma série que pretendo fazer todas as terças falando sobre o desenvolvimento na prática (mãos a obra), sempre com exemplos práticos de código para implementações do dia a dia.
Algum tempo atrás já disse aqui por que virei fã do Opencart, e quase 2 anos após o meu start com a ferramenta quero poder passar para você um pouco que aprendi sobre ela.
O sistema foi criado utilizando a abordagem clássica do MVC com a separação bem definida de entre Models, Views e Controls além de uma outra unidade que é o Language, que como o nome auto-explicativo diz é responsável pelo sistema de tradução do Opencart.
As urls do Opencart
Para entendermos o Opencart, como qualquer ferramenta parte fundamental se dá ao entender como suas urls são construídas, veja o exemplo abaixo:
Trata-se da página de exibição de categorias, onde a rota nos indica qual controller esta sendo carregado, neste caso o controller category que é armazenado na pasta product e o parametro path contém o id da categoria que esta sendo visualizada.
Dois mundos distintos
Um dos conceitos mais controversos da plataforma é a separação quase que total entre o admin e o front do sistema ambos tem sua própria estrutura MVC nas pastas Admin e Catalog respectivamente qual praticamente nenhum aproveitamento de código entre as estruturas, ou seja temos um método para buscar detalhes do produto em cada uma das estruturas por exemplo, um belo desperdício de energia…
Entendendo o código do Opencart
Veja o exemplo abaixo retirado do controller existente no exemplo de url que foi colocado acima.
Exemplo de controller do Opencart
Temos aqui a criação do controler de categorias e a criação de seu primeiro método, após essa etapa são carregados os arquivos de linguagem seguindo a mesma abordagem de pasta/nome do arquivo assim comosão carregadas 3 models em sequência que sernao utilizadas durante o método.
Veja mais um exemplo de trecho mesmo arquivo:
Exemplo de código Opencart
Aqui temos na primeira linha a busca sobre os detalhes da categoria, através da chamada getCategory realizada para a model de foi carregada no trecho anterior, e você pode perceber o padrão de chamada das models que sempre será: $this->model_pasta_arquivo->nomeDoMetodo(parametros)
Na sequência temos as chamadas de métodos do template para atribuição de valores como titulo e descrição da página, nas próximas linhas temos a atribuição ao array data, este por sua vez é responsável por armazenar os dados que estarão disponíveis no template sob esses mesmos nomes.
É isso pessoal espero que essa pequena introdução possa facilitar o seu entendimento sobre a plataforma Opencart, na terça que vem seguindo a série sobre o desenvolvimento com a mão na massa vou continuar detalhando o funcionamento do Opencart desta vez falando um pouco sobre a estrutura de dados da ferramenta, quer aproveitar e ler um pouco sobre usabilidade? Começe por aqui
Lembrando que para estes posts estão utilizando a versão 1.5.1 da ferramenta.
Dúvidas? Sugestões? Fique a vontade para comentar, até a próxima.
Starting a week with a simple development productivity tips!
Hi everyone! This is my first post in English in this blog, and i’m so excited to start a share some tips with your, now in the most used language on the word. To start 3 simple tips to improve development productivity
In advance, sorry for the mistakes… I will be better in next weeks 🙂
Basecamp
Basecamp – Dicas de produtividade
Manage your projects like a betters world professionals, if you not know Basecamp yet, this toll was developed by the 37 Signals and was built to modern teams and projects local or remote.
Th interface is simple and looks like an social network, the tool is fully integrated with social networks, e-mail and iCal calendars, moreover the cost is very low and because that all kind of companies and freelancers can use this tool.
Recently was launched the iOs app for Basecamp, that allows you to manage your projects anywhere, anytime on your mobile.
For me, and after 10 years working with a lot of development tools, this is the best code editor i really know, mostly if you spend a little time to learn how to create code snippets and install de package manager to activate the Zencodemodule, this is simple incredible.
The software isn’t free, but the multiple cursor tool already make the investment be worth it, certainly in a few days i will make a full post for this tool.
For now watch this video and see why this tools is so incredible.
TextExpander
Finally, other incredible tool, whit that you can create shortcuts to excerpts of text, in my case i use to expand e Lorem ipsum , addresses, phones, signatures, and all texts i often type a lot.
Watch a little review:
Thats it, i use a lot of tools everyday but this 3 deserve mention on this first post, because that improved a lot my productivity.
Oi pessoal tudo bom? Para iniciar a semana resolvi listar aqui 3 Dicas de produtividade para quem quer trabalhar com tecnologia, são apps e técnicas que utilizo no meu dia a dia de desenvolvimento web e que podem com certeza aumentar e muito a sua produtividade, vamos a elas.
Basecamp
Gerencie seus projetos como os melhores profissionais do mundo, caso você ainda não conheça o Basecamp, 3ssa ferramenta foi criada pela premiada 37 Signals e foi construida sob medida para as equipes de projetos dos dias de hoje.
A interface é simples e objetiva lembrando muito o conceito de rede social e com integração total com redes sociais, além disso o custo é muito baixo o que permite o seu uso ir desde freelancer até grandes corporações.
Recentemente foi lançado o aplicativo para iOs do Basecamp que permite o acompanhamento móvel do projeto diretamente do celular.
Você ainda pode testar grátis, acesse: basecamp.com
SublimeText
Na minha opinião e após mais de 10 anos de trabalho com dezenas de ferramentas, é sim, a melhor ferramenta de edição de código que conheço, principalmente, se você investir um pouco de tempo para aprender a criar Snippets de código, instalar o plugin de gerenciamento de pacotes e criação automatizada de html Zencode.
O software não é gratis mas a ferrmaenta de multiplos cursores já fazem o investimento valer a pena, com certeza nos próximos dias vou trazer um post dedicado apenas a essa ferramenta.
TextExpander
Outra ferramenta imprescindível, com ela você pode criar atalhos para trechos de texto, que podem ir, (no meu caso) de geradores de Lorem ipsum a endereços, telefones, assinaturas e tudo mais que você digita muitas vezes no dia.
Essas são apenas 3 das quase 10 ferramentas que utilizo e que facilitam muito o meu dia a dia, nos próximos dias vou trazer aqui uma série especial onde vou explicar cada uma delas e o porque elas são tão especiais e aumentar e muito nossa produtividade.
Como essas pequenas técnicas de Media Queries podem e vão tornar o seu CSS muito melhor
E ai pessoal tudo bom? Voltando ao assunto da semana passada onde falei um pouco sobre design responsivo hoje vou me aprofundar um pouco mais técnicamente no assunto e falar sobre Media Queries, e como essa arma pode te ajudar a sobreviver a selva de dispositivos, navegadores e resoluções que enfrentamos todos os dias… vamos lá?
Como sobreviver ao cenário que se torna cada vez mais complexo? Media Queries, podem ajudar!
O que são Media Queries?
Basicamente, se você se interessou em ler este post deve ter claro em sua cabeça o que são Queries, as consultas, que escrevemos normalmente para buscar em sistemas de bancos de dados.
Porém, neste no contexto de Css as queries são condições que devem ser respeitadas para que um determinado bloco de CSS seja aplicado pelo navegador, tais queries são executada também para definir a media (dispositivo) que o usuário esta utilizando no acesso dentre as opções de media, temos:
all [Todo os dispositivos]
braille [Para dispositivos táteis.]
embossed [Para dispositivos que “imprimem” em braille.]
handheld [Para dispositivos de mão. ]
print [Para impressão em papel.]
projection [Para apresentações, como PowerPoint.]
screen [Para monitores ou outros dispositivos com telas coloridas e com resolução adequada.]
speech [Para sintetizadores de voz. ]
tv [Para televisores.]
O seu site tem que funcionar em todos os lugares, quem sabe com media queries
E o css que sera carregado de acordo com a media é definido conforme exemplo abaixo:
Parte do problema esta resolvido, porém, e sempre tem um porém, dentro de cada classe de media temos aparelhos dos mais diversos, afinal um iPhone é um handheld (conceitualmente), mas renderiza as páginas de forma praticamente igual ao desktop e assim por diante
Desta forma as media queries surgem para flexibilizar um pouco mais essa dura escolha de “qual css renderizar”.
E como funcionam as media queries?
Basicamente apesar do nome queries a estrutura é bem diferente do SQL que você pode estar imaginando. As média queries trabalham basicamente com: Operadores lógicos e features (atributos), e a composição destes elementos irá permitir a você, desenvolvedor sofrido :), carregar um css de acordo com o dispositivo e manter o seu cliente feliz.
Veja alguns exemplos de media queries:
#apenas monitores e coloridos
<link rel=”stylesheet” href=”estilo.css” media=”screen and (color)” />
#monitores coloridos e projecoes coloridas
<link rel=”stylesheet” href=”estilo.css” media=”screen and (color), projection and (color)” />
Outra forma de uso
#apenas monitores com tamanho máximo de 768px de largura
@media screen and (max-width: 768px) {
…
}/*/mediaquery*/
Veja a lista de operadores e features disponíveis:
É isso pessoal, o conteúdo foi técnico porém prático, espero que essas idéias possam facilitar sua vida nos próximos projetos. Sexta que vem tem mais sobre o assunto!
Pouco conhecido o Glonass pode melhoras os resultados das aplicações de localização via satélite
Pouca gente conhece ou já ouviu falar sobre o Glonass, e confesso que até a semana passada não sabia de sua existência. A todo momento utilizamos a tecnologia GPS, criada pelos E.U.A em 1972 que basicamente funciona com base em uma rede de satélites que inicialmente foi construída para o uso militar e posteriormente foi disponibilizada para o uso civil.
Entretanto o sistema GPS não é o único sistema de localização em funcionamento atualmente, a segunda opção é exatamento o Glonass, sistema de localização desenvolvimento e mantido pela Russia desde 1976, claro, também criado com fins militares e depois disponibilizado ao público.
Esse sistema passou diversos anos sem receber muita importância do governo Russo, porém o cenário mudou e o sistema foi melhorado em sua última versão o Glonass-K, a vantagem do sistema é ser gratuíto e com resolução máxima, o que não é oferecido pelo sistema americano.
Satélite Glonass K
Mas e como usar o Glonass?
Bom, devido a uma jogada russa, os smartphones que possuirem o sistema nativamente receberão benefícios fiscais na terra da Vodka, dessa forma muito aparelhos, como o iPhone 5, já trazem a tecnologia embutida e com alternancia automática entre as redes, o que aumenta e muito a cobertura do sinal e precisão do mesmo.
Ou seja você vai ser beneficiado utilizado dois sistemas simultaneamente e que inicialmente foram criados como competidores.
Veja na figura abaixo a cobertura das duas redes de forma simultânea, e como o uso complementar das redes pode melhorar os resultados de localização.
Gps + Glonass
Vejo o vídeo abaixo com um pouco mais sobre o sistema integrado nos celulares e devices Qualcom equipados com Snapdragon e como os sistemas funcionam de forma complementar.
Além desses dois sistemas existem mais dois em desenvolvimento, um pela União Européia e outro pela China, que se forem integrados aos sistema elevarão a capacidade de localização a centímetros.
