Postagens

Mostrando postagens com o rótulo Google

Porque o mobile é prioridade

Imagem
A explosão do mobile no mundo e, mais especificamente no Brasil, é algo assustador. O infográfico abaixo mostra como esta tendencia vem  forte e promete continuar. Não tem mais jeito! É obrigatório pensar em mobile em qualquer projeto, seja este novo ou já implantado. Talvez mais do que pensar no usuário ou analisar tendências a urgência em adotar o desenvolvimento para mobile veio com força total após o anúncio da Google em Abril de 2015 de que os sites com suporte para mobile ganhariam destaque nas buscas. Porém, além da decisão de adotá-lo, temos de encarar o fato de que o mundo mobile tem inúmeros desafios mesmo para aqueles que já trabalham com Web para desktop (apesar da Internet na verdade ser única, seja no celular, tablet, notebook ou desktop). AS DIFICULDADES Se você é do tempo em que o padrão era o IE6 sabe como era terrível trabalhar com um navegador que não seguia os padrões w3c, aliás, um navegador que adotava os padrões que queria e dane-se o resto...
Postar um comentário
Leia mais

Angular.js - Montando listas ou tabelas usando loops com ng-repeat

Imagem
No artigo anterior vimos como trabalhar com estilos CSS e classes além de conhecer algumas novas diretivas e como elas são uma espécie de atalho para os desenvolvedores . Hoje vamos avançar um pouco mais e trazer um assunto bem útil, que é a criação de listas e tabelas dinamicamente, através de loops. É comum as listas ou tabelas serem criadas do lado servidor, fazendo-se loops dos dados vindos de um banco de dados ou array mas fazer esta mesma ação do lado cliente é menos comum. Como a ideia do Algular.js é trabalhar dados fornecidos no formato Json, devemos ter em mente que criar uma lista ou tabela pode ser feita sim do lado cliente de maneira fácil e, além disto, contribuir para a prática da programação baseada em MVC, ou seja, que separa as camadas de layout das demais. Além disto vamos aproveitar a oportunidade e tratar também de uma outra maneira de aplicar as técnicas de estilos CSS. O exemplo abaixo será nossa base de estudos neste artigo. <html ng-app> ...
Postar um comentário
Leia mais

Angular.js - Trabalhando com classes e estilos CSS de modo mais limpo

Imagem
O Angular traz modos interessantes de se trabalhar com estilos CSS, tornando mais automatizadas e limpas certas operações e interação cliente/aplicação. Vamos aproveitar para ver um pouco sobre diretivas do Angular também. As diretivas são propriedades inseridas nas Tags que nos ajudam a trabalhar com as interações do usuário. O Angular.js possui inúmeras diretivas que substituem a prática muito utilizada no Jquery de atribuir eventos a classes ou ids. Se no Jquery precisávamos ligar um evento a uma classe ou id e depois ligar estes a uma função para executar a operação desejada, no Angular.js isto é feito diretamente, atribuindo-se a função diretamente a um evento dentro da Tag desejada, sem a necessidade de utilizar outros tipos de truque. O exemplo abaixo considera dois diferentes modos de se trabalhar com classes e estilos. <html ng-app> <head> <title>Classes</title> <style> .menu-true { color: green; } .outro-estilo ...
Postar um comentário
Leia mais

Angular.js - Duas formas diferentes de imprimir valores

Imagem
Uma dica rápida sobre Angular são as formas de se imprimir valores no HTML de sua aplicação. A maneira mais "visual" é utilizando chaves duplas {{}}. O que for inserido dentro destas chaves duplas será considerado como uma variável e seu conteúdo, se este existir, será impresso. <html ng-app> <head> <title>Dois tipos de input</title> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script> </head> <body ng-controller='TextController'> <h1>Exemplo</h1> <div> <p>{{content}}</p> </div> <script> function TextController($scope) { $scope.content = "Com chaves"; } </script> </body> </html> No exemplo acima {{content}} é uma variável. A função  TextController() seta o valor de content para  "Com chaves". Temos como saída: Exemplo Com ch...
2 comentários
Leia mais

Uma introdução ao Angular.js

Imagem
Pesquisando sobre novas tecnologias me deparei com o Angular JS , um projeto suportado pelo Google. A ideia do Angular JS é oferecer uma alternativa ao Jquery, Ember e outros frameworks. Esta pesquisa me levou também a muitos caminhos sem saída e desinformação. Para evitar que os leitores do blog também fiquem confusos resolvi fazer um post explicando o básico para iniciar no Angular JS. Bom, em primeiro lugar você não precisa de nenhuma configuração ou instalação no servidor. Trabalhar com Angular JS depende apenas da carga de um arquivo .js, que pode ser (aliás é recomendado) linkado diretamente do Google. É basicamente o mesmo procedimento que você faria para carregar a biblioteca do Jquery O serviço está disponível em: http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js Vamos a um exemplo bem básico, o cálculo de uma soma com Angular JS. Chamaremos este arquivo de angular.html: <html> <head> <script src="http://ajax.googleapis....
Postar um comentário
Leia mais

JQuery - Utilizando Ajax - Entendendo o modo Assíncrono e Síncrono

As palavras síncrono e assíncrono podem soar estranhas quando aplicados ao mundo da TI. Serão mais dois dentre os tantos termos inventados por 'gurus' da web para vender livros? É bem provável que, sim, que a adoção destes termos tenha sido feita por escritores ou editoras da área porém acredito que estas palavras são bem interessantes para descrever a real funcionalidade de tais sistemas. Utilizamos muito estes conceitos no javascript (como você já deve saber), mais especificamente na utilização do chamado Ajax (outro termo de gurus ?) . Vamos tratar do assunto utilizando o serviço do Google Maps como exemplo, mais especificamente o serviço de busca de endereços. Este serviço pode ser acessado utilizando-se a seguinte URL: http://maps.googleapis.com/maps/api/geocode/json?address=endereco&sensor=false Além disto vamos utilizar jQuery para fazer as requisições ajax e manitulação do DOM Recomento fortemente a utilização Google Chrome (Firefox...
Postar um comentário
Leia mais