webstandards « WordPress.com Tag Feed

Mit und ohne BOM

MR — Thu, 12 Nov 2009 14:16:26 +0000

Bei w3.org entdeckt. Allerlei belehrende Artikel über Zeichencodierung, utf-8 mit und ohne BOM, entities, …

Testing Adobe AIR applications with QUnit

Jonathan Lister — Wed, 04 Nov 2009 17:29:17 +0000

I’d like to say I always write tests before I write any JavaScript code… Those times when I do write tests, I use the QUnit framework, which is used to test jQuery, so pretty well-tested itself.

I’ve recently been putting together an Adobe AIR application using HTML, CSS and JavaScript (aka Web Standards), which is very empowering and everything, but turned out to be a little tricky to write tests for. All the interesting stuff I wanted to do through AIR’s window.runtime object, such as opening native windows and messing with dock icons, is missing from the browser if you’re trying to test the JavaScript components in isolation. The ideal would be able to run your QUnit tests within the AIR runtime itself.

Fortunately, it’s straightforward to create a test app that wraps the QUnit test runner in the AIR runtime and exercises your code. Here’s how I got going:

Setting up the file structure

The folder structure I am using for the AIR app is like this:

/myApp
   myApp.html
   myApp-app.xml
   /js
      myApp.js
   /css
      styles.css

The myApp-app.xml file is the “application descriptor” that AIR uses to create the .air package when you build the app.

I added two folders at the same level as /myApp, to contain the test framework and test code; the complete structure looks like:

/myApp
   myApp.html
   myApp-app.xml
   /js
      myApp.js
      AIRAliases.js
      jquery-1.3.2.min.js
   /css
      styles.css

/myAppTests
   runner.html
   tests.js
   myAppTests-app.xml

/qunit
   testrunner.js
   testsuite.css

Configuring the test app

The application descriptor for myAppTests is not very different from the descriptor for myApp; here they are:

myApp-app.xml:
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
    <id>examples.html.myApp</id>
    <version>0.1</version>
    <filename>myApp</filename>
    <initialWindow>
        <content>myApp.html</content>
        <visible>true</visible>
        <width>400</width>
        <height>800</height>
    </initialWindow>
</application>

myAppTests-app.xml:
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
    <id>examples.html.myAppTests</id>
    <version>0.1</version>
    <filename>myAppTests</filename>
    <initialWindow>
        <content>myAppTests/runner.html</content>
        <visible>true</visible>
        <width>400</width>
        <height>800</height>
    </initialWindow>
</application>

The main structural difference is that myApp-app.xml has an initialWindow.content property set to myApp.html, whereas myAppTests-app.xml refers to the test runner from a directory above: myAppTests/runner.html. This is needed because the test app needs to have its working directory set to the top-level of the file structure, otherwise runner.html won’t be able to get at all the files it needs in other directories (more below).

Putting the correct files in runner.html

Here’s a runner.html that works with the folder structure described above:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Test Suite</title>
		<link rel="stylesheet" type="text/css" href="../qunit/testsuite.css">
		<script src="../myApp/js/AIRAliases.js" type="text/javascript"></script>
		<script src="../myApp/js/jquery-1.3.2.min.js" type="text/javascript"></script>
		<script src="../qunit/testrunner.js" type="text/javascript"></script>
		<script src="../myApp/js/myApp.js"></script>
		<script src="tests.js" type="text/javascript"></script>
	</head>
	<body>
		<h2 id="banner"></h2>
		<h2 id="userAgent"></h2>
		<ol id="tests"></ol>
		<div id="main"></div>
	</body>
</html>

Running the test suite in debug mode

The easiest way to run the test suite is to use the built-in Adobe Debugger, which lets you test your app without having to build it into an AIR package:

adl myAppTests/myAppTests-app.xml .

Don’t forget the ‘.’ character on the end – this tells the debugger to run with the top-level directory as the working directory – without it, the default is the same directory as XML file.

Exemplos interativos

Aurélio — Fri, 30 Oct 2009 19:50:29 +0000

Sabe quando você está lendo um livro técnico e de repente se perde na teoria? Nesse momento, parece que as frases estão emboladas, você relê o parágrafo e aquilo já não faz mais sentido. Cadê mesmo aquele tal fio da meada?

Mas você insiste, continua a leitura, mesmo não tendo mais aquela confiança de que está entendendo o assunto. Nesse momento tenso de dúvida e indefinição, quem é que chega para salvar o dia?

Eles, os exemplos!

Se “uma imagem vale mais do que mil palavras”, em um livro técnico, um exemplo pode valer mais do que mil parágrafos.

O exemplo é a sua conexão com o mundo real, a aplicação prática daquele conceito teórico obscuro que você acabou de ler e (tentar) entender. Em vez de dizer “você deve fazer isso e isso e depois isso”, o exemplo te diz “olha, é assim que se faz”.

Um livro técnico só de exemplos, porém, seria incompleto pois não te explica os porquês.
Por outro lado um livro técnico só com teoria e sem exemplos, bem… nem deveria ser publicado em primeiro lugar

Certo, então é necessário que o livro tenha ambos, a teoria e os exemplos, para que o leitor entenda os conceitos e saiba como aplicá-los na prática.

Por falar em prática… Ela é parte importantíssima do aprendizado. Somente com a prática são fixados na mente os conceitos recém-aprendidos. Então é preciso testar os exemplos, brincar com eles, fazer variações, tentar melhorá-los, ver o que dá certo e o que é errado.

É brincando que se aprende

Pensando em tudo isso, percebo que essa parte de “brincar” com os exemplos pode ser algo difícil para os leitores do livro de Expressões Regulares. Você está lá lendo o livro, chegou na página 41 e é mostrado o primeiro exemplo com a expressão “fala.“. E agora, como testar isso em seu computador?

egrep na linha comando?
usar o Vim?
abrir o OpenOffice?
usar algum testador online?
fazer um programa em sua linguagem favorita?

Fora a dúvida na escolha da ferramenta, ainda há o incômodo de ter que digitar todo aquele parágrafo que faz parte do exemplo, para conferir que se a expressão casou mesmo o que o livro diz que ela casou. E se você digitar algo errado no texto ou na expressão, o exemplo pode não funcionar e seu aprendizado ficará prejudicado.

Para resolver esses problemas e facilitar a vida do leitor, criei uma ferramenta nova lá no site do livro, chamada exemplos interativos.

Exemplos interativos do livro Expressões Regulares

É um testador online de expressões regulares, que testa suas expressões em tempo real, enquanto digita. Além disso, ainda traz cadastrados todos os exemplos do livro, com indicação de qual página ele se encontra. Assim, com um clique, você pode carregar qualquer exemplo do livro e brincar com ele: mudar o texto, mudar a expressão e ver o resultado instantaneamente.

Se você vai ler ou já está lendo o livro, experimente!

Carregue os exemplos aí no seu navegador e vá testando cada um à medida que você vai lendo o livro. Assim, você aprende, pratica e fixa os conhecimentos de uma só vez!

Depois me diz se foi bom pra você, tá?

Die Zukunft von HTML5

jeswerk — Wed, 14 Oct 2009 08:49:21 +0000

Wie im Carsonified Blog berichtet hat Bruce Lawson auf der “Future of Web Apps – London 2009” eine Einführung in HTML5 gegeben und wie es zukünftig eingesetzt werden könnte. Da HTML5 ja auch gerne als “Web Applications 1.0″ bezeichnet wird, ging er dann auch auf diesen Aspekt der Spezifikation ein. Folgende Themen wurden behandelt:

Dynamic images and graphs with canvas
Eliminating much forms validation with webforms 2.0
Local storage automagically saving your data
Geolocation
Building toolbars and menus

Hier gibt es das Video dazu:
The Future of HTML5 by Bruce Lawson from Carsonified on Vimeo.

Und hier die Slides:

@joeloverton hat den Vortrag auch transkribiert. Das entsprechende Dokument findet sich hier: http://joeloverton.com/html5/

Auf carsonified.com gibt zudem viele nützliche weiterführende Inhalte zu dem Thema.

Webdesign Geständnisse

Ayoka — Sun, 13 Sep 2009 16:23:44 +0000

Auf der Suche nach netten Bildchen für den Webdesignunterricht bin ich über die Fotoserie Web Design Confession Booth gestolpert. Toll, dass alle noch immer die gleichen gemeinen Sachen machen.

Web Design Confession Booth (viii) von allaboutgeorge

Web Design Confession Booth (xv) vn allaboutgeorge

Web Design Confession Booth (xvi) von allaboutgeorge

Ach übrigens, ich mag <br /> auch und manchmal sind meine Navigationen keine Listen. Ich geh dann mal in meine Ecke und schäm’ mich.

Exemplu de Director Romanesc plin de cretini facut de cretini pentru cretini

viataprinromania — Mon, 31 Aug 2009 19:05:06 +0000

Exemplu de director cretin … ce dracu au frate cu aia de vor sa inscrie site uri cu papusele barbie ? Or avea vreun fetis astia ? “Si alte tampenii” eu unu daca as avea site cu papusi barbie i-as da in judecata ! ))) Cam tampitei astia de webstandars pacat de ei ca site ul ala al lor chiar e ok validat w3c samd dar se pare ca daca esti si destept poti fi si imbecil in acelasi timp

Diminuindo o tamanho de seus arquivos CSS

lucasvgr — Fri, 21 Aug 2009 04:52:37 +0000

Se um site responde rápido as solicitações do usuário, a tendência é que ele navegue por mais tempo e em maior profundidade no site. Quando se codifica um belo site utilizando os recursos do CSS, o que pode acontecer no final é ter um arquivo grande, demandando várias requisições ao seu servidor, causando uma possível perda de tempo no carregamento.

Existe uma maneira prática de diminuir o tamanho de seus arquivos CSS sem perder tempo utilizando expressões regulares no Dreamweaver para fazer este trabalho.

O Clean CSS permite reduzir seus arquivos CSS em vários tipos de compressão. São compressões pré-configuradas onde o nível mais baixo permite que seu arquivo seja bem legível após o procedimento e o nível máximo de compressão faz seu arquivo ficar ilegível, porém mantendo suas funcionalidades.

Com o Clean CSS você também pode personalizar a compressão da sua maneira. Isso é muito bom pois lhe permite testar todas as formas possíveis facilitando sua tomada de decisão entre as opções.

O ideal para quem for utilizar o nível máximo de compressão é que guarde uma cópia do arquivo CSS original para se precisar realizar qualquer tipo de edição futura.

Até o próximo post!

MoneyLog Experience 4

Aurélio — Sat, 15 Aug 2009 16:07:54 +0000

Veja todos os anúncios de versões do programa:
MoneyLog Experience 1
MoneyLog Experience 2
MoneyLog Experience 3
MoneyLog Experience 4

MoneyLog Experience 1

MoneyLog 1 — AMARELO/2006 — A única opção era de mostrar as parciais mensais. Fora isso tinha a caixa de busca por texto. E só!

MoneyLog Experience 2

MoneyLog 2 — LARANJA/2007 — Ganhou o extrato mensal (chamado Relatório Geral) e opção de mostrar somente os meses recentes. O texto de ajuda agora ficava escondido na interrogação e a busca agora sabia procurar por Expressões Regulares!

MoneyLog Experience 3

MoneyLog 3 — ROXO/2007 — Suporte a tags (menu à esquerda e coluna nova no extrato), busca com a opção de excluir, linhas numeradas no extrato.

MoneyLog Experience 4

MoneyLog 4 — VERMELHO/2009 — Esconder lançamentos futuros, filtro por valor, coluna nova Acumulado, lançamentos parcelados e recorrentes, tags foram para o rodapé...

...gráficos, mínima, máxima, coluna nova de porcentagem, extrato anual, arquivo TXT separado, e várias outras novidades!

Versão 4?

Isso mesmo, acabou de sair do forno a quarta versão do camaleônico gerador de extratos MoneyLog Experience! \o/

Legal ver assim, a evolução do programa.

Não me imagino usando hoje a primeira versão, de tão limitada que era. Mas na época eu curti. Depois, conforme fui usando, senti falta de outras coisinhas, então o programa foi crescendo, crescendo, e hoje estamos aqui, testemunhando o nascimento de mais uma versão.

Eu estou BEM orgulhoso desse filhote, que creio que agora chegou num ponto que posso chamá-lo de maduro. Hoje ele tem a maioria das funcionalidades que eu preciso para gerenciar minhas finanças de maneira fácil e rápida.

Mas claro, ainda tem várias outras coisinhas legais para adicionar, então a versão beta não para.

Eu quase que diariamente anoto os gastos, e a cada 15 dias mais ou menos eu e a Mog olhamos os extratos do MoneyLog para acompanhar como andam nossos dinheirinhos. É massa

Esta versão nova traz muitas novidades, que foram aperfeiçoadas com a ajuda dos usuários, interagindo lá no twitter. Gostei muito da experiência, e acho que vou expandi-la para os outros programas também. Valeu mesmo!

Que tal aproveitar o final de semana para dar uma olhada em suas finanças e atualizar seu MoneyLog para a versão nova? Ou se você ainda não o utiliza, que tal experimentar?

Vai lá:

Guia completo: Novidades da versão 4
Teste e baixe o programa: Moneylog Experience 4

Em tempo: a cor vermelha é em homenagem à crise financeira mundial

Web Design Mistakes

dbaoracleinfnet — Fri, 31 Jul 2009 21:32:46 +0000

Dr. Dave Chaffey, autor do E-consultancy’s Best Practice Guides, oferece dicas úteis para o trabalho de web design e discute alguns princípios comuns para evitar armadilhas. Fala sobre SEO e Landing Pages.

Bom vídeo,
Instituto Infnet

Conversão de charset automática com PHP

rafsalvioni — Mon, 18 May 2009 20:34:23 +0000

Qual desenvolvedor nunca esbarrou com o problema do charset da página? Se ainda não esbarrou, vai esbarrar, e logo…

O W3C prega a idéia de que devemos desenvolver as páginas com charset UTF-8, o que já deixaria a página preparada para eventuais internacionalizações do site.

Porém, para nós brasileiros que convivemos com textos com cedilhas, acentos agudos, circunflexos, crase etc., escrever textos em UTF-8 pode ser uma dor de cabeça. Para os desenvolvedores que criam suas páginas com editores que suportam UTF-8, isso não é grande problema, mas outros não o fazem.

Pensando nisso, bolei uma forma rápida de converter o charset das minhas páginas de modo automático, podendo assim utilizar qualquer editor de texto disponível. A partir do recurso de controle de saída de um script PHP, isso fica fácil de ser implementado.

Criei duas funções: a primeira verifica se uma string é uma string UTF-8 válida. A segunda, faz a conversão própriamente dita.


<?php

/**
* Informa se a string está no formato UTF-8.
*
* @param  string $str String
* @author bitseeker
* @see    http://br.php.net/manual/pt_BR/function.utf8-encode.php#85866
* @return bool
*/
function is_utf8($str) {
    return !!preg_match('%^(?:
        [\x09\x0A\x0D\x20-\x7E]            # ASCII
        | [\xC2-\xDF][\x80-\xBF]             # non-overlong 2-byte
        |  \xE0[\xA0-\xBF][\x80-\xBF]        # excluding overlongs
        | [\xE1-\xEC\xEE\xEF][\x80-\xBF]{2}  # straight 3-byte
        |  \xED[\x80-\x9F][\x80-\xBF]        # excluding surrogates
        |  \xF0[\x90-\xBF][\x80-\xBF]{2}     # planes 1-3
        | [\xF1-\xF3][\x80-\xBF]{3}          # planes 4-15
        |  \xF4[\x80-\x8F][\x80-\xBF]{2}     # plane 16
    )*$%xs', $str);
}

/**
* Manipulador de saídas.
*
* Converte saídas em texto para UTF-8 (somente se o content-type a ser enviado
* for do tipo text)
*
* @param string $string String
* @return string
*/
function utf8_output_handler($string)
{
    $headers = implode("\n", headers_list());
    if (php_sapi_name() != 'cli' && (preg_match('/Content-Type:\s+text\/([^\s]+)/i', $headers, $match) || !preg_match('/Content-Type:/i', $headers))) {
        $mime = !empty($match) ? $match[1] : 'html';
        if (!is_utf8($string)) {
            $string = utf8_encode($string);
        }
        header("Content-Type: text/$mime; charset=UTF-8");
    }
    return $string;
}
ob_start('utf8_output_handler');

?>

podcast Empfehlung

orgeltom — Fri, 15 May 2009 20:55:45 +0000

Ich möchte euch einen Podcast empfehlen, falls ihr denn eh nicht schon kennt:
http://www.technikwuerze.de

Das ist der (in) offizielle Podcast der Webkrauts.
http://www.webkrauts.de/

viel Spass beim Anhören

How Twitter got bitten

dozykraut — Sun, 12 Apr 2009 19:51:55 +0000

Let me put it mildly.

There was a certain laxness on the part of the coders at Twitter. They simply disregarded Rule 1

Rule 1
Regard any user-generated input as tainted until proven benign.

Above a certain volume of traffic taint checks can become rather resource intensive – to the point where the overhead becomes prohibitive. For this situation existeth

Rule 2
If you can’t prove your user’s input as benign –> escape the living shit out of it by default!

No script gets away without comparisons, assignments or plain old strings – plus certain special chars whose absence will trigger a compiler error.

By simply HTML-escaping all user-generated input you disable all comparisons of size, boolean logic and bit-shifts, as well as sending all strings to the nirvana for unterminated literals. For good measure also encode any instance of = and you have nailed assignments as well.

Life would of course be a lot easier if browsers were not as lenient as they are. The recent XSS exploit that bit Twitter wasn’t even encapsulated as CDATA, yet browsers still ran it instead of throwing an XML parser error, as they should have done in the face of unescaped comparison operators, bare ampersands and other garbage in the middle of an XHTML doc.

90% of all websites would either break or vanish completely if browsers enforced standards. About time they did – for all our safety.

Update, Mon, 13 Apr 2009 21:06:13 +0200
As usual users of Firefox who surf with the NoScript Add-on need not worry. By default NoScript nails the Twitter worm.

Coisinhas novas: Subwaytor, Tabuada e Relógio

Aurélio — Wed, 01 Apr 2009 02:37:01 +0000

Oi pessoal,

Após um longo período intocado, o site www.COISINHA.com.br ganhou uma atualização merecida.

O quê, você nem se lembra mais que site é esse? Tá, eu refresco tua memória: é a casa do MiGuXeiToR, do Engripeitor e do Embriagueitor. Refrescou?

Eu fiz esse site para abrigar alguns brinquedos que eu faço em JavaScript (e poder ganhar uns trocos com o AdSense, claro). Mas como apareceram outras coisinhas mais importantes para fazer neste meio de tempo, sabe como é…

Mas tá, lamentações à parte, o que importa é que temos três brinquedos novos* no parquinho.

* Seminovos na verdade, pois eu fiz todos eles em 2007/2008 e os coitadinhos ficaram na fila esperando a sua vez de serem apresentados ao mundo

SUBWAYTOR

Esse os leitores antigos do blog já conhecem! Quer dizer, pelo menos a versão inicial dele.

Lembra daquele texto que contei que fui com a Mog no Subway, e de como é complicado escolher seu sanduíche? Com o bate-papo nos comentários surgiu a ideia de fazer um programinha que montasse o sanduíche automaticamente, escolhendo os ingredientes ao acaso. Surgiu então a zzsubway.

A evolução do programa é o Subwaytor, que também mostra fotinhos de sanduíches apetitosos

Além disso o programa possui uma inteligência artificial avançada, que com o mero contato de seu dedo na tela do computador, consegue analisar suas características biológicas e escolhe a melhor combinação de ingredientes para manter a sua saúde em dia.

Mais informações lá no site do Subwaytor. Ah, e leia o rodapé

TABUADA

Uma tabelinha interativa que mostra a tabuada dos números de 1 a 10.

Não consigo me lembrar porque fiz esse programa, se foi uma ideia que tive ao acordar (dessas ideias tolas que na hora do almoço já foram embora) ou eu estava testando alguma coisa com CSS+JavaScript.

O fato é que eu achei legal destacar linhas e colunas com o movimento do mouse, então a tabuada veio de lambuja

De qualquer forma, talvez possa servir para crianças como uma alternativa aos livros chatos. Talvez não. Sei lá. Enfim. Se você achar um uso pra isso me avise

RELÓGIO

Esse eu fiz em novembro de 2007 (!!), o coitado ficou mais de um ano esquecido na geladeira. Mas é meu brinquedo preferido.

A ideia não é minha, eu lembro de ter visto algo parecido em algum blog ou site ou… ~~Nunca vou saber.~~ (o Diogo achou, era um screensaver joiado!) Mas como todo bom programador, ao ver o brinquedo a primeira coisa que pensei foi: como eu faço um desses?

O mais complicado foi aprender como definir um timer em JavaScript (obrigado Google), pois o código mesmo acabou saindo em poucos minutos. Nada de mais: colocar e apagar classes nas palavras, cores no CSS e tá feito. Veja o fonte da página se ficou curioso(a).

Mas é incrível como essas coisinhas (taí o porquê do nome do site!) são prazerosas de fazer. É um desafio que aparece do nada no seu dia, cai no seu colo e você simplesmente não consegue dizer não. Parei tudo o que estava fazendo para poder programar o brinquedinho. Isso é tãaaaao legal

Veja lá o resultado: relógio com palavras.

Eu gostei, achei bonito e chique.
E nerd, claro

Bem era isso.

Aceito sugestões de melhorias, e de coisinhas novas também!

Sem medo de bugs: aplicando CSS para IE6, IE7 e outros browsers ...

accsdesigner — Fri, 20 Feb 2009 17:11:00 +0000

Se você tem problemas para lidar com CSS para o IE6 e IE7, tendo que escrever hacks, gabiarras e etc … bagunçando todo o seu código, veja abaixo como separar tudo bonitinho no seu projeto …

<!–[if !IE]><!–>
<link rel=”stylesheet” href=”my_gorgeous_layout.css” type=”text/css” media=”screen” />
<!– <![endif]–>

<!–[if gte IE 7]>
<link rel=”stylesheet” href=”my_gorgeous_layout.css” type=”text/css” media=”screen” />
<![endif]–>

<!–[if lte IE 6]>
<link rel=”stylesheet” href=”textonly.css” type=”text/css” media=”screen” />
<![endif]–>

Veja mais no post original …
http://www.smashingmagazine.com/2009/02/20/ask-sm-css-smooth-page-scrolling-divs-of-equal-height-dealing-with-ie-6/

Outras referências para cross-browser …
http://www.456bereastreet.com/archive/200602/writing_crossbrowser_css/
http://friendlybit.com/css/cross-browser-strategies-for-css/

O que é Tableless?

dudesigner — Mon, 09 Feb 2009 23:54:37 +0000

Forma de desenvolvimento de sites que não utiliza tabelas para disposição de conteúdo na página, poi

Four standard methods of RESTful applications

twobenches — Thu, 29 Jan 2009 16:24:29 +0000

Four methods that manage RESTful Web apps:

GET
PUT
POST
DELETE

From Stefan Tilkov’s intriguing introduction to REST

SEO e CSS: o casalzinho perfeito

Ana Martins — Sun, 25 Jan 2009 20:30:38 +0000

Uma das coisas que eu percebi assim que comecei a estudar Marketing de Busca foi que tudo começa com uma boa base nos padrões. Webstandards, CSS com web semântica. Tudo certinho como tem que ser. Esse é o primeiro passo para conseguiur mais facilmente um lugar legal na SERP.

Por causa disso, é preciso que tudo seja descrito através de texto. Os mecanismos de busca secomportam mais ou menos como uma pessoa cega usando um leitor de tela: é preciso que tudo seja descrito, para que ele saiba o que tem ali. É importante ser acessível para todas as pessoas e todos os robôs dos buscadores também. Portanto, descreva tudo que não for textual sempre que possível.

Títulos. Os mecanismos de busca entedem que o que está no título de uma página são palavras bem relevantes para o assunto que está sendo tratado ali, e dão maior peso para links onde as palavras buscadas estão entre as tags title.

Head tags. São as h1, h2, h3, até h6. Use-as para que elas são feitas: títulos, seguindo a ordem de importência dos números. H1 é usado para título de página, h2 para subtítulos e por aí vai.

Negrito. Os buscadores vêem as palavras negritadas em um texto como importantes. Então colocar alguma palavra chave em negrito de vez em quando não faz mal a ninguém. Mas sem exagero.

Meta description. Alguns buscadores exibem essa tag na página de resultados da busca. Então é preciso descrever o conteúdo da página (em aproximadamente 150 caracteres) de forma clara e objetiva, lembrando sempre das palavras-chave. Evite repetir a mesma descrição em toda as páginas do site. Tente fazer uma descrição para cada página.

É importante ter tudo isso em mente, mas é sempre bom nunca esquecer do usuário, das pessoas que irão buscar seus links. Os buscadores dão muito valor a isso.

Então, nada de fazer gambiarras em geral para ficar em primeiro. Eu já disse isso antes, mas não custa repetir: ficar em primeiro é só uma consequência. Conteúdo de qualidade e bem pensado, em páginas com os padrões bem aplicados, garantem muito mais que isso: garantem respeito perante os usuários. A web não é feita de bots, é feita de pessoas.

Dealing with IE6? Use IE7-js and rest easy

Jon Karna — Thu, 04 Dec 2008 20:31:00 +0000

Developing websites is something that I enjoy doing, except when it comes to getting them to display well in IE6 as well. I would like to just not support IE6, but many of our clients are still using this browser. I don’t understand why people still use IE6, but they do.

For a majority of the last year, I have been using Dean Edwards IE7-js script. This script makes MSIE behave like a standards-compliant browser. I conditionally load this script when the browser is IE6 and below. This script does a great job and I owe many restful nights to its existence. I followed Dean Edwards’ blog for a long time after discovering his IE7-js script. Unfortunately, he hasn’t posted anything since March.

There are only a few things that I ran into while using this script. I can’t describe some of the little things that I used to run into while using this script, because I have solved those problems too long ago. Here are some of the common problems that I run into:

The noticable transition during page load
Problems with table column widths doubling
Few box model problems

Solutions to these problems:

In my case, I used to enjoy using the > selector a lot. I also liked making [type=text] and multiple class css definitions. The IE7-js script can fix these problems, but it adds to the amount of work the script has to do. This leads to longer load times in IE6 and bigger notices in movement of elements after the script finishes. Therefore, in addition to changing me styles, I also added a IE6 specific css definition, #container {display: none;}, that hides everything inside of my main container and inserted a line of code into the IE7-js script, document.getElementById(“container”).style.display = “block”. This masks the transition so that the user doesn’t have to witness the massacre that is about to happen. They get to see the background for that second of reorganization.

Never found a direct soltuion to this problem. I didn’t really understand why this was happening sometimes, but this was usually solved by IE6 specific css definitions. As my ability to escape tables grew, this became less of a problem.
This problem occurs in a few places per website. I don’t know why or how it chooses its victims, but it happens. Usually a few IE6 specific css definitions to specify a width solves this.

These problems/issues are not that at all. They are little compared to the annoyance of dealing with IE6 without Dean Edwards IE7-js script.

[Weihnachten] Adventskalender im Internet. Eine Chance für Weblogs.

Marius — Tue, 02 Dec 2008 11:32:25 +0000

So richtig glauben kann ich es noch nicht. Heute ist bereits der 2.Dezember. Wir befinden uns mitten im Auge des Weihnachtszeitsorkans. An den Fenstern der Kinderzimmer hängen kleine mit Süßigkeiten gefüllte Stiefel, die von 1 bis 24 durchnummeriert sind.

Und ganz ehrlich, ich finde es klasse. Da ich nicht mehr zu Hause wohne und meine wundervolle Mama, meine Stiefel nicht mehr füllt, stürze ich mich auf die Adventskalender und Weihnachtskalender im Internet. Hier ein kleiner Überblick über meine Lieblingskalender. An den ersten beiden Kalendern bin ich sogar direkt beteiligt.

I-SHIN Weihnachtskalender – hier gibt es jeden Tag ein neues Bild, ein Video oder eine Information. Dieser Weihnachtskalender wird von mir betrieben und soll die Nutzer_innen der Internetseite gut unterhalten. Mehr eigentlich nicht
Adventskalender der Genderbibliothek – hier gibt es jeden Tag eine neue Information zur Frauen- und Geschlechterforschung. Gestern waren es noch die Fachzeitschriften, was es heute wird, weiß ich noch nicht. Wenn alle 24 Tage durch sind, bin ich sicherlich gut über die Möglichkeiten der Literaturversorgung für die Gender Studies informiert.
Adventskalender der Webkrauts - Die Vereinigung von Autor_innen setzt sich im diesjährigen Adventskalender für die “die Vorteile der Webstandards” ein und bestückt den Kalender jeden Tag mir wunderbaren Denkanstößen.

Alle, die nicht mehr zu Hause wohnen und keinen Adventskalender haben, finden im Netz eine Menge Möglichkeiten sich weihnachtlich einzurichten.

Alle die es dieses Jahr verpasst haben. Es lohnt sich. Ein Adventskalender ist eine wunderbare Aktion um die eigenen Leserinnen weihnachtlich zu unterhalten.

Fröhliches Türchenöffnen wünscht,
Mari*us

PS: Zu den Weihnachtsfiguren, die Kritzel und ich gestaltet haben, kommt noch ein vollständiger Eintrag.

Novo ícone-logotipo das Funções ZZ

Aurélio — Wed, 13 Aug 2008 05:09:54 +0000

Bem pessoal, terminou mais uma barbada aqui do blog. Será que você foi o ganhador o livro amarelão? Vejamos…

Durante uma semana, 15 pessoas participaram, enviando um total de 34 ícones para as Funções ZZ!

As propostas foram bem variadas, algumas apenas com o ZZ, outras com o nome completo, teve desenho de canivete, de monitor e até de um carinha dormindo em seu travesseiro Confira quais foram todos os ícones enviados.

Todos os ícones que participaram da barbada

A escolha não foi fácil, fiquei em dúvida entre cinco finalistas. Então apliquei os ícones no site, sob fundo branco, preto, em vários tamanhos. O quesito flexibilidade contou bastante, pois o ícone precisava escalar desde o tamanho 16×16, para o favicon do site, até o 256×256 para o ícone do programa.

O grande vencedor foi… — rufos na caixa… TRRRRRRRRRRR — o ícone do Leonardo Boiko:

Elegante e de uma simplicidade admirável, ele conseguiu resumir a idéia do programa em apenas quatro caracteres, com as chaves representando o conceito de funções no Bash. O toque artístico ficou na escolha da fonte, nos tamanhos e posicionamento dos caracteres. Com a versatilidade de ser identificado em qualquer tamanho, ainda tem a vantagem aceitar qualquer combinação de cores para os seus componentes.

Esta proposta identificou tão bem as funções, que além de ícone, também vai ser o logotipo oficial.

Se você tem um site ou blog, e tem um espacinho sobrando por lá, que tal colocar o novíssimo icone/logo apontando para o site das funções? Assim ganhamos mais usuários e colaboradores! Como o formato é simples e a escolha de cores traz várias possibilidades de combinação, resolvi fazer um logomático, que é uma pagininha bacana onde você pode montar seu próprio logo na hora. É divertido, experimente!

Faça seu próprio ícone das Funções ZZ!

Um outro desenho que eu gostei muito, mas que não serviria para ícone por não ser muito escalável, foi o canivete enviado pelo Henrique Araujo. Resolvi aproveitá-lo para ilustrar a página principal do site, assim ela fica mais estilosa. E com isso o Henrique também vai ganhar um exemplar autografado do livro amarelão.

Isso mesmo, nessa barbada saíram dois livros rabiscados!

Meu MUITO OBRIGADO a todos que participaram! Seus nomes foram colocados na seção de agradecimentos do site e seus trabalhos registrados na página do concurso.

Leonardo e Henrique, parabéns! Vou entrar em contato por e-mail. Mas já aviso que vocês vão ter que esperar alguns dias até o livro novo chegar aqui em casa, para eu poder rabiscar e enviar para vocês. E é Matinhos, sabe como é, demora um pouquinho

txt2tags completa 7 anos

Aurélio — Sun, 27 Jul 2008 00:20:00 +0000

exTra! eXtra! nesTe dia 26 Tem AlGuém de aniverSário!

hoje é dia de fesTa
é com eXtrema alegria
que Trago a grande novidade

o txt2tags completou sete anos de existência!

nerds das anTigas, chamem o lynx
moderninhos, prepArem o firefox
vão buscar aGora o seu presente
a verSão nova 2.5!

Saiu a versão nova 2.5 do txt2tags! Mas esta não é uma versão qualquer, ela é uma versão especial de aniversário. Para comemorar esta incrível marca de sete anos de vida, tão difícil de se atingir com um software livre feito nas horas vagas, quem ganha o presente é você.

Não é um, nem dois, mas são três formatos novos prontinhos para serem usados:

Se você vai escrever um artigo para a Wikipedia, atualizar a documentação online do seu programa hospedado no Google Code ou editar uma página no formato DokuWiki, o txt2tags é seu amigo.

Continue usando as **marcas** //que// __você__ ``já`` conhece e fique tranqüilo que o txt2tags se encarregará de convertê-las para estes formatos novos. Os códigos para a opção -t são wiki, gwiki e doku. Divirta-se!

Por falar em marcas, já teve a necessidade de ~~riscar~~ uma palavra? Agora você também pode fazer isso no txt2tags, com a novíssima marca dos hífens, --assim--. Simples, não?

Ainda há outras melhorias como a nova interface PHP, suporte mais robusto ao UTF-8, links locais no LaTeX, ferramentas novas e man page traduzida para chinês (Eu sabia que você ia gostar dessa!)

Outra novidade é um guia que ensina como adicionar um formato novo ao txt2tags. Que tal colaborar com o projeto, fazendo o suporte a algum tipo novo de documento? Não é difícil!

Por falar em colaboração, esta versão nova foi patrocinada por uma generosa doação do usuário dinamarquês Dmitri Popov, que mantém um site de manuais online que já ajudou dezenas de projetos livres. Muito obrigado Dmitri!

Se você já é usuário do txt2tags, atualize-se.

Se você ainda não o conhece, experimente agora mesmo, pela Internet.