Arquivo da categoria: XHTML

Colocar Rodapé fixo no fim da página

Você já precisou ter o rodapé fixo no fim da página algum dia. Normalmente os clientes chatos acham feio aquele rodapé terminando no meio da página quando há pouco conteúdo. Há uma técnica no CSS que resolve isso. Não funciona no IE6, já aviso agora. Na verdade, tem um jeito de funcionar, mas não quero te acostumar mal. 🙂

Lembrando que você pode fazer isso facilmente com JQuery.

Suponha que você tenha o código HTML:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>

<title>Tableless.com.br</title>
</head>

<body>

<div>
<div>
HEADER
</div>
<div>
ESQUERDA
</div>
<div>
DIREITA
</div>
<div>
<p>
Lorem ipsum dolor sit amet
</p>
<p>
Duis id metus enim, sed dignissim magna.
</p>
</div>
<div>
FOOTER
</div>
</div>

</body>
</html>

E o seguinte CSS:

*  {
margin:0;
padding:0;
}

html, body {height:100%;}

.geral {
min-height:100%;
position:relative;
width:800px;
}

.footer {
position:absolute;
bottom:0;
width:100%;
}

.content {overflow:hidden;}
.aside {width:200px;}
.fleft {float:left;}
.fright {float:right;}

Na linha 6, você faz com que as tags body e html tenham 100% de altura. Isso fará com que o rodapé entenda que o limite dos dois elementos seja o final da janela do navegador.

Na linha 8, defino que a largura mínima do div GERAL, que é o div que envolve todo o site, seja de 100%. E defino um position: relative; para que o footer seja referenciado por ele.

Na linha 14, eu defino um position: absolute; e bottom:0; para footer, forçando sempre para o final do div.
Se houver pouco conteúdo o Rodapé fica lá embaixo, se houver muito, o rodapé desce junto com o conteúdo.

Funciona em IE7+ e em bons browsers.

Fonte: Tableless

Anúncios

1 comentário

Arquivado em XHTML

@font-face – Fonts externas na web

Tipografia na web sempre foi um sonho para todo designer para web.

@fonface

@fonface

Alguns designers que trabalharam durante muito tempo com impressão estranham o tarbalhar com web por conta dessa limitação. A tipografia é parte importante na criação de peças gráficas e na web, isso não poderia ser diferente. Mesmo assim, não havia uma maneira ‘inteligente’ de utilizar fonts externas na criação de layouts para web. Iniciativas como TypeKite Sifr  quebram o galho mas não são o ideal.

@font-face é uma das funcionalidades mais esperadas do CSS. Ela permite que você utilize famílias de fonts em websites sem que o usuário tenha a font instalada no sistema. Veja abaixo a sintaxe:

@font-face {
font-family: helveticaneue;
src: url(‘HelveticaNeueLTStd-UltLt.otf’);
}

Na primeira linha você dá um nome para a Font que você está importando. Pode ser qualquer nome.
Na segunda linha, você inclue o endereço de onde a font se encontra. Para facilitar, crie uma pasta font dentro da pasta onde está o CSS.

Feito isso, você a utiliza como qualquer outra font:

p {
font:36px helveticaneue, Arial, Tahoma, Sans-serif;
}

Fiz alguns testes aqui e em algumas máquinas e conexões lerdas, o browser carrega primeiramente o texto com a font padrão do sistema e logo depois monta o texto com as fonts corretas. Nada de outro mundo para quem utiliza imagens para substituir textos. Mesmo assim, pode ser um incomodo para alguns.

Suponhamos que você queira oferecer a font para os que não a tem disponivel no sistema, mas para que o site carregue mais rápido, queira utilizar a cópia local do sistema do usuário caso ele a tenha instalado:

@font-face {
font-family: helveticaneue;
src: local(HelveticaNeueLTStd-UltLt.otf), url(HelveticaNeueLTStd-UltLt.otf);
}

O valor local() faz com que o browser procure a font no computador do visitante antes de executar o download da font que está no servidor.

Abaixo segue uma série de formatos que podem ser usados e que os browsers podem adotar:

String Font Format Common extensions
“truetype” TrueType .ttf
“opentype” OpenType .ttf, .otf
“truetype-aat” TrueType with Apple Advanced Typography extensions .ttf
“embedded-opentype” Embedded OpenType .eot
“svg” SVG Font .svg, .svgz

Compatibilidade

A compatibilidade é melhor do que você pode imaginar. Mesmo assim há alguns entraves que chateiam. Entretando, se você pratica Gracefull Degradation, vai achar uma maravilha.

As versões 7, 8 e 9 do Internet Explorer aceitam o @font-face apenas se a font for EOT.
Safari, Firefox, Chrome e Opera aceitam fonts em TTF e OTF.
Você pode converter suas fonts para EOT diretamente no Font Squirrel.

É sempre bom você não abusar. Uma porque o design não fica bonito se você utilizar muitas fonts diferentes. Outra que o site pode ficar carregado. Lembre-se que o browser carrega o arquivo da font para só assim aplicar no layout.

Veja um exemplo pronto.

Fonts pagas

O principal problema com o @font-face o download de font ilegal. Há uma pancada de fonts que são grátis, estas não há problema. Mas há uma outra grande parte que são pagas. O problema é que você tem a licensa de utilizar essa font nos seus projetos, mas não tem o direito de compartilhá-la ou dar para alguém. Quando você utiliza @font-face, você praticamente disponibiliza para o mundo o arquivo da font. Qualquer um pode fazer o download sem problemas. Por isso, cuidado com a font que você utiliza. Certifique-se de que ela é uma font gratuita.

Fonte: Tableless

2 Comentários

Arquivado em CSS . Cascading Style Sheets, XHTML

Semântica com o HTML5

Como podemos produzir código semântico utilizando HTML5? Essa é a pergunta que toda a comunidade de desenvolvedores gostaria de obter a resposta. Abaixo você vai encontrar um exemplo de código em HTML 5 onde o objetivo é tornar o código mais “usável”, acessível, utilizando poucas classes e ID’s.

Além disso, você vai esperar mais 10 anos para utilizar HTML até que os padrões finais sejam definidos ou vai ser mais um adepto já que o suporte a HTML 5 nos browsers está aumentando?

01.< !DOCTYPE html>
02.<html>
03. <head>
04. <meta charset="UTF-8" />
05. <title>Site Name &bull; Page Title</title>
06. </head>
07. <body>
08. <nav>
09. <h1><a href="/">Site Name</a></h1>
10. <ul>
11. <li><a href="#">Nav Link</a></li>
12. <li><a href="#">Nav Link</a></li>
13. <li><a href="#">Nav Link</a></li>
14. </ul>
15. </nav>
16. <header>
17. <p>Welcome to the site!</p>
18. <a href="#">Call to action!</a>
19. </header>
20. <section>
21. <aside>
22. <!-- Sidebar -->
23. </aside>
24. <article>
25. <header>
26. <h2>Article Name</h2>
27. <p>Posted by <cite>Kerrick Long</cite> on <time datetime="2009-06-21">June 21</time>.</p>
28. </header>
29. <p>Lorem ipsum dolor sit amet...Aliquam erat volutpat.</p>
30. <figure>
31. <img src="/images/eclipse.jpg" width="640" height="480" alt="Solar Eclipse" />
32. <label>Here we can see the solar eclipse that happened <time datetime="2009-05-28">recently</time>.</label>
33. </figure>
34. <p>Lorem ipsum dolor...</p>
35. </article>
36. </section>
37. <footer>
38. <p>&copy; <time datetime="2009-01-01">2009</time>, <cite>Site Owner</cite></p>
39. </footer>
40. </body>
41.</html>

Deixe um comentário

Arquivado em Acessibilidade na internet, Arquitetura da Informação, XHTML

A importância dos cabeçalhos HTML para a acessibilidade

Cabeçalhos em HTML são úteis e extremamente importantes para destacar todo o texto que atua como cabeçalho de alguma seção. Além de serem importantes para os mecanismos de busca são extremamente importantes para usuários que utilizam algum leitor de tela, pois eles auxiliam esses usuários na navegação dos cabeçalhos do documento.

Se você ficou curioso, basta dar uma olhada no vídeo abaixo:

Fonte

Deixe um comentário

Arquivado em Acessibilidade na internet, XHTML

HTML5: a cara da próxima web

Nova versão da linguagem incorpora em seu código funções para áudio e vídeo, APIs e funcionalidades do Flash e Silverlight

Html 5

Html 5

Quem acessa a internet desde seu início comercial – meados dos anos 90 – acompanhou a evolução da rede mundial em diversos aspectos. Um dos pontos que mais sofreu mutações foi a interface: de páginas estáticas e meramente informativas, até interações complexas permitidas por meio de tecnologias como o Ajax. Por trás de todo esse desenvolvimento, está uma linguagem que poucos vêem, mas que é a base de um mundo de páginas da web: o HTML, casamento entre os padrões HyTime e SGML, que surgiu no início dos anos 90.

Depois de mais de dez anos do lançamento da última versão da linguagem, o HTML 4, o Web Hypertext Application Technology Working Group está dando os últimos passos para anunciar a tão esperada versão 5. A último draft foi anunciado no início do ano e as cerca de 500 empresas que participam do grupo devem enviar suas correções e sugestões até o final de junho de 2009. A partir daí, cria-se o padrão de fato para que aplicações e browsers possam se adequar às novas funcionalidades.

Novas funções

“A ideia é que ele seja liberado em 2010. O principal destaque do HTML 5 é a possibilidade de agregar no código comando para áudio e vídeo”, afirma Vagner Diniz, gerente geral do W3C Escritório Brasil, consórcio que define os padrões técnicos a serem utilizados na web. São comandos específicos no lugar das tags quebra-galhos usadas hoje em dia. As famosas object e embed poderão ser substituídas pelas etiquetas e , para inclusão dos respectivos objetos multimídia.

As novas tags trazem funções interessantes de maneira nativa, excluindo a necessidade de embutir elementos externos nas páginas. Funções obtidas com o uso de Ajax, como os movimentos de arrastar-e-soltar itens de uma página, poderão ser chamadas direto do código HTML. “O Javascript faz referência a elementos do HTML. Como o HTML terá novos elementos, então o Ajax também será aprimorado”, afirma Carlos Ceccone, analista de projetos do W3C.

Aplicações baseadas na web também serão mais ágeis, pois menos dados serão requisitados de servidores. O HTML 5 inclui a possibilidade de inserir APIs dentro do código. O acesso local às informações facilitará funções de cache, busca e o acesso off-line de serviços da web. O plugin Google Gears, por exemplo, já é compatível com HTML 5, assim como o Adobe Air. Mas o grande burburinho começou após a apresentação do novo Gmail para dispostivos móveis que já utiliza recursos do HTML5, como pode ser visto na apresentação do VP de engenharia do Google, Vic gundotra.

Diniz também atenta para a limpeza do código. Uma mesma página escrita em HTML 5 será bem mais simples do que a em HTML 4. Para o desenvolvedor, ficará muito mais simples de programar. É possível ver uma comparação de uma página de um blog escrita nas duas versões da linguagem no site Hobo Web.

Outra novidade é a incorporação de funcionalidades de tecnologias para gráficos dinâmicos, como o Flash e o Silverlight. Será possível criar animações com gráficos vetoriais diretamente no código, com o uso da tag <canvas&gt. A web semântica também começa a aparecer no HTML 5 – em vez de enxergar um elemento título, legenda ou parágrafo, a linguagem conseguirá interpretar o conteúdo que está naquela caixa de texto.

Navegadores compatíveis

Mas não basta o padrão HTML chegar em sua versão 5 e os browsers não se adequerem para conseguir a renderização completa das novas funcionalidades. A página na Wikipedia lista não só as novidades do HTML 5, como mostra qual ferramenta já faz a renderização adequada das novidades.

Cada browser tem seu engine ou adota um já existente. O Internet Explorer, inclusive na recente versão 8, utiliza o Trident. O Gecko, da fundação Mozilla, é utilizado pelo browser Firefox, entre outros; o WebKit, desenvolvido pela Apple a partir do engine de código aberto KHTML, é usado no Safári, no Google Chrome e nos celulares Nokia. Já o Presto é a ferramenta do Opera.

O W3C disponibiliza regurlarmente um estudo com comparações entre HTML 4 e 5, na medida em que a recomendação HTML 5 avança.

Fonte

Deixe um comentário

Arquivado em Acessibilidade na internet, Arquitetura da Informação, Browsers, Tecnologia e sistemas, Usabilidade na internet, XHTML

Folha de estilos default do W3C

W3C

Muitos desenvolvedores desconhecem que existe no W3C uma folha de estilos padrão para o HTML4 com base em uma análise em User Agents para ser usada como referência para desenvolvedores, até eu desconhecia sua existência, descobri apouco em uma de minhas insessantes buscas por conhecimento. Ela se resume nas seguintes especificações:
view plaincopy to clipboardprint?

1.      html, address,
2.      blockquote,
3.      body, dd, div,
4.      dl, dt, fieldset, form,
5.      frame, frameset,
6.      h1, h2, h3, h4,
7.      h5, h6, noframes,
8.      ol, p, ul, center,
9.      dir, hr, menu, pre   { display: block }
10.      li              { display: list-item }
11.      head            { display: none }
12.      table           { display: table }
13.      tr              { display: table-row }
14.      thead           { display: table-header-group }
15.      tbody           { display: table-row-group }
16.      tfoot           { display: table-footer-group }
17.      col             { display: table-column }
18.      colgroup        { display: table-column-group }
19.      td, th          { display: table-cell }
20.      caption         { display: table-caption }
21.      th              { font-weight: bolder; text-align: center }
22.      caption         { text-align: center }
23.      body            { margin: 8px }
24.      h1              { font-size: 2em; margin: .67em 0 }
25.      h2              { font-size: 1.5em; margin: .75em 0 }
26.      h3              { font-size: 1.17em; margin: .83em 0 }
27.      h4, p,
28.      blockquote, ul,
29.      fieldset, form,
30.      ol, dl, dir,
31.      menu            { margin: 1.12em 0 }
32.      h5              { font-size: .83em; margin: 1.5em 0 }
33.      h6              { font-size: .75em; margin: 1.67em 0 }
34.      h1, h2, h3, h4,
35.      h5, h6, b,
36.      strong          { font-weight: bolder }
37.      blockquote      { margin-left: 40px; margin-right: 40px }
38.      i, cite, em,
39.      var, address    { font-style: italic }
40.      pre, tt, code,
41.      kbd, samp       { font-family: monospace }
42.      pre             { white-space: pre }
43.      button, textarea,
44.      input, select   { display: inline-block }
45.      big             { font-size: 1.17em }
46.      small, sub, sup { font-size: .83em }
47.      sub             { vertical-align: sub }
48.      sup             { vertical-align: super }
49.      table           { border-spacing: 2px; }
50.      thead, tbody,
51.      tfoot           { vertical-align: middle }
52.      td, th          { vertical-align: inherit }
53.      s, strike, del  { text-decoration: line-through }
54.      hr              { border: 1px inset }
55.      ol, ul, dir,
56.      menu, dd        { margin-left: 40px }
57.      ol              { list-style-type: decimal }
58.      ol ul, ul ol,
59.      ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
60.      u, ins          { text-decoration: underline }
61.      br:before       { content: “\A” }
62.      :before, :after { white-space: pre-line }
63.      center          { text-align: center }
64.      :link, :visited { text-decoration: underline }
65.      :focus          { outline: thin dotted invert }
66.
67.      /* Begin bidirectionality settings (do not change) */
68.      BDO[DIR=”ltr”]  { direction: ltr; unicode-bidi: bidi-override }
69.      BDO[DIR=”rtl”]  { direction: rtl; unicode-bidi: bidi-override }
70.
71.      *[DIR=”ltr”]    { direction: ltr; unicode-bidi: embed }
72.      *[DIR=”rtl”]    { direction: rtl; unicode-bidi: embed }
73.
74.      @media print {
75.        h1            { page-break-before: always }
76.        h1, h2, h3,
77.        h4, h5, h6    { page-break-after: avoid }
78.        ul, ol, dl    { page-break-before: avoid }
79.      }

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th          { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: “\A” }
:before, :after { white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR=”ltr”]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR=”rtl”]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR=”ltr”]    { direction: ltr; unicode-bidi: embed }
*[DIR=”rtl”]    { direction: rtl; unicode-bidi: embed }

@media print {
h1            { page-break-before: always }
h1, h2, h3,
h4, h5, h6    { page-break-after: avoid }
ul, ol, dl    { page-break-before: avoid }
}

Teoricamente falando então essa folha de estilos então é para ser usada como base no desenvolvimento de browsers. Se todos os fabricantes de browsers utilizassem esse padrão, com certeza não teríamos mais que quebrar a cabeça para consertar erros bizarros em alguns browsers.

Para vocês verem a diferença que a entre as folhas de estilo, dêem uma olhada na folha de estilo padrão do Firefox 2 e Firefox 3. Não consegui achar a folha de estilos padrão do Internet Explorer para efetuar uma comparação, mas se alguém souber onde conseguí-la, eu agradeceria.

Fonte

Deixe um comentário

Arquivado em XHTML