Arquivo da tag: google chrome

Como saber se um site foi desenvolvido em html 5

Fonte: Gustavo D. Castro

Como saber se um site foi desenvolvido em HTML 5?

Simples, basta acessar o site, clickar com o botão direito do mouse sobre o site e solicitar que seja exibido o código fonte no mesmo, nas primeiras linhas você verá a citação referente ao ao DOCTYPE do site, essa linha diz ao navegador em qual HTML e sua versão que o site foi desenvolvido.

O HTML 5 diferente do HTML 4 dispensa citações de versões, basta um código para que ele diga ao navegador que se trata de HTML 5, por isso basta observar se o DOCTYPE está idêntico ao código abaixo:

<!DOCTYPE html>

Se estiver igual, o site está sendo interpretado como HTML5, se estiver diferente trata-se da versão 4. Mas atenção, apesar do site ter sido marcado como HTML 5 não quer dizer que o desenvolvedor utilizou os novos recursos da linguagem.

Outras opções para saber em qual HTML o site foi desenvolvido:

Foi desenvolvida uma extensão para quem utiliza o Crhome da Google, a extensão detecta automaticamente se o site foi ou não desenvolvido em HMTL 5. Para utiliza-la é simples, basta ter o navegador da Google instalado em seu pc, e acessar a seguinte url através dele: Extensão Google Chrome

Agora click em “instalar extensão” e proceda com a instalação normalmente. Reinicie o navegador e pronto! A partir de agora sempre que acessar um site que foi criado em HTML5 irá aparecer o ícone do mesmo logo após o endereço do site.

Testando as extensões do Chrome para desenvolvedores

Fonte: Fernando Henrique/IMasters


O Mozilla Firefox sempre foi o meu browser favorito devido a suas inúmeras extensões que me auxiliavam diariamente. Mas quem o usa sabe que, na verdade, ele é um comedor de memória RAM e, ultimamente, ele anda travando mais do que gostaríamos.

Pensando nisso e observando como o Google Chrome tem crescido nas estatísticas de acesso do Google Analytics dos sites que administro, resolvi colocá-lo à prova no meu cenário.

Me surpreendi muito ao acessar a galeria de extensões para desenvolvimento web e ver o grande número de ferramentas que estavam disponíveis. Com isso, seguem as extensões, que, ao meu ver, são mais úteis e interessantes para o meu dia a dia

  • 960 Grid System Overlay (Unofficial): É uma ferramenta não oficial para os usuários do sistema de Grid 960 GS. Com ela, você pode visualizar as colunas do site e ver se não ficou nada fora do planejado.
  • Awesome Screenshot – Capture & Annotate: Muito útil para fazer um screenshot, que pode ser feito de três maneiras: uma seleção da página, apenas a área visível do seu browser, ou a página inteira. Ele permite, ainda, que você faça pequenas modificações na imagem, como esmaecer alguma área, sinalizar algum lugar que queira dar destaque e até mesmo fazer algum recorte extra. Após editar a imagem, você pode salvá-la em seu computador ou deixa-la online.
  • Color Pick: Ferramenta usada para capturar alguma cor que está na tela. Com dois cliques, você consegue recuperar uma cor sem precisar abrir programas de edição de imagem.
  • IE Tab Classic: Sim, ainda existem sites que só abrem no Internet Explorer (principalmente os de bancos). Difícil de acreditar, mas é a mais pura verdade. Com essa ferramenta, você “pula” de um navegador para outro em um clique; sem precisar perder tempo abrindo o IE. Ela também é útil para fazer testes rápidos no IE, mas para essa função eu aconselho uma ferramenta separada, chamada IE Tester. Ela é gratuita e tem sido muito útil para mim.
  • ImagePropertiesContextMenu: Se você precisa conseguir informações, como tamanho, dimensão, ou URL de uma imagem, esta ferramenta irá lhe ajudar muito. Com um clique do botão direito do mouse em cima da imagem, você verá a opção de inspeção completa.
  • IP Addressand Domain Information: Com esta ferramenta, você consegue inspecionar o domínio que está visitando e obter informações, como IP, GeoLocalização (nem sempre muito precisa), whois, e até outros sites que possam estar hospedados no mesmo ip.
  • Mobile Resizer: Ferramenta simples, mas útil para conferir se o seu site se “encaixa” em algum dispositivo mobile. Ela basicamente redimensiona o navegador para o tamanho de tela do aparelho selecionado, entre eles temos modelos da Apple, Android e Blackberry.
  • Mozbar: Toolbar do site SEOmoz para conseguir algumas informações e métricas de SEO (Page Authority, Page Rank) da página e dos domínio visitados. Ela permite, também, conseguir informações sobre o servidor, como IP e país. Além disso, é bastante útil para fazer análise de metatags e busca de links e palavras-chave dentro do site. Existe uma versão paga, que possui mais funcionalidades.
  • Palette for Chrome: Que tal construir uma paleta de cores baseada em uma imagem em apenas alguns segundos? Com esta ferramenta, é fácil. Como não tenho muita afinidade com design e às vezes preciso desempenhar esse papel, essa ferramenta e o colorotate são minhas aliadas para algumas “gambiarras visuais”.
  • PerfectPixelbyWellDoneCode: Há certos clientes e designers que conseguem reparar no mínimo pixel fora do lugar, comparando com o layout. Esta ferramenta é para você evitar que isso aconteça. Com ela, é possível criar uma “layer” transparente, com o layout em cima do HTML. Assim, é possível fazer a comparação entre como o site está e como deve ficar.
  • ruul. Screenruler: Depois de descobrir que há algo fora do lugar, com ajuda da ferramenta anterior, que tal usar uma régua digital para medir quantos pixels será preciso mexer para que tudo fique em ordem? Ela também possui algumas medidas extras, como espessura de bordas, altura de linha e tamanho de fonte. Podem ser usadas quantas réguas for preciso em uma única página.
  • Tape: Algumas vezes, uma simples régua não ajuda a resolver os problemas de medidas em um layout e são necessárias outras ferramentas, como um grid e linhas de marcação. Para esses casos, esta ferramenta é a mais indicada. É um pouco difícil de se acostumar com ela no início, mas depois que se pega o jeito, ela vira uma ferramenta indispensável.
  • Web Developer: Esta extensão deve ser a preferida de nove entre dez desenvolvedores web. Ela é uma mão na roda para o uso diário e contínuo. As principais funções são a de manipulação de CSS, forms e imagens, redimensionar o tamanho da tela, validação de CSS e HTML, além de possuir ferramentas, como seletor de cores e uma régua.
  • YSlow: Ferramenta de análise das páginas web, para descobrir informações como a velocidade de carregamento, além de fornecer dicas de como melhorar a estrutura da página para que seja carregada mais rápido.
  • Firebug Lite for Google Chrome™: Outra ferramenta indispensável. Serve para análise e modificações em tempo real do HTML, JavaScript e CSS do site (essas alterações só duram até a página ser recarregada), além de fornecer um console de erros e monitoramento de JavaScript e uma inspeção do DOM da página.

Ferramenta do desenvolvedor

O Chrome ainda possui uma ferramenta bem semelhante ao Firebug, mas na minha opinião é um pouco inferior. É a “ferramenta do desenvolvedor”, que pode ser habilitada pelo menu Configurações (aquela chave de boca que fica no canto superior direito do navegador), Ferramentas, Ferramentas do desenvolvedor ou pelo atalho Ctrl + Shift + I.

Espero ter ajudado você a optar pelo Chrome no seu ambiente de desenvolvimento. Mas, apesar do crescimento do uso desse browser, lembre-se sempre de testá-lo em vários outros navegadores e sistemas operacionais, isso ajuda muito a não correr o risco de ir apresentar seu trabalho para o cliente e ocorrer algum problema de visualização.

Como Saber Rapidamente se um Blog ou Site está em HTML5

Hoje vim com uma Dicas muito útil, vou ensinar Como Saber Rapidamente se um Blog ou Site está em HTML5, já virou uma mania de muitos blogueiros ficar olhando o Doctype de blogs e sites que “dizem usar a tecnologia HTML5”, só que isso, apesar de ser simples, ainda é meio que trabalhoso em relação ao que vou ensinar hoje. Pena que esse tutorial só servira para usuários do Google Chrome, mas como é o navegador mais usado pelos nosso leitores, faço questão ensiná-los. A Extensão é, sem sombra de dúvida, muito útil para blogueiros.

Vamos ao Tutorial:

1º – Acesse o Link Direto do HTML5 Powered: https://chrome.google.com/webstore/detail/klleofbhh…

2º – Instale a Extensão no seu navegador Google Chrome (clique em Adicionar Extensão).

3º – Depois Aceite a Instalação da Extensão.

4º – Em seguida é só você navegar normalmente.

Toda vez que um Site estiver em HTML5, a extensão irá identificar o Doctype e irá aparecer o Logo do HTML5 na Bara de Endereço do Google Chrome. Isso é muito melhor, pois existem muitos blogueiros que estão olhando sempre o Doctype de muitos blogs para saber se eles estão realmente em HTML5. Agora é muito mais fácil saber, é só visitar e ver na barra de endereço. Essa Extensão é muito prática, leve, simples e muito útil, é a única extensão que uso.

Fonte: Iago Melanias/Blogando com Facilidade

Google Dart, outra alternativa a JavaScript: tipos opcionais, sintaxe familiar e ferramentas

Lars Bak, criador do V8, o engine JavaScript do Google Chrome, e Gilad Bracha anunciaram durante seu keynote na GotoCon na Dinamarca, a nova linguagem Dart.

A linguagem, proposta pelo Google como uma alternativa ao JavaScript, foi apresentada como um preview de tecnologia, e ainda não está disponível no Chrome. Tem sintaxe familiar para os desenvolvedores Java e JavaScript e suporte a concorrência no estilo Erlang/Actor.

A nova linguagem oferece herança simples baseada em classes e traz suporte a interfaces. Outras características são tipos estáticos opcionais e tipos genéricos reificados, além de escopo léxico real e threads simples. São suportadas também a sobrecarga de operadores e a interpolação de strings (“Hello ${texto}”), além da sintaxe Lambda: (x) => x.

O exemplo abaixo, adaptado da documentação, demonstra um pouco da sintaxe da linguagem.

interface Forma {
    num perimetro();
}
   
class Retangulo implements Forma {
    final num altura, largura; 
    Retangulo(num this.altura, num this.largura);  // Sintaxe compacta de constrututor
    num perimetro() => 2*altura + 2*largura;  // Sintaxe curta para funções 
}

class Quadrado extends Retangulo {
    Quadrado(num tamanho) : super(tamanho, tamanho);
}

Em Dart, mesmo se os argumentos ou variáveis forem definidos com tipos incorretos, o código poderá ser executado; entretanto as ferramentas irão avisar sobre inconsistências.

As interfaces em Dart suportam implementação através de factories; por exemplo, a interface Pessoa teria uma factory PessoaFactory. Interfaces têm construtores; chamadas ao construtor são direcionadas à factory definida na interface.

A concorrência em Dart é implementada com Isolates. Cada Isolate é um processo conceitual, no estilo da linguagem Erlang. Não há compartilhamento e a comunicação ocorre via passagem de mensagens. Isolates têm uma ou mais “portas” e podem ser executados em paralelo.

A distribuição do Dart inclui um conjunto de APIs básicas para estruturas de dados e operações, mostradas na figura abaixo (extraída da documentação técnica do Google).

O compilador DartC é capaz de compilar o código para JavaScript comum; ou o código em Dart pode ser executado em uma VM dedicada. Uma terceira opção é utilizar ferramentas que acompanham a Dart para criar uma imagem do heap de uma aplicação e empacotá-la em um formato otimizado, que pode ser carregado quase que instantaneamente, de forma similar ao sistema de imagens do Smalltalk.

Entre as ferramentas oferecidas estão plugins para Eclipse, com auto-complementação de código e outras facilidades.

É possível baixar uma versão preview da linguagem no site oficial ou no Google Code do projeto.

Fonte: Werner Schuster, traduzido por Michel Graciano/InfoQ

DOM Snitch 0.717 com Recurso de Verificação Heurística

DOM Snitch é uma ótima ferramenta de segurança, que pode ser classificada como uma extensão experimental desenvolvida para o Chrome, permitindo que os desenvolvedores e testers possam identificar práticas inseguras, comumente encontradas em código do cliente. O recurso de verificação heurística apresentado pela ferramenta, a torna muito mais potente. A verificação heurística é o processo de checagem em relação a existência de malware, que ainda não seja conhecido ou reconhecido como tal.

Compondo as características de maior importância desta solução, está a questão do funcionamento em tempo real, onde os desenvolvedores e testers podem observar a ocorrência de modificações, e como acontecem dentro do navegador, sem que haja a necessidade de percorrer o código JavaScript com um depurador ou pausar a execução de sua aplicação.

Há também a questão da facilidade de utilização: através do built-in de segurança (heurística), tanto os desenvolvedores mais avançados quanto os menos experientes, podem rapidamente identificar áreas do aplicativo que estejam sendo testadas e que precisam de maior atenção.

Finalizando as características mais importantes, há maior colaboração para que os desenvolvedores e testers exportem e compartilhem as modificações que forem capturadas no DOM Snitch, enquanto estiverem em processo de solução de problemas.

Dom Snitch 0.717 traz ainda uma pequena atualização para lists values, ignoradas em /scanner/heuristics/ReflectedInput.js,além de mudanças heurísticas, UX e elaboração de relatórios. Para os interessados em fazer o download dessa ferramenta, ela está hospedada no Google Code.

Fonte: Under-Linux

Interon tem plataforma SaaS para aplicações

Servoy promete aliar velocidade e robustez na entrega de aplicações na nuvem

A Interon, empresa brasileira dedicada à evolução de aplicações de negócios, traz ao Brasil o Servoy, plataforma de desenvolvimento e implantação de aplicações em Cloud Computing, não só na modalidade SaaS, como também em PaaS e IaaS. A plataforma atende tanto ISVs (fornecedores independentes de software) como organizações.

Segundo a empresa, o Servoy é a plataforma ideal para evoluir aplicações Visual FoxPro. Ele oferece multi-plataforma para desenvolvimento (Windows, Mac e Linux), runtime (tempo de execução), cenários de cloud computing e multi-navegadores (Internet Explorer, Firefox, Google Chrome, Safari, Opera) com desenvolvimento web móvel. Também permite desenvolver códigos tanto para desktop quanto para web, a partir de uma única base de código.

A plataforma acompanha as tendências do mercado de software, que aposta fortemente na adoção do Cloud Computing. O modelo SaaS permite que as aplicações desenvolvidas sejam executadas em um servidor, e o cliente as acessa pela internet. Desta maneira, não há a necessidade de instalar o sistema no computador do cliente.

Por estar no modelo SaaS, o Servoy traz vantagens como redução do investimento inicial, implementação mais rápida de aplicações e interface simples e intuitiva, que permite que todos os aspectos básicos da solução possam ser conhecidos em apenas uma semana, de acordo com a Interon.

Com o Servoy, todos os dados da solução são armazenados em um banco de dados SQL (o Servoy já vem com o banco de dados Sybase, mas pode-se usar o banco de dados que preferir), ou seja, não estão em formato físico no disco. O Servoy apenas controla a interface para os dados, portanto se a aplicação ficar fora do ar, os dados não ficarão corrompidos.

Outro benefício é a baixa latência na rede. O Servoy Client se comunica com o Servoy Server via Java SSL criptografado e compactado. Ele utiliza a técnica lazy load, em que apenas os dados dos formulários que estão sendo utilizados são enviados pela rede, reduzindo assim o consumo desta.

Com o recurso de internacionalização, é possível desenvolver uma solução em idioma nativo. Usando o i18n, é possível adicionar a referência ao idioma que a aplicação irá disponibilizar. Assim, o Servoy carrega automaticamente o idioma correto, baseado na configuração selecionada pelo usuário.

Ele também permite estilização, o que torna simples definir padrões como fonte, cor, alinhamento, configuração de bordas, do que adicioná-los manualmente para cada elemento do formulário.

O Servoy também oferece ambiente flexível. Oferece suporte completo para o JavaBean, Java applets e plugins, permitindo integrar, personalizar e estender funcionalidades para a aplicação Servoy, da maneira como for necessário.

O Servoy é composto pelas seguintes funcionalidades:

IDE de Desenvolvimento – conjunto de ferramentas necessárias para desenvolvimento de soluções de diversos níveis de complexidade;

Servoy Server – responsável por manter conexões com as bases de dados, sincronismo automático entre Cliente-Servidor, controlar transações, adicionar e configurar plugins, controle de versões de aplicações, execução de processos Batch, etc;

Servoy SmartClient – executa uma aplicação desenvolvida no Servoy em formato desktop. É uma aplicação 100% Java que mantém uma conexão dinâmica com o servidor de aplicação;

Servoy Runtime – cria versões de Stand-Alone de aplicações desenvolvidas no Servoy, sendo possível executar toda estrutura da aplicação e base de dados em uma máquina local;

Servoy WebClient – a mesma solução desenvolvida para SmartClient pode ser executada como WebClient sem implementação ou configuração adicional;

Sybase Anywhere – o banco de dados Sybase está incluso no pacote de instalação do Servoy, ficando a critério da empresa escolher se deseja trabalhar com ele ou com outro banco de dados.

Fonte: Metaanalise

Chrome 13 traz Instant Pages

O Google Chrome recebeu mais uma versão estável ontem, que chega pouquíssimo tempo depois da versão anterior ser lançada. Ela funciona tanto em Windows, OS X da Apple e Linux. A atualização é recomendada para todos os usuários, pois traz recursos novos e – principalmente – corrige falhas de segurança detectadas nos últimos tempos.

O Chrome 13 conta pela primeira com o recurso de Instant Pages ativado por padrão. Com ele, o Google pode renderizar aqueles resultados de busca mais propensos de serem abertos em segundo plano. Quando o usuário clica, é como se a página estivesse ali o tempo todo – aparece quase instantaneamente. Embora o Google seja o primeiro buscador a tirar proveito do Instant Pages, esse recurso é baseado em padrões web, e qualquer concorrente pode desenvolver uma busca mais rápida em cima dele.

De acordo com a equipe responsável pelo browser, 13 correções consideradas como de alta prioridade foram aplicadas ao sistema. E, no total, o Google diz ter feito mais de 5.200 melhorias e correções no navegador.

Fonte: IMaster