Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

Muitas vezes quando estamos fazendo um site, acabamos ficando preocupados somente com os títulos e os textos, é onde acabamos esquecendo da semântica, por exemplo, quando queremos indicar um código em nosso site, devemos usar a tag <code>, mas muita gente acaba esquecendo disso.

Abaixo você pode ver uma lista de tags semânticos:

• cite: Destina-se a marcar textos que citem ou façam referências a outras fontes
• code: Destinado a marcar trechos código
• dfn: Destina-se a marcar um termo cuja definição foi dada no documento
• em: Destinado a marcar texto com ênfase
• kbd: Destina-se a marcar texto que define uma ação do usuário no teclado
• samp: Destinado a marcar textos que são mostrados como exemplo de saída de um software
• strong: Destinado a marcar textos em negrito
• sub: Destinado a deixar o texto subescrito
• sup: Destinado a deixar o texto superescrito
• var: Destina-se a indicar que trata-se do nome de uma variável ou de um argumento de um programa

<update> Depois do comentário do Marcos Danilo, vou deixar aqui um exemplo de como usar a tag dfn, ela indica basicamente a definição de uma palavra, em geral apresenta o texto em itálico: CERN: Centre d’Éstudes et Recherches Nucleaires </update>

GetWebKit é um navegador para Windows desenvolvido a partir do Webkit da Apple, o mesmo motor do Safari. Para você instalá-lo, você necessita ter instalado previamente o vcredist_x86. Por enquanto ele não oferece total suporte a páginas codificadas com UTF-8, ISO-8859-1 e Windows-1252, o que pode resultar em caracteres estranhos.

Se você precisa fazer uma barra de rolagem em uma div, existe uma maneira muito simples de se obter esse efeito, usaremos a propriedade overflow do CSS. Reparem no código abaixo:

#scroll {
  width:300px;
  height:170px;
  background-color:#F2F2F2;
  overflow:auto;
}

Agora no HTML criaremos uma div chamada scroll onde colocare-mos o nosso conteúdo que queremos que tenha a barra de rolagem:

<div id="scroll">
  <p>Aqui vai o conteúdo da div</p>
</div>

O que o overflow:auto faz é o seguinte, reparem que foi definido uma altura pra nossa div de 170px, quando o conteúdo ultrapassar essa altura, ele cria uma barra de rolagem automaticamente, interessante não, então veja um exemplo em funcionamento.

K-Meleon é um browser baseado na plataforma gecko (o motor de renderização da mozilla), já sabem então que é um browser de qualidade. Ele é bem rápido, e tem o mínimo indispensável para navegar e além de tudo é compatível com os padrões web.

O K-Meleon é o Browser mais básico desenvolvido pela Mozilla, tipo as aplicações que acompanham o Windows. Mas agora, você acaba se perguntando, será que compensa eu baixar esse browser e instalá-lo na minha máquina? Se você tem um computador com poucos recursos, e quer utilizar um browser que trabalhe dentro dos padrões, essa será uma ótima alternativa para você estar fugindo do Internet explorer.

Download

A nova mania agora são os sistemas operacionais rodando na web, se lembram do Eyeos, agora acabei conhecendo o YouOS, um outro sistema operacional. A sua interface não é parecida com a do EyeOS, são bem diferentes, no EyeOS você acessava os aplicativos por uma espécie de Dock, no YouOS não, ele possui um botão e uma barra, semelhante ao Windows, onde você pode iniciar os aplicativos.

Ele possui muitas vantagens como: Cliente de E-mail, Browser interno, Uma espécie de Windows explorer, Editor de texto, Chat, Bloco de anotações, Integração com o Flickr, e várias outras opções para customização. Veja abaixo algumas screenshots que eu tirei do mesmo:

Interface do Usuário

Menu de Acesso aos programas

Continuar lendo »

Se você trabalha com desenvolvimento para a Web, existem algumas extensões essenciais para o Firefox para agilizar o desenvolvimento de suas páginas:

Web Developer Extension

Essa ferramenta é muito útil para o desenvolvimento, ele instala uma barra de ferramentas no Firefox com várias opções como: Desabilitar o CSS, incapacitar certos elementos da página, desabilitar imagens, mostrar detalhes de formulários e muitas outras coisas.

Aardvark Extension

Essa extensão tem por finalidade eliminar erros em seu CSS. Não é uma mão na roda mais é bem interessante.

Colorzilla

Uma ferramenta para seleção e teste de cor, é só você colocar a eyedropper sobre a cor que ele mostra as informações para você.

Fang

Esta extensão cría uma respresentação textual de uma página Web similar a uma página que seria lida por um leitor de tela.

Link Checker

Tem como finalidade checar os links da sua página, verificar se os links estão quebrados, bons links. É semelhante ao Link Checker do W3C

Measure It

Permite que você meça a altura e a largura da tela

Screen Grab

Tira escreenshots da sua página e as coloca em um frame para análise.

IE View

Permite que você veja as páginas dentro do Firefox, mas como se estivesse usando o IE, é bom pra não precisar ficar abrindo o IE toda hora para fazer testes.

Fire FTP

Instala um cliente FTP no Firefox, perfeito para subir arquivos rapidamente para o seu host.

HTML Validator

Essa extensão é baseada no famoso HTML Tidy. Ele adiciona um ícone na barra de status do browser que mostra se seu código é válido ou não

Segundo as especificações das CSS 2.1, na propriedade line-height das CSS não é necessário especificar uma unidade de medida concreta(em, px, ou outra qualquer). A melhor opção seria não colocá-la, pois ela hedará o valor da propriedade font-size do elemento:

ul {font-size: 15px; line-height:1;}
li { font-size: 10px; } /* Tomará como line-height 10px */
small {font-size: 80%; line-height: 8px;} /* Tomará como line-height 8px */

O único problema é que o Validador de CSS do W3C não aceita valores sem unidades de medida.

Referências

Meyer Web

Voltando ao assunto dos Microformats, dessa vez iremos ver o Microformat hCalendar, ele é muito parecido com o iCalendar, usado na aplicação iCal do MAC. Como já deve ter imaginado, hCalendar é usado juntamente com o XHTML para marcar qualquer tipo de evento.

Para uma melhor compreensão dessa matéria, vamos a um exemplo:

<div class="vevent">
<p>
<a class="url" href="http://www.fimdomundo.com.br/">
<abbr class="dtstart" title="20061101">1 de Novembro</abbr> - <abbr class="dtend" title="20061102">2 de Novembro</abbr><span class="summary">Fim do Mundo</span> - e <span class="location">do Planeta Terra</span>
</a>
</p>
<p class="description">Nós não iremos nos dar bem.</p>
</div>

Como podem ver, tudo fica englobado dentro de uma div com a classe vevent, para marcar que temos dados relacionados a um evento marcado com hCalendar. Dentro da div ficará as informações do evento, que deverá ser marcado corretamente.

Para marcarmos um link com informações relevantes sobre o evento, utilizamos o atributo class=”url”. O texto do link pode ser o que queremos, mais as datas do evento, que é o que interessa aos links da url, contida no atributo href.

Outro dado importante que se deve marcar convenientemente é o resumo(summary), do evento. Para não complicar a sua vida, é melhor colocar este dado como nome do evento, e marcá-lo com a classe correspondente (class=”summary”). Juntamente com o nome do evento, costuma-se marcar o local do evento, esse dado deve ser marcado com class=”location”. Você não precisa obrigatoriamente usar div e span para marcar os dados, mas é altamente recomendado por questões de semântica.

O começo do envento deve-se marcar com class=”dtstart”, e no final deve-se usar class=”dtend”. As datas devem ficar da seguinte forma: AAAA-MM-DD.

Por último, como vocês podem ver foi citada uma pequena descrição do evento, que deve ser usado o atributo class=”description”. Mas há muitos mais dados que poderemos usar, você pode conhecê-los nas especificações do iCalendar

Estou criando essa lista para ajudar aos desavisados onde melhor aplicar AJAX e onde realmente não seria necessário:

Onde deve-se usar AJAX

• Interação via formulários
• Navegação de aplicações do tipo hierárquica
• Comunicação rápida de usuário a usuário
• Votações on-line
• Filtro e manipulação de dados
• Campos de texto usados comunmente(autocompletar)

Onde não se deve usar Ajax

• Formulários simples: Se há somente um campo, não há necessidade
• Buscas: Esse parte é meio pessoal, uns gostam, outros não preferem
• Navegação básica: Esse também é um erro típico que acaba ocorrendo com o Flash, imagine um Menu com 2 boxes que digam Início e Contato, qual a necessidade de se usar Flash alí, ou até mesmo AJAX?
• Manipulação de interfaces do usuário: Para manipulação existe o XHTML/HTML, DOM e as CSS, que foram criadas para isso.
• Widgets inúteis

Padding é a distância do elemento entre a borda e o seu conteúdo. As regras para margem também se aplicam ao padding, excepcionalmente o valor “auto” e valores negativos, que não podem ser declarados:

padding-top: valor;
padding-right: valor;
padding-bottom: valor;
padding-left: valor;

Você também pode declarar esses valores para padding em uma única propriedade:

padding: 10px 10px 10px 10px;

Se você for declarar o padding como acima, ele segue a seguinte ordem:

• top
• right
• bottom
• left

Declarando apenas um valor, ele é ajustado para todos os lados:

padding: 10px;

Declarando apenas 2 ou 3 valores, funcionaria da seguinte forma:

padding: 10px 10px; Aqui o primeiro valor ajusta o padding para top e bottom e o segundo valor para left e right.

padding: 10px 10px 10px; Aqui o primeiro valor ajusta o padding para top, o segundo para left e right e o terceiro para bottom.

Como você pode reparar no exemplo abaixo, a div container tem um padding de 20px:

#container {
    width:760px;
    margin:0 auto;
    padding:20px;
    border:1px solid #000;
    background:#FFF;
}

Isso colocaria o conteúdo de container a 20px de sua borda.

Tradução do artigo original de: CSS Basics.