CSS Conditional comments

Postado por: Pedro Rogério em
  • 15 jan
  • 8

Uma das operações mais comuns desenvolvidas pelos programadores em uma página web é detectar o tipo de navegador utilizado e versão para que o conteúdo seja entregue de forma conveniente ao usuário. Para isso podem ser utilizadas várias técnicas tanto do lado servidor como do lado cliente. Nesse tutorial você terá uma introdução aos conditional comments, uma forma simples de diferenciar folhas de estilo entre as diversas versões o Internet Explorer.

Benefícios de utilização

Os principais benefícios de utilização são:

Menor impacto do lado cliente
Quando o navegador encontra um comentário condicional que não diz respeito a ele, ele o considera como um simples comentário HTML e o conteúdo não é analisado, baixado, economizando recursos da máquina cliente.
Não é necessário o uso de Scripts
Conditional comments são utilizam nenhum tipo de Script ou DHTML, durante o carregamento da página ele é analisado e direcionado somente para o browser necessário.
Separa o código da lógica
Utilizando Conditional comments você separa seu código em pequenos segmentos, tornando mais fácil o entendimento e a manutenção.
Cross-browser
A utilização de Conditional comments não é restrita somente ao Internet Explorer, eles podem ser utilizados nos browsers que suportam comentários condicionais para personalizar o conteúdo e aqueles que também não suportam.

Continuar lendo »

Central Server

Estrutura mínima de um documento XHTML

Postado por: Pedro Rogério em
  • 17 nov
  • 15

Para aquelas pessoas que estão começando agora no mundo do desenvolvimento web e não sabem como iniciar um documento XHTML, vou mostrar nesse post um exemplo muito simples que pode até ser usado com um template para futuros arquivos html:

<!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" xml:lang="pt-br" lang="pt-br">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Exemplo de XHTML Strict</title>
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <p>…Conteúdo do XHTML aqui…</p>
</body>
</html>

Vamos as explicações:

  • Doctype: Utilize sempre Doctype Strict, pois assim você força o browser a seguir corretamente os padrões web, dentro do possível, sempre que possível.
  • xml:lang=”pt-br” lang=”pt-br”: Aqui é onde você define a linguagem do seu documento previsto no XML document schemas
  • title, meta, stylesheet e scripts: Todos eles são definidos dentro da Tag head do seu HTML, title para título da página, meta para meta tags, stylesheet para o CSS e scripts são onde você irá adicionar seus arquivos JavaScript.
  • body: É aí dentro que você irá construir sua página, todo o código HTML virá dentro da tag body.

Como podem ver não existem muitos segredos ao se escrever documentos XHTML.

Diferença entre elementos inline e de bloco em HTML

Postado por: Pedro Rogério em
  • 5 nov
  • 10

Entender como os elementos HTML são renderizados na página é essencial para aqueles que estão embarcando agora no mundo do desenvolvimento web. Já vi muitas pessoas passarem por problemas por não entenderem isso, aliás, muitos programadores, no decorrer do desenvolvimento acabam tendo problemas com o HTML que foi desenvolvido pois ao tentarem efetuar alguma alteração acabam utilizando tags que não são necessárias, e aí os problemas começam. Então, para evitarmos esses problemas vou mostrar aqui que os elementos HTML são renderizados de 3 formas diferentes: Tags a níveis de bloco, Inline e Invisíveis.

Elementos a nível de bloco

Imagem ilustrando elementos de bloco

Os elementos de bloco em HTML utilizam toda a sua largura disponível e criam uma linha invisível antes e depois de si próprio. Os elementos a nível de bloco são os seguintes:

address, blockquote, center, dir, div, dl, dt, dd, frameset, fieldset, form, h1, h2, h3, h4, h5, h6, hr, menu, noframes, noscript, ol, ul, li, p, pre, table, tbody, thead, tfoot, tr, td, th

Eu sou um elemento a nível de bloco

Elementos Inline

Imagem ilustrando elementos inline

Os elementos HTML a nível inline são aqueles que ocupam somente sua largura necessária e não criam linhas antes e depois de si. Os elementos a nível inline são os seguintes:

a, abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, del, dfn, em, font, i, iframe, img, input, ins, kbd, label, map, object, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var

Eu sou um elemento a nível inline, Eu sou mais um elemento a nível inline

Elementos Invisíveis

São aqueles elementos que existem na página, mas não são mostrados ao usuário:

base, isindex, link, meta, script, style, title

Uma dica é que em CSS você pode tranformar um elemento de bloco em inline ou vice-versa através da propriedade CSS display.

Referência HTML/XHTML, CSS e JavaScript no Firefox

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

O Firefox é um browser amplamente usado devido as facilidades que ele proporciona aos desenvolvedores, usuários, onde com a utilização de extensões você pode levar um nível acima o desenvolvimento web, a navegação, a experiência na Internet. Recentemente descobri mais uma extensão que pode ajudar muito nós desenvolvedores, se chama DevBoi, onde você tem a possibilidade de ler as referências sobre: HTML/XHTML, CSS, JavaScript e DOM nativos no plugin, e ainda você possui a opção de instalar mais helps como: PHP, Ptototype, Ruby on Rails e XUL.

Devboi

Para ter acesso a referência basta ter o plugin instalado e apertar as teclas “CTRL + F9″, é aberta uma espécie de Sidebar em seu browser, a partir daí é só procurar o que deseja. Dica do WebResourcesDepot.

Páginas:«12