Características de um site user friendly

Postado por: Pedro Rogério em
  • 3 jan
  • 2

É muito fácil se dar conta quando um site foi desenvolvido pensando no usuário ou não. Parece algo estúpido, mas não não todas as pessoas que entendem que o site irá ser visitado por pessoas que não são iguais a ela mesma. Nem todos se sentem bem em todos os lugares. Sem dúvida, sites que antes de seu desenvolvimento são extremamente “pensados” são muito mais ricos que os outros.

Esses sites compartilham algumas características que fazem a visita do usuário muito mais agradável e ajudam a cumprir seu objetivo pelo qual visitou o site de maneira muito mais simples e rápida.

Carregamento Rápido

Um site deve carregar o mais rápido possível. Se o visitante pode encontrar a informação solicitada em seu site em outro, não tenha dúvida que ele irá logo após seu site demorar alguns segundos para carregar. Existem várias maneiras de se fazer com que seu site carregue mais rápido, abaixo você pode ver algumas delas:

Continuar lendo »

Webkit integra tags HTML5 para suporte multimídia

Postado por: Pedro Rogério em
  • 11 dez
  • 1

Os desenvolvedores do WebKit estão trabalhando para que seu browser tenha suporte as tags HTML5 <audio /> e <video />. O código HTML com a integração de Java Script seria da seguinte forma:

<video />


//HTML
<video src=sample.mov autoplay></video> 

//javascript
<script>
function playPause() {
  var myVideo = document.getElementsByTagName('video')[0];
  if (myVideo.paused)
    myVideo.play();
  else
    myVideo.pause();
}
//Aqui é onde controlamos onde o vídeo termina
myVideo.addEventListener(’ended’, function () {
  alert(’video playback finished’)
} );</script>
<input type=button onclick=”playPause()” value=”Play/Pause”>

<audio />


var audio = new Audio("song.mp3");
audio.play();

Referências

Problemas com Ajax e Quirks mode

Postado por: Pedro Rogério em
  • 6 nov
  • 3

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.

Continuar lendo »

Quais são as versões do HTML?

Postado por: Pedro Rogério em
  • 15 out
  • 0

O HTML foi desenvolvido originalmente por Tim Bernes-Lee no CERN (Centro Europeu de Física de Partículas), e foi popularizado pelo navegador Mosaic, esse desenvolvido pela NCSA (National Center for Supercomputing Applications). Devido ao seu rápido crescimento na Web, foi necessário criar um padrão para que todos os autores e navegadores pudessem reconhecer quaisquer versões do HTML, que são as seguintes: HTML 2.0, HTML 3.2, HTML 4.0 e o HTML 4.01.

Alguns crêem que o HTML não tem futuro algum devido a existência do XHTML mas se fomos ver bem, o browser mais utilizado hoje não suporta XHTML como deveria. As versões do HTML mais utilizadas hoje em dia são HTML 4.01 e XHTML 1.0. Essas 2 versões foram definidas pelo W3C a mais ou menos 7 a 8 anos, e agora estão sendo desenvolvidas novas versões que são o HTML 5 e o XHTML 2.

Apesar de cada versão, cada uma tem suas variantes que sempre devem ser definidas no documeno HTML:

  • HTML 4.01 Strict: O mais utilizado, onde podem ser utilizadas tags do HTML 4.01, só que não são permitidas tags obsoletas.
  • HTML 4.01 Transitional: Esse permite utilizar tags de todas as versões HTML, mas não é muito recomendado.
  • HTML 4.01 Frameset: Tem suporte a frames, um modelo muito antiquado.

Artigo recomendado: Evolução do HTML.

Esse artigo é uma tradução do original de: Carlos Leopoldo.

72 Acrônimos que falam os Geeks

Postado por: Pedro Rogério em
  • 4 out
  • 10

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.

Continuar lendo »

30 Extensões Firefox para Desenvolvedores Web

Postado por: Pedro Rogério em
  • 3 out
  • 8

Uma das coisas mais interessantes do Firefox é a possibilidade de você instalar extensões nele que podem lhe auxiliar e muito, seja para navegar, ou para o desenvolvimento web, e até hoje eu não entendo como tem muita gente ainda que não utiliza o Firefox, seja, ou por receio, ou por que o acha feio, não sei, mas isso fica para um próximo post, mas abaixo você pode ver uma lista de 30 extensões que eu encontrei no site Sentido Web, e podem auxiliar e muito você desenvolvedor:

CSS

  • Aardvark: Permite ver atributos CSS, ID’s e Classes, selecionando elementos individuais na página.
  • chromEdit: Permite modificar o CSS e o JavaScript de qualquer página.
  • CSSMate: Edição de arquivos CSS.
  • CSS Validator: Valida o CSS de suas páginas.
  • CSSViewer: Visualiza propriedades CSS.
  • EditCSS: Permite modificar os CSS carregados.
  • IETab: Visualize suas páginas web no IE dentro do Firefox.
  • Style Sheet Chooser II: Permite selecionar folhas de estilo alternativas para uma página.

Debug e Análise

  • Firebug: Dispensa apresentações, a melhor ferramenta para análise e debug de HTML, CSS, JavaScript e Ajax.
  • HTML Validator: Valida o HTML suas páginas de acordo com o W3C.
  • JavaScript Debugger: Debug de JavaScript.
  • Link Checker: Comprova se os links de uma página são válidos.
  • Load Time Analyzer: Ferramenta para mostrar o tempo de carregamento de uma página.
  • View Dependencies: Mostra informações de todos os arquivos usados ao carregar uma página.

Outros

  • Clipmarks: Tire screenhots de lugares específicos de sua página.
  • Codetech: Editor Web com a aparência do Dreamweaver.
  • ColorZilla: Capture cores das páginas visitadas.
  • FirePHP: Ferramenta para depurar PHP.
  • Greasemonkey: Altere o comportamento de qualquer página web com esse plug-in.
  • Measureit: Ferramenta para medir(em pixels), partes das páginas web.
  • Platypus: Uma das melhores ferramentas para modificar uma página web.
  • Poster: Permite interagir com WebServices e outras ferramentas web.
  • Professor X: Mostra o conteúdo do header de uma página web.
  • Screen grab: Tire Screenshots de suas páginas web.
  • TestGen4Web: Grava a atividade dos usuários em páginas web.
  • View Source Chart: Visualizador de código fonte.
  • Web Developer: Uma coleção de ferramentas para desenvolvimento web.
  • X-Ray: Permite ver o código fonte de uma página e alternar entre ambos de uma forma simples.

Artigo original: Sentido Web.

A semântica e as tags <kbd>, <var> e <dfn>

Postado por: Pedro Rogério em
  • 3 set
  • 4

Com certeza, muita gente nem sequer já utilizou essas tags, eu, particularmente, também nunca as utilizei, e também sabia muito pouco sobre sua verdadeira utilidade, mas basta um pouco de pesquisa que você acaba encontrando o que precisa. Agora vamos ver o significado de cada uma:

<kbd>

Com essa tag você pode indicar ao usuário que ele deve utilizar alguma tecla de seu teclado para realizar determinada função:


<p>Você deve utilizar a tecla <kbd>ESC</kbd> para encerrar o aplicativo</p>

Também recomendo seu uso para indicar ao usuário o uso de accesskey na página.

<var>

Serve para indicar uma variável de alguma linguagem de programação. Possui um estilo por padrão, no qual transforma a tipografia em monospace:


<p>No código JavaScript, a variável <var>validarCampo</var> é utilizada para...</p>

<dfn>

Introduz um termo, uma definição a seu texto:


<p>Eu quando digo <dfn>braço curto</dfn>, estou me referindo a um programador preguiçoso.</p>
Páginas:«12345678»