blog reactions
Postado em: 11 de março de 2008 por Pedro Rogério
AxsJax é o novo companheiro dos desenvolvedores no mundo do Ajax. Se trata de um Framework que permite adicionar acessibilidade aos projetos web que fazem o uso de Ajax. Assim, usuários que fazem o uso de tecnologias assistivas ou similares podem desfrutar de todas as características das aplicações.
Exemplos de aplicações que fazem o uso de AxsJax: Google Web Search, Google Reader, Google Scholar e o jogo Jawbreaker. Detalhes sobre o uso e implementação, você pode encontrar em seu showcase.
Referências
blog reactions
Postado em: 21 de novembro de 2007 por Pedro Rogério
Hijax é uma nova estratégia para o uso de Ajax que tem como objetivo tornar as páginas web acessíveis, que as páginas web sejam totalmente funcionais para aqueles que não podem fazer o uso de Ajax (por que querem ou não possuem suporte a JavaScript).
Essa técnica se baseia nos termos: progressive enhancement e graceful degradation, duas estratégias que permitem que um sistema informaizado (no nosso caso, uma página web), funcione corretamente caso ocorra a falta de algum componente.
Progressive enhancement parte de uma versão básica totalmente operativa (parte-se de uma página web que faz o menor uso de tecnologias complementares como CSS e JavaScript, tornando-se assim compatível com a maioria dos browsers), já com Graceful degradation se parte do extremo contrário, desenvolvendo para navegadores mais novos, com a possibilidade de que funcione em navegadores antigos.
No caso de Hijax, a estratégia que se emprega para desenvolver com Progressive enhancement é a seguinte:
- Primeiro desenvolva o site ao “estilo antigo”, com links e ações de formulários que enviam informações ao servidor e devolvem uma página completa para cada requisição.
- Empregar JavaScript para capturar todos os links e ações dos formulários para enviar a informação mediante XMLHttpRequest. Dessa forma pode-se selecionar quais partes da página devem se atualizar de forma individual, ao invés de recarregar a página toda.
Referências
blog reactions
Postado em: 6 de novembro de 2007 por Pedro Rogério
Quirksmode vs. StrictMode
Primeiramente, vamos entender rapidamente o que significa o modo Quirksmode e o modo StrictMode: Para que nosso código escrito de acordo com a documentação do W3C, funcione adequadamente, os browsers devem interpretá-lo como diz o W3C, e para isso você deve fazer com que os browsers funcionem em modo Strict.
Para isso, basta você escrever um doctype válido, como esse (junto ao início do documento, antes de qualquer coisa):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=” http://www.w3.org/1999/xhtml” lang=”pt-br” xml:lang=”pt-br”>
Dessa maneira o browser assumirá que deve interpretar o código de acordo com as regras do W3C, assegurando-se (dentro do possível), que tudo funcione e acordo com a documentação. Por outro lado, não desenvolvendo dentro dos padrões, o browser assumirá que seu código é da época de antes dos padrões web, e por isso colocará o site em QuirksMode(modo raro), que é mais ou menos a mesma forma de que o Internet Explorer 4 interpretaria sua página, deixando inuilizado tudo aquilo que você aprendeu de acordo com o W3C.
Com base nisso, abaixo você verá uma série de limitações em Ajax sob o modo QuirksMode:
Browser básico em QuirksMode e suas limitações
- XMLHttpRequest não permite acessar servidores remotos.
- Múltiplas requisições Ajax não se executam em ordem.
- As respostas asíncronas XMLHTTP não são recebidas em ordem.
- XMLHTTPRequest não requer que se use XML.
- Ajax usa UTF-8.
- Requisições Ajax são url encodadas.
- XMLHTTPRequest não permite enviar arquivos.
Firefox em Quirksmode
- Pedidos XMLHTTP asíncronos estão protegidos.
IE em Quirksmode
- XMLHTTPRequest não se pode reusar.
- IE não usa imagens cacheadas quando Javascript insere HTML com imagens.
- As referências circulares fazem com que a memória do IE se corrompa.
- Evita o cacheamento agressivo no IE.
- IE corrompe os arquivos javascript comprimidos com gzip.
- Não são cacheados arquivos javascript comprimidos com gzip.
Você pode obter mais informações visitando o Wiki criado pelo site Swik.net.
Adaptação do aritigo de: Anieto2K.
blog reactions
Postado em: 29 de outubro de 2007 por Pedro Rogério
Abaixo vocês irão ver uma série de conselhos para evitar cometer erros ao desenvolver sites com ajax:
- Ajax é uma ferramenta, e não um brinquedo: Muitas vezes os desenvolvedores fazem o uso desnecessário de Ajax, onde um simples HTML resolveria tudo.
- Comece bem com o botão voltar do navegador: Este botão é necessário para a Usabilidade, e o JavaScript não se dá muito bem com ele.
- Não avisar ao usuário que ocorreu uma ação: Quando o usuário clica em uma área da página e ocorre uma ação, isso deveria ser avisado a ele para que saiba que os dados estão sendo atualizados.
- Deixar os usuários off-line de lado: A cada dia existem mais e mais usuários com acesso a internet, e nem por isso iremos desenvolver sites para usuários que fazem uso dela, devemos também pensar em usuários que fazem uso de conteúdo off-line, pois com Ajax, o conteúdo é carregado de forma dinâmica, e não teria o mesmo efeito com que navega off-line.
- Deixar o usuário esperando: o ‘A’ de Ajax significa assíncrono, não é necessário que o usuário faça algo para obter dados, nós podemos adiantar sua ações e realizar requisições para obter dados e com isso o usuário não tem que ficar aguardando a resposta.
- Enviar informações simples de forma visível: Em muitas ocasiões enviamos ao navegador os mesmos dados que foram recebidos pela aplicação, a diferença é que a aplicação filtra os dados e nos mostra o que convém. No navegador, embora nem todos mostrem, caso seja apresentado será mostrado.
- Assumir que Ajax é uma plataforma única: Você deve testar suas aplicações Ajax em distintas plataforma que permitem isso, ou seja, em diversos browsers.
- Múltiplos usuários: Se sua aplicação é utilizada por múltiplos usuários, tome cuidado pois podem haver problemas de um vizualizar dados por parte dos outros.
- Excessivo trabalho para o navegador: As vezes o uso excessivo de aplicações Ajax faz com que o browser tenha que executar muitas tarefas, e isso pode não ser bom para o rendimento de uma aplicação.
- Esquecer daqueles que navegam com JavaScript desabilitado: Segundo as estatísticas, 11% dos usuários de Internet navegam com JavaScript desabilitado, por isso é bom pensar em uma alternativa ao Ajax.
- Não utilizar links: Ao carregar conteúdo dinâmico, não esquecer de mostrar os links que levam a esse conteúdo.
- Sair do comum em relação a Usabilidade: Ao permitirmos realizar ações pouco habituais, nos encontramos com a circunstância de que esperamos que o usuário realize uma ação que ele não esperava ser feita. As pessoas estão acostumadas a realizar sempre as mesmas ações.
- Não realizar alterações em cascata: Não devemos esquecer de que quando alteramos parte do conteúdo da página, devemos alterar também partes relacionadas.
Fonte: Sentido Web.
blog reactions
Postado em: 4 de outubro de 2007 por Pedro Rogério
Adaptação do artigo original de: Anieto2K
Se a cada dia você fica perdido com cada palavra nova que aparece na internet, com esse guia, não vai acontecer mais esse tipo de coisa, agora você vai entender perfeitamente a língua dos geeks:
Linguagens de marcação e apresentação
- CSS: Cascading Style Sheets - CSS é uma linguagem utilizada para modificar o aspecto das estruturas HTML.
- DHTML: Dynamic HyperText Markup Language - É um termo utilizado para referir-se a junção de HTML + CSS + JavaScript.
- HTML: HyperText Markup Language - É uma linguagem de marcação de tags que compõem todas as páginas web.
- WML: Wireless Markup Language - WML é similar ao HTML, é baseado em XML e é orientado a dispositivos móveis.
- XHTML: Extensible HyperText Markup Language - XHTML é um HTML ao qual se aplicam as regras do XML.
- XML: Extensible Markup Language - XML é uma recomendação do W3C para gerar dados de uma forma melhor estruturada.
Linguagens de programação
- ASP (Microsoft): Active Server Pages - ASP é uma linguagem de programação em Script que se utiliza de VBScript, JScript, PerlScript ou Python processadas pelo servidor para gerar conteúdo dinâmico na web.
- CGI: Common Gateway Interface - É um protocolo que permite que aplicações do servidor interajam com os navegadores.
- JSP: JavaServer Pages - É uma linguagem de programação baseada em Java e é executada no lado servidor. Esta tecnologia permite ao desenvolvedor produzir aplicações que, acessam o banco de dados, manipulam arquivos no formato texto, capturam informações a partir de formulários e captam informações sobre o visitante e sobre o servidor.
- PHP: PHP Hypertext Preprocessor/Personal Home Page - É uma linguagem de programação de computadores interpretada, livre e muito utilizada para gerar conteúdo dinâmico na Web, como por exemplo fóruns. Apesar de ser uma linguagem de fácil aprendizagem e de utilização para pequenos scripts dinâmicos simples, o PHP é uma linguagem poderosa orientada a objetos.
- RoR: Ruby on Rails - Ruby On Rails é um framework de código aberto para desenvolvimento de aplicações Web, escrito em Ruby.
- SSI: Server Side Includes - É uma linguagem de programação que permite incluir conteúdo de um arquivo em outro.
Web Services
- ASP: Application Service Provider - É a denominação dadas às empresas que disponibilizam serviços ou aplicações informáticas com base na web.
- AWS: Amazon Web Services - É uma coleção de aplicações remotas oferecida pela Amazon.com
- RSS: Really Simple Syndication - RSS é uma especificação XML que permite ao usuário acompanhar o conteúdo de um site através de programas, muito utilizado hoje em blogs, sites de notícias e fóruns.
- S3: Amazon Simple Storage Service - É uma solução de armazenagem de dados de forma infinita na web.
- YUI: Yahoo! User Interface - É uma biblioteca Open-Source em Javascript.
Base de Dados
- CRUD: Create, Read, Update and Delete - CRUD são as 4 funções básicas de um sistema de base de dados.
- DBMS: Database Management System - Um DB é uma coleção de dados estruturada de forma organizada.
- SQL: Structured Query Language - É uma linguagem de consulta a base de dados relacional. A linguagem SQL é um grande padrão de banco de dados. Isto decorre da sua simplicidade e facilidade de uso. Ela se diferencia de outras linguagens de consulta a banco de dados no sentido em que uma consulta SQL especifica a forma do resultado e não o caminho para chegar a ele.
Servidores e Hosting
- CRON: Command Run ON - É um programa que executa comandos agendados nos sistemas operacionais do tipo Unix (como o Linux ou o Minix, por exemplo). O cron se encarregará de verificar a hora e determinar se existe ou não algum programa a ser rodado. Caso exista ele o rodará na hora e data solicitada.
- IIS: Internet Information Services - É um servidor web criado pela Microsoft para seus sistemas operacionais para servidores. Sua primeira versão foi introduzida com o Windows NT Server versão 4
- VPS: Virtual Private Server - É um servidor em ambiente compartilhado que possui acesso root (administrador) e processos independentes para cada conta VPS criada.
Protocolos
- FTP: File Transfer Protocol - É uma forma bastante rápida e versátil de transferir arquivos (também conhecidos como ficheiros), sendo uma das mais usadas na internet.
- HTTP: HyperText Transfer Protocol - É um protocolo de Aplicação do modelo OSI utilizado para transferência de dados na rede mundial de computadores. Também transfere dados de hiper-mídia (imagens, sons e textos).
- HTTPS: Secure HypterText Transfer Protocol - É uma implementação do protocolo HTTP sobre uma camada SSL ou do TLS. Essa camada adicional permite que os dados sejam transmitidos através de uma conexão criptografada.
- SSH: Secure Shell - São protocolos criptográficos que provêem comunicação segura na Internet para serviços como email (SMTP), navegação por páginas (HTTP) e outros tipos de transferência de dados.
- WAP: Wireless Application Protocol - É um padrão internacional para aplicações que utilizam comunicações sem fio.
Padrões e Acessibilidade
- 508: Section 508 - Seção 508 é uma série de padrões a nível tecnológico sobre acessibilidade.
- W3C: World Wide Web Consortium - É um órgão internacional que rege as normas de desnvolvimento web.
- WAI: Web Accessibility Initiative - É uma iniciativa do W3C para que as páginas web tenham a capacidade de serem disfrutadas por pessoas com algum tipo de deficiência.
- WCAG: Web Content Accessibility Guidelines - São uma série de regras sobre acessibilidade publicadas pela WAI.
Linguagens Cliente
- AJAX: Asynchronous JavaScript And XML - É o uso sistemático de tecnologias providas por navegadores, como Javascript e XML, para tornar páginas mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações. AJAX não é uma tecnologia, são realmente várias tecnologias trabalhando juntas, cada uma fazendo sua parte, oferecendo novas funcionalidades.
- DOM: Document Object Model - É uma especificação do W3C, independente de plataforma e linguagem, onde pode-se alterar e editar a estrutura de um documento. A API DOM oferece uma maneira padrão de se acessar os elementos de um documento, além de se poder trabalhar com cada um desses elementos separadamente, e por esses motivos criar páginas altamente dinâmicas.
- JS/ECMAScript: JavaScript - É uma linguagem de programação baseada no navegador, que foi inicialmente criada para atender, principalmente, as necessidades de validação de formulários no lado cliente e interação com a página.
Desenvolvimento
- CRAP: Contrast, Repetition, Alignment, Proximity - É uma metodologia de desenvolvimento aplicada as estruturas das páginas web.
- CVS: Concurrent Versions System - É um sistema de controle de versão para compartilhar código com outros desenvolvedores em projetos colaborativos.
- GUI: Graphical User Interface - É uma interface gráfica que permite ao usuário interagir com o computador de uma forma amigável.
- SVN: Subversion - Uma outra ferramenta para controle de versão.
- WYSIWYG: What You See Is What You Get - Significa a capacidade de um programa de computador de permitir que um documento, enquanto manipulado na tela, tenha a mesma aparência de sua utilização, usualmente sendo considerada final a forma impressa.
Gráficos e Imagens
- CMYK: Cyan Magenta Yellow Key - CMYK é um modelo de cores baseado nos diferentes níveis do Ciano, Magenta e Amarelo.
- FLA: Flash Authoring File - São arquivos de saída do Flash
- GIF: Graphics Interchange Format - É um formato de imagem de mapa de bits muito usado na web, quer para imagens fixas, quer para animações.
- JPEG: Joint Photographic Experts Group - Trata-se de um formato de compressão, com perda de dados, aplicado em imagens fotográficas. A perda de dados é proporcional ao fator de compressão desejado. As extensões de arquivos para este formato são .jpeg , .jfif , .jpe e .jpg , este último, o mais comum.
- PNG: Portable Network Graphics - É um formato de dados utilizado para imagens, que surgiu em 1996 como substituto para o formato GIF, devido ao facto de este último incluir algoritmos patenteados.
- PSD: PhotoShop Document - São os arquivos com o qual trabalha o Photoshop.
- RGB: Red Green Blue - É um modelo de cores baseado nos diferentes níveis de Vermelho, Verde e Azul.
- SVG: Scalable Vector Graphics - SVG é um sistema XML para escrever gráficos vetoriais de 2 dimensões.
- SWF: Small Web Format/ShockWave Flash - É um formato de gráficos usado para criar animações.
E-Commerce
- AVS: Address Verification System - Ponto de referência adicional para autenticar o usuário do cartão, utilizado em geral por vendas via telemarketing / e-commerce.
- CSC/CVV: Card Security Code/Card Verification Value - É uma ferramenta de segurança que proporciona uma maior segurança contra fraudes. Sâo aqueles 3 últimos números presentes nos cartões de crédito.
- MID: Merchant ID - Um MID é um identificador único ligado as companhias.
- FAQ: Frequently Asked Questions - É uma lista de perguntas e respostas mais comuns de uma aplicação.
Otimização para motores de busca
- CPC: Cost Per Click - CPC é o valor que pagam para cada vez que um usuário faz um clique.
- CPM: Cost Per 1000 Impressions - É o valor que se paga a cada 1000 impressões.
- CTR: Click Through Rate/Ratio - É a quantidade de usuários que fazem cliques frente uma quantidade de impressões de página.
- PPC: Pay Per Click - É um modelo muito usado na internet onde você paga após os usuários efetuarem clicks.
- PR: PageRank - É um algotítimo usado para medir a popularidade de um site.
- SEO: Search Engine Optimization - É o procedimento de otimização das aplicações web para obter melhores resultados nas buscas.
- SERP: Search Engine Results Page - É uma lista de páginas devolvidas pelo buscador com base na busca realizada pelo usuário.
Segurança
- XSS: Cross-Site Scripting - XSS é uma vulnerabilidade de segurança onde o atacante pode executar código malicioso.
- CSRF: Cross-Site Request Forgery - CSRF é uma vulnerabilidade de segurança onde o atacante implanta código malicioso em uma página e esta permite realizar suas funções.
Destinos
- CNAME: Canonical Name - Um CNAME é um alias do hostname.
- DNS: Domain Name System - São como uma lista telefônica da internet. Eles dão a direção de uma máquina associada a um domínio.
- DTD: Document Type Definition - Contém as regras que definem quais as tags que podem ser usadas em um documento XML e quais os valores válidos.
- ICANN: Internet Corporation for Assigned Names and Numbers - O ICANN é uma entidade sem fins lucrativos, multilateral, que organiza a concessão de domínios e de endereços IP no mundo.
- IP: Internet Protocol - É um protocolo usado entre duas máquinas em rede para encaminhamento dos dados.
- SLD: Second-Level Domain - SLD é um domínio debaixo das TLD’s
- TLD: Top-Level Domain - É a última parte do nome de um domínio, por exemplo: .com, .br.
- URL: Uniform Resource Locator - É o endereço de um recurso (um arquivo, uma impressora etc.), disponível em uma rede; seja a Internet, ou uma rede corporativa, uma intranet. Uma URL tem a seguinte estrutura: protocolo://máquina/caminho/recurso.
- WWW: World Wide Web - É um sistema de documentos em hipermídia que são interligados e executados na Internet.
blog reactions
Postado em: 23 de julho de 2007 por Pedro Rogério
Todos sabem que com Ajax é possível dar maior interatividade a seu site, mas hoje em dia, vejo muitos sites abusarem desse conceito e transformarem uma simples Interface em um ambiente pirotécnico, que com um pouco de bom senso poderia ser evitado. Desenvolvedores começam um projeto novo e já não vem a hora de usar Ajax aqui, Ajax alí, acabam utilizando pra tudo, onde um simples HTML daria conta do recado, é por isso que muitos desenvolvedores hojem, ao invés de progredir, tem somente a regredir. Isso e muito mais informações você pode conferir no site Digilicious.
blog reactions
Postado em: 10 de abril de 2007 por Pedro Rogério
Uma lista de sites úteis para quem quer aprender AJAX:
blog reactions
Postado em: 27 de dezembro de 2006 por Pedro Rogério
HTML-Image map Creator WYSIWYG usa Ajax para fazer facilmente os famosos image maps em suas imagens, para os leigos, links em determinados pontos da imagem. Seu uso é muito simples, você escolhe a imagem, pode indicar a url da mesma no site, aí é só usar o mouse para desenhar e ele gera o código HTML automaticamente para você.
blog reactions
Postado em: 14 de dezembro de 2006 por Pedro Rogério
Ajax13 é uma ótima alternativa a suíte office, pois alí você tem praticamente tudo de que precisa para trabalhar, seja em seu escritório ou em casa, seus aplicativos são os seguintes: ajaxWrite, um editor de textos, ajaxSketch, uma ferramenta para criar arquivos SVG, ajaxXLS, editor de planlhas semelhante ao excel, AjaxPresents, com ele você pode ver, criar e modificar suas apresentações do Power Point, e para fechar com chave de ouro, ajaxTunes, um player de aúdio. Tudo isso de graça e disponível em qualquer lugar.
blog reactions
Postado em: 14 de novembro de 2006 por Pedro Rogério
Pixer.us é um ótimo editor de fotos on-line. Ele conta com várias opções básicas contidas nos mais diversos editors gráficos como: redimensionar, cortar, rotacionar e várias outras opções como ajuste de cores e vários outros efeitos.
