Postagens

Mostrando postagens com o rótulo JQuery

Livro 'Build Mobile' é uma boa dica para iniciantes em aplicações Web Mobile.

Imagem
Atualmente, para os desenvolvedores que trabalham como Web, é inevitável estar a par do mundo Mobile e até mesmo ter que desenvolver para ele. Apesar de alguns autores afirmarem que 'só existe uma Web' e que não devemos separar o que é Mobile do que não o é, a realidade é outra. Mesmo para profissionais experientes que trabalham com Web há anos adaptar-se ao mundo Mobile é bem complicado pois exige, além de conhecimentos específicos, ter que lidar com centenas de diferentes tipos de aparelhos, formatos e configurações, além de sérias limitações de banda e capacidade. Neste contexto é difícil encontrar material que mostre de 'cabo a rabo' como implementar sites e aplicações para Mobile. Assim o livro 'Build Mobile' da Sitepoint é um achado pois, assim como o livro ' PHP Master ', da mesma editora, sua leitura é agradável além de trazer um passo a passo para desenvolver ou adaptar sites e aplicações. Além disso ele traz dicas para enfrentar os p...

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> ...

jQuery - removendo opções de uma lista drop down

Uma dica rápida de Jquery. Para eliminar uma linha de uma lista select: $("option[value='2']").remove(); onde value está relacionado a 'value' do markup: <select name="lista" size="10"> <option value="0">Rio de Janeiro</option> <option value="1">São Paulo</option> <option value="2">Salvador</option> </select> ou se existirem outros níveis de selecionadores: $("#identificador option[value='2']").remove(); Abraço

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 ...

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...

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....

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...

Linux/Apache - Reescrevendo URLs no padrão wordpress ou extensão html com .htaccess e php.

Está ai algo bem interessante e que eu passei certo tempo pesquisando. Para quem não pretende utilizar frameworks, como wordpress por exemplo, para criar web sites mas gosta bastante do modelo de url que estas ferramentas disponibilizam esta dica é bem interessante. Esta técnica também permite criar diretórios lógicos, ou seja, ao invés de criar pastas para colocar seus arquivos esta técnica permite que os diretórios sejam interpretados como parâmetros. Para isto utilizamos um arquivo chamado .htaccess do Apache. O .htaccess nada mais é do que um arquivo colocado em qualquer pasta do seu servidor Apache que serve para modificar as regras padrão de busca e interpretação de arquivos, ou seja, podemos mudar o comportamento de como o Apache faz a busca quando digitamos um endereço no browser. Hoje vou apresentar um exemplo muito simples mas extremamente útil e que eu mesmo utilizo em meus projetos. Este truque me ajudou a manter a antiga estrutura que eu utilizava, sem a necess...