Web Design Curitiba | Web Designer | Websites | Sistemas Web | Portfólio - Portfólio | Designer | XHTML | CSS | Tableless | Web Standards

A Conferência Web W3C Brasil foi criada para oferecer ao público brasileiro um amplo fórum anual de discussão e debate sobre a evolução da Web, a padronização de suas tecnologias e o impacto dessas tecnologias na sociedade e na cultura. A Conferência reunirá pesquisadores, desenvolvedores, usuários, empresas, agências digitais, mídia e todos aqueles que são apaixonados pela Web e que têm algo a oferecer, usar e debater.

A 1a. Conferência Web W3C Brasil 2009 será realizada em São Paulo, SP, nos dia 23 e 24 de novembro, no Blue Tree Towers Morumbi no bairro do Brooklin. Acesse os links para obter informações sobre o local, hotéis da região, chamada de trabalhos ou sobre como se inscrever para participar da conferência da web brasileira.

Chamada para trabalhos

Você pode ser um palestrante da 1a. Conferência Web W3C Brasil! Se você tem um caso prático e inovador de uso da web, ou fez uma pesquisa cujos resultados merecem ser compartilhados com toda a comunidade web brasileira, ou ainda tem o “pulo do gato” para ensinar em um tutorial, então atenda a nossa Chamada de ‘Papers’, Casos de uso e Tutoriais.

O Comitê de Programa vai selecionar as submissões mais relevantes para compor a programação da Conferência. Mais detalhes em Chamada de trabalhos.

Entre na comunidade da conferência no Facebook e fique por dentro.

Referência: Diego (www.tableless.com.br).

O papel desempenhado pelo (x)html e css para designers que fazem web parece bastante óbvio para muitos. Porém, ainda há uma grande quantidade de estudantes e envolvidos que relutam quando chega o momento de aprender estruturação.

O que é estruturação?

Trata-se de um termo comum na profissão, quer dizer fazer o código (x)html, desenvolver o css para formatação visual. Normalmente, parte-se de um layout pronto e aprovado, feito em algum programa para criação visual (o photoshop é o favorito). Assim, com os aspectos visuais definidos, a tarefa do profissional será a de transformar aqueles lindos arquivos .psd em páginas web que funcionem corretamente, de maneira satisfatória.

É realmente necessário saber (x)html e css?

Podemos citar uma analogia simples: trabalhar com web e não conhecer essas linguagens, equivale a uma viagem de, por exemplo, seis meses na Inglaterra, sem o mínimo conhecimento de inglês. Por mais que você se muna de todo o aparato-idiomático-fast-food (canetas com scanners tradutores, e-books, palms, smartphones, notebooks), chegará o momento em que sua falta de conhecimento o colocará, obviamente, em situações mais do que constrangedoras.

Portanto, trabalhar com web sem conhecer a sua língua-mãe é praticamente impossível, pois, apesar de haver diversos recursos para desenvolver (x)html e css sem digitar linhas de código, fatalmente chegará o momento em que a falta de conhecimento cobrará o seu preço.

Qual a melhor maneira de aprender?

Evidentemente, com a ajuda de um professor num bom curso, tudo fica bem mais fácil. Por incrível que pareça, existem diversas escolas (de informática ou não) que ensinam o ultrapassado html 4.0.1. O aluno aprende uma linguagem antiga e se baseia em técnicas não recomendadas no momento atual, como o uso de frames (divisão da página em partes distintas, trazendo um enorme obstáculo a acessibilidade), tabelas para lay-out (inserção do conteúdo da página em células de tabelas, gerando um código não semântico, não acessível e muito “sujo”, limitando a visualização das páginas em dispositivos de mídia que não os monitores dos PC´s), formatação visual dos elementos com comandos não recomendados de html e utilização de tags(comandos) proprietários sem padronização.

A melhor maneira de aprender é, portanto, aprender o que é certo, analisando o que é errado como se analisa um animal estranho num zoológico. Na web, terra das mudanças constantes e rápidas, ir contra a corrente pode trazer, como consequência final, a desvantagem competitiva.

A utilização de poderosos editores WYSIWYG como o Dreamweaver é praticamente indispensável no ambiente produtivo, porém seu uso deve vir após o conhecimento básico da estrutura da codificação (x)html e css. Assim, com o conhecimento solidificado e correto, torna-se mais fácil a trajetória profissional.

A dica é: aprender a base do (x)html/css, aprender Dreamweaver (ou outro robusto editor visual, por motivos de produtividade - sugiro o excelente Blue Fish) e aprofundar os conhecimentos cada vez mais. Aguarde a próxima parte deste artigo.

Um abraço!

Fonte: Fabiano Pereira - http://www.fabianoweb.net/blog

Introdução

Hoje falarei um pouco mais sobre o jQuery tecnologia emergente que facilita a utilização de Ajax em páginas Web.

jQuery é um framework para ajudar os desenvolvedores a se concentrarem na lógica dos sistemas da web e não nos problemas de incompatibilidade dos navegadores atuais.

Seu lema é escrever menos e fazer mais.

Ele possui plugins adicionais que vão desde efeitos visuais na página da web até controle de dados via ajax.

Uma função escrita em Javascript puro tem uma diminuição nótavel quando reescrita com este framework.

Principais funcionalidades

• Resolução da incompatibilidade entre os navegadores.
• Redução de código.
• Reusabilidade do código através de plug-ins.
• Utilização de uma vasta quantidade de plugins criados por outros desenvolvedores.
• Trabalha com AJAX e DOM.
• Implementação segura de recursos do CSS1, CSS2 e CSS3.

Sua aplicação eficiente consiste em separar as funções do javascript da marcação XHMTL através um arquivo externo aplicando as funções no id, classe ou tag do elemento desejado.

Abaixo listarei alguns exemplos de sua utilização:

Exemplo 1:

Aplicação incorreta:

<a onclick="funcao()" href="#">Enviar</a>

Observe que a função javascript foi inserida no evento “onclick” diretamente no XHTML, esta prática não é recomendada pois mistura funções com a marcação XHTML dificultando assim futuras manutenções e atualizações.

Aplicação correta:

XHTML:

<a href="pagina.html" class="enviar">Enviar</a>

Arquivo JavaScript externo:

$('a.enviar').click(function(){
	alert('Voce clicou no link a com a classe "enviar"');
});

Exemplo 2:

Aplicação incorreta:

<script language="javascript">
var data = new Date();
if(data.getHours() < 12)
	document.write('Bom dia !');
else
	document.write('Boa Tarde!');
</script>

Aplicação correta:

XHTML:

<p title="Mensagem">Bom dia!</p>

Arquivo JavaScript externo:

var data = new Date();
if(data.getHours() >= 12)
{
	var saudacao = $('p[title="Mensagem"]');
	saudacao.text('Bom dia!');
}
else
{
	saudacao.text('Boa Tarde!');
}

Exemplo 3:

Marcação terrível:

<table>
    <tr>
        <td onclick="funcao();">Primeira Opção</td>
        <td>Descrição da primeira opção.</td>
    </tr>
    <tr>
        <td onclick="funcao();">Segunda Opção</td>
        <td>Descrição da segunda opção.</td>
    </tr>
</table>

Marcação incorreta:

<dl>
    <dt onclick="funcao();">Primeira Opção</dt>
    <dd>Descrição da primeira opção.</dd>
    <dt onclick="funcao();">Segunda Opção</dt>
    <dd>Descrição da segunda opção.</dd>
</dl>

Marcação correta:

<dl id="lista">
    <dt>Primeira Opção</dt>
    <dd>Descrição da primeira opção.</dd>
    <dt>Segunda Opção</dt>
    <dd>Descrição da segunda opção.</dd>
</dl>

Arquivo JavaScript externo:

$(document).ready(function()
{
	$('dt[title^="P"]').click(function() {
		alert('Clicou no Primeiro item!');
	}
	$('dt[title^="S"]').click(function() {
		alert('Clicou no Segundo item!');
	}
});

Conclusão:

Com jQuery as possibilidades de um Designer conseguir um bom resultado sem programar muito são bem maiores.

Abaixo listo alguns sites e tutoriais onde você poderá encontrar maiores informações:

Sobre jQuery:

• jQuery Web Site: How jQuery Works
• Tutoriais sobre jQuery do site oficial.
• 51 Tutoriais e Exemplos de jQuery
• Easy As Pie: Unobtrusive JavaScript
• Seven Rules of Unobtrusive JavaScript
• Learning jQuery
• Visual jQuery
• Tutoriais de jQuery para Designers
• jQuery for Designers: learn how easy it is to apply web interaction using jQuery.
• 15 dias de jQuery
• 15 Resources To Get You Started With jQuery From Scratch
• The Seven Rules Of Pragmatic Progressive Enhancement
• The Behaviour Layer Slides Great slide notes giving a quick rundown on unobtrusive Javascripting.
• Unobtrusive JavaScript with jQuery

Leitura recomendada: Marcação Semântica

• Definição de Semântica Wikipedia
• Quem se preocupa com a Marcação Semântica?
• Web Standards, não necessariamente tem a ver com marcação correta!
• Especificação dos Seletores em CSS3

Obrigado, até a próxima