Idiomas

Apresentação do Currículo dos Padrões Web e Índice

por Chris Mills

Apresentação

Há algum tempo atrás, eu tive um sonho. Meu trabalho nos últimos 8 ou 9 anos foi fortemente focado em torno da educação, eu estava comissionando e editando livros técnicos para ajudar pessoas a criarem coisas legais com tecnologia, treinando novos empregados nas várias empresas em que trabalhei, ou editando e escrevendo tutoriais para ajudar pessoas a usarem os programas da Opera. Eu sou um apaixonado pela Web também, e um grande defensor dos padrões web abertos. Eu queria dar a minha pequena contribuição para ajudar a tornar a Web um lugar melhor, e penso que para isso eu deveria voltar para a educação, que é ensinar às pessoas como colaborar e ter mais respeito pelos outros, ou ensiná-las como tornar seus sites compatíveis com várias plataformas e dispositivos, e serem acessíveis a pessoas com deficiências. Padrões web são a chave para esse último, então eu decidi tentar gastar meu tempo e energia em algo que irá ajudar a aumentar a adoção dos padrões web na Web hoje e no futuro. Essa idéia ficou se passando pela minha cabeça durante um tempo, mas agora ela está sendo finalmente bancada pela Opera — muito obrigado ao meus maravilhosos empregadores por me pagarem para fazer isso! Um dos meus sonhos foi finalmente realizado.

Então neste artigo eu apresento-lhes o produto de um duro trabalho realizado ao longo dos últimos meses (por mim mesmo e por várias outras pessoas) — o Currículo dos Padrões Web, um curso criado para dar a qualquer pessoa um sólido fundamento em web design/desenvolvimento web, não importa quem seja — ele é completamente gratuito, acessível e não necessita de nenhum conhecimento prévio. Eu estou visando principalmente as universidades, pois acredito que muitas delas falham na educação de padrões web. Eu ouvi dizer que estudantes estão tirando notas baixas por usarem padrões web em seus cursos, porque as grades curriculares estão desatualizadas. Também ouvi que empregadores estão se desesperando porque quando eles entrevistam universitários formados para posições relacionadas à web, eles descobrem que os diplomados realmente não têm a menor idéia sobre o mundo real de desenvolvimento web. Se você estiver em uma universidade progressista que ensina padrões web de um modo razoável, então eu tiro meu chapéu para você — entre em contato!

Neste artigo, vou cobrir o seguinte:

  • Por que padrões web? Aqui vou discutir brevemente as vantagens de usar os padrões web, por que eles não estão sendo usados como deveriam, e como meu curso visa abordar esses problemas.
  • Como o curso é estruturado. O que ele diz na prática; essa seção fala também sobre como educadores deveriam pensar em apresentar o material para usá-lo de forma eficaz nos cursos.
  • Quem deve usar este curso? Quando eu digo "qualquer um", quem eu quero dizer, exatamente?
  • O índice. Vá para esta seção se você está cansado da minha enrolação e quer ir diretamente para o aprendizado.
  • Agradecimentos.
  • Entre em contato.

Por que padrões web?

As principais razões pelas quais adotar padrões web em seu trabalho de web design/desenvolvimento web é uma boa idéia serão expandidas no artigo 4, mas eu vou demonstrá-las aqui brevemente, para lhe dar uma idéia. Usar padrões web lhe concede os seguintes benefícios:

  1. Eficiência de código: Como você vai aprender durante o curso, várias das boas práticas do uso de padrões web são sobre reutilização de código — você pode separar seu conteúdo HTML da sua informação estilística (CSS) e funcional (JavaScript), permitindo que você mantenha pequenos os tamanhos de seus arquivos e escreva o código apenas uma vez, reutilizando-o onde for necessário.
  2. Facilidade de manutenção: Este está relacionado com o último ponto — se você pode escrever HTML uma única vez, e aplicar estilos e funcionalidades sempre que eles forem necessários usando classes e funções, então se você precisar mudar alguma coisa futuramente, você pode fazer a mudança em um lugar e ela se propagará pelo site inteiro, em vez de ter de fazê-la em todos os lugares em que ela for necessária!
  3. Acessibilidade: Os próximos dois pontos estão diretamente relacionados — um dos maiores problemas na Web é fazer sites acessíveis para todo mundo, não importa quem seja, independente da circunstância. Isso inclui fazer sites usáveis por pessoas com deficiências como visual e motora (exemplo: pessoas que não são capazes de mover suas mãos adequadamente ou de forma alguma). Usando padrões web e boas práticas de desenvolvimento, você será capaz de fazer seus sites usáveis por esse significativo grupo de usuários da web sem nenhum esforço.
  4. Compatibilidade de dispositivos: Com isso, eu quero dizer que seus sites irão funcionar não apenas em diferentes plataformas — como Windows, Mac, Linux — mas também em diferentes dispositivos de navegação, que nos dias de hoje podemos incluir telefones celulares, TVs e videogames. Estes dispositivos têm limitações como o tamanho da tela, capacidade de processamento, mecanismos de controle disponíveis, entre outros, mas a boa notícia é que, novamente, usando padrões web e boas práticas de desenvolvimento, você pode muito bem garantir que seus sites funcionarão na maioria destes dispositivos. Existem mais telefones celulares que computadores no mundo, muitos deles são capazes de acessar a internet, portanto você ou seus clientes podem se dar ao luxo de ignorar este mercado?
  5. Mecanismos de busca: Com isso, estamos falando do que é conhecido como otimização para mecanismos de busca (ou SEO: search engine optimization) — a prática de tornar seus sites tão visíveis quanto o possível para os chamados crawlers (robôs) que varrem a web indexando os web sites, e, por consequência, dando-lhe melhores posições nas buscas de sites como o Google. Há uma ciência por trás disso, mas novamente, apenas usando os padrões web você já irá fazer seu site bem mais visível no Google, Yahoo!, etc., o que é bom para os negócios.

No entanto, apesar de todas essas vantagens, muitos sites na Web ainda não seguem os padrões web, e muitos desenvolvedores web ainda trabalham hoje usando práticas ruins e obsoletas. "Por que?" você pergunta. Há uma série de razões para isso — pessoas dirão que lhes falta educação, que são políticas da empresa, que não precisam aprender padrões porque estão sendo pagas de qualquer forma, é muito difícil de aprender, por causa do suporte ao padrões nos navegadores... Vamos analisar detalhadamente cada uma delas, e então veremos os contra-argumentos, para tentarmos nos livrar de quaisquer desculpas para não adotar/aprender os padrões.

  1. Falta educação: Existe um problema aqui, mas esse é um dos principais motivos pelos quais este curso foi criado. Várias universidades não ensinam padrões web em seus cursos relacionados a web, e vários currículos tendem a conter práticas desatualizadas, e é difícil mudar isso devido à burocracia. Livros e cursos de formação tendem a ser caros. Mas espere! Agora nós estamos oferecendo um curso gratuito, e estamos indo atrás das universidades para ajudá-las a implementarem essas mudanças, então realmente não há nenhuma desculpa aqui.
  2. Política da empresa: Não há dúvidas que algumas empresas e instituições ainda têm sites realmente velhos e obsoletos. Elas podem ter políticas que forcem seus empregados a usarem navegadores desatualizados, mas isso está melhorando, e agora que há disponível um curso gratuito para mostrar com facilidade como essas mudanças podem ser feitas, as coisas devem melhorar. Atualizar um site para os padrões modernos incentiva as empresas a atualizarem os navegadores que elas usam, já que os sites não ficarão bonitos em navegadores antigos (embora eles ainda devem funcionar nesses navegadores). Bem como as empresas incentivarão seus clientes a se atualizarem. Assim como há também uma razão estratégica — sites que usam padrões web, como explicado acima, renderão bons resultados em mecanismos de busca e serão acessíveis para pessoas com deficiências e usuários de dispositivos de navegação alternativos — as empresas podem se dar ao luxo de ignorar esse público?
  3. “Eu não preciso aprender isso”: Eu sei que alguns desenvolvedores se sentarão lá e dirão "mas eu estou usando práticas obsoletas e continuo sendo pago — então por que eu preciso me preocupar com essas coisas novas?" Como explicado acima, isso faz seu código mais eficiente, mais fácil de escrever, e mais fácil de manter. E isso permite que você escreva um código acessível e usável em dispositivos alternativos — isso não parece tão excitante? Isso também lhe dará habilidades que o tornarão mais preparado para o futuro, e você será capaz de ganhar mais. Muitas empresas estão exigindo conhecimentos em padrões web atualmente.
  4. “Isto é muito difícil de aprender!”: Péssima. Depois de ver um pouco deste curso, você verá como é fácil pegar o básico de padrões web, seja você um novato em web design/desenvolvimento web, ou alguém já experiente atualizando seus conhecimentos. É quase tão difícil quanto usar os métodos antigos e ultrapassados, o que não é muito, e isso concede muitas vantagens em relação às práticas antigas.
  5. Suporte aos padrões nos navegadores: Os padrões suportados nos navegadores estavam se diferenciando cada vez mais, o que fazia o processo de tornar os sites compatíveis com diferentes navegadores um pesadelo. Mas esses dias chegaram ao fim — todos os navegadores modernos têm um suporte decente aos padrões. As vezes ainda é necessária a compatibilidade com navegadores antigos que não têm um bom suporte aos padrões, mas usando boas práticas de desenvolvimento, você pode ter certeza que os usuários desses navegadores ainda terão uma experiência de uso razoável.

Então como você pode ver, não há realmente nenhuma desculpa para não adotar os padrões web em seu trabalho de desenvolvimento web. Se você estiver vendo este curso como um novato, você está começando com o pé direito e aprendendo as melhores práticas desde o início, em vez de ter que desaprender as más práticas.

Ok, nós estamos falando sobre essas más práticas de forma meio obscura, como se elas fossem os planos secretos para a Estrela da Morte ou algo assim. Nós não iremos abordar essas práticas em detalhes neste curso, pois não acreditamos que devemos fazer isso; nós achamos que devemos apenas ensinar a maneira correta. No entanto, você provavelmente está se perguntando o que elas são, então vamos falar aqui brevemente sobre elas.

Nos velhos tempos, as pessoas usavam coisas como projetar seus sites dentro de tabelas gigantes, usando as diferentes células da tabela para posicionar seus gráficos, texto etc (para os quais as tabelas não eram destinadas, e adicionando marcações supérfluas na página). Elas usavam imagens invisíveis chamadas spacer GIFs para ajustarem o posicionamento de elementos da página (para o qual as imagens não eram destinadas, e adicionando marcações e imagens supérfluas na páginas. Elas usavam fazer menus que eram gerados na hora via JavaScript (o que não é bom para pessoas com JavaScript desativado em seus navegadores, ou pessoas com deficiências visuais usando leitores de tela, que ficam confusos com esses JavaScripts) ou trabalhavam em apenas um navegador (e as pessoas que usavam outros navegadores?). Elas usavam inserir informações de estilo diretamente no HTML usando elementos (terrível para manutenção, e adiciona marcações supérfluas na página). E muitos outros crimes contra o desenvolvimento web. O pior de tudo é que eu digo “nos velhos tempos” acima, mas o fato é que muita gente ainda está fazendo coisas assim!

Desenvolvimento web é um trabalho complicado na maior parte do tempo, porém más práticas como essas apenas o tornam mais difícil. Usar padrões web e boas práticas, como destacado neste curso, é o melhor caminho a seguir.

Estrutura do curso

O curso é composto de diversos artigos —eles serão mais de 50 quando o curso básico estiver terminado – e cada artigo é bastante extenso. Cada artigo foca em um micro-tópico específico, e quando apropriado, contém informações antecedentes para o entendimento do tópico, teoria essencial, exemplos práticos e tutoriais, e perguntas para testar seu conhecimento.

Em adição a isso nós faremos no futuro um tutorial completo, que você irá seguir para entender o processo inteiro de criar um web site do início ao fim.

Uma maneira lógica de ensinar este curso é verificar quantas aulas você tem disponíveis para ensiná-lo, e dividí-las pelo número de artigos. Para cada aula, certifique-se de que os alunos leiam os artigos relacionados a ela antes de começar. Então dê exemplos práticos durante a aula, e peça para que os alunos façam os exercícios depois de cada aula. Logicamente, eu penso que uma hora deve ser o suficiente para entender os conceitos contidos em cada artigo, levando em conta que os alunos leiam cada artigo antes das aulas serem ministradas. Portanto há neste curso cerca de 50 horas de tempo de aula, e 50 horas de leitura.

Obviamente, você deve pensar sobre quanto tempo você terá para ensinar este curso e o que deve cobrir exatamente em cada aula, mas a chave é experimentar.

Quem deve usar este curso?

Este é um curso de padrões web composto de vários artigos, que visa basicamente qualquer um que queira aprender web design baseado em padrões web desde o começo. Ele é destinado a levar o leitor a partir de nada mais que uma familiaridade básica com navegação na web, para um desenvolvedor competente com CSS e HTML, e com básicos conhecimentos de JavaScript e sobre como ele se encaixa no quebra-cabeças. Ele deve lhe dar conhecimento o suficiente para pensar a entrar no mercado de trabalho com confiança (obviamente experiência não pode ser ensinada).

Quem ele visa? Eu quero que ele seja usável por qualquer pessoa que queira aprender web design “da forma correta”:

  • Estudantes e professores universitários: Eu já tinha mencionado isso —esse é o conjunto de artigos ideal para criar seu próprio curso e entregá-lo aos seus alunos, ou usar partes dele como suplemento para seu curso. Para quaisquer estudantes que estejam estudando algum curso relacionado com web, vocês podem usar este material para ampliar seus conhecimentos, e pressionar seus professores a considerarem usá-lo! Eu recomendaria todos os professores/leitores a darem uma boa olhada neste material, para garantirem que as técnicas cobertas em seus cursos são atualmente as melhores práticas.
  • Estudantes pré-universitários: Já que este curso está sendo escrito com adultos em mente, não há nenhuma razão pela qual estudantes jovens não podem se beneficiar dele – siga em frente e veja como.
  • Atuais web designers e desenvolvedores web: Existem vários desenvolvedores e designers web por aí que não estão usando padrões web e boas práticas, ou que estão a procura de algo que sirva como uma referência fácil e acessível para os padrões web ou para atualizarem seus conhecimentos. Para os primeiros, eu peço que dêem a este curso uma chance de ver como os padrões web são importantes e fáceis de adotar. Para os últimos, eu estou certo que você vai achar este curso útil para ajudar os outros, melhorar suas habilidades, ver coisas difíceis de se lembrar, e encontrar argumentos para ajudar a convencer chefes e clientes que coisas como acessibilidade fazem muito sentido.
  • Educadores dentro de empresas: Esse é o caminho ideal para fornecer treinamentos de baixo custo a os funcionários.
  • Quaisquer outras pessoas: Se você é um indivíduo que apenas gosta de aprender algo sobre design e desenvolvimento web, então novamente, esse é um caminho pouco custoso para obter ajuda com seus esforços.

Eu não estou esperando que as pessoas paguem para usar este curso —ele está lançado sob uma licença Creative Commons, então está disponível livremente para qualquer um que queira usá-lo, desde que nos dê a devida atribuição.

Índice

Note que atualmente os primeiros 39 artigos estão publicados, com cerca de mais 10 que virão para completar o curso, assim que possível.

Nota do tradutor: Os 39 artigos atuais já foram publicados em inglês, as traduções estão sendo disponibilizadas pouco-a-pouco, em uma frequência de aproximadamente 1 artigo por semana. Note também que estes títulos podem ser alterados futuramente se necessário.

O início

  1. Material de apresentação, por Chris Mills — Este é o que você está lendo.

Apresentação do mundo dos padrões web

  1. A história da Internet e da web, e a evolução dos padrões web, por Mark Norman Francis.
  2. Como a Internet funciona?, por Jonathan Lane.
  3. O modelo dos padrões web — HTML, CSS e JavaScript, por Jonathan Lane.
  4. Belo sonho, mas qual é a realidade?, por Jonathan Lane.

Conceitos de Web Design

Essa seção não entrará em nenhum detalhe sobre código ou marcação, e irá agir como uma introdução ao processo de design antes de você começar a criar qualquer gráfico ou código, bem como conceitos de web design como arquitetura da informação, navegação, usabilidade etc.

  1. Arquitetura da Informação —planejando um web site, por Jonathan Lane.
  2. O que uma boa página web precisa?, por Mark Norman Francis.
  3. Teoria das Cores, por Linda Goin.
  4. Contruindo um wireframe do site, por Linda Goin.
  5. Esquemas de cores e modelos de design, por Linda Goin.
  6. Tipografia na web, por Paul Haine.

Básico do HTML

  1. Conceitos básicos de HTML, por Mark Norman Francis.
  2. O elemento do HTML, por Christian Heilmann.
  3. Escolhendo o doctype certo para seus documentos HTML, por Roger Johansson.

O corpo do HTML

  1. Marcando o conteúdo textual no HTML, por Mark Norman Francis.
  2. Listas HTML, por Ben Buchanan.
  3. Imagens em HTML, por Christian Heilmann.
  4. Links HTML — vamos fazer a web!, por Christian Heilmann.
  5. Tabelas HTML, por Jen Hanen.
  6. Formulários HTML — o básico, por Jen Hanen.
  7. Elementos semânticos menos conhecidos, por Mark Norman Francis.
  8. Containers genéricos — os elementos div e span, por Mark Norman Francis.
  9. Criando múltiplas páginas com menus de navegação, por Christian Heilmann.
  10. Validando seu HTML, por Mark Norman Francis.
Acessibilidade
  1. Conceitos básicos de acessibilidade, por Tom Hughes-Croucher.
  2. Testando a acessibilidade, por Benjamin Hawkes-Lewis.

CSS

  1. Conceitos básicos de CSS, por Christian Heilmann.
  2. Herança e cascata, por Tommy Olsson.
  3. Estilizando texto com CSS, por Ben Henick.
  4. O modelo de layout CSS — caixas, bordas, margens, espaçamento, por Ben Henick.
  5. Imagens de fundo em CSS, por Nicole Sullivan.
  6. Estilizando listas e links, por bem Buchanan.
  7. Estilizando tabelas, por bem Buchanan.
  8. Estilizando formulários, por Ben Henick.
  9. Floats e clear, por Tommy Olsson.
  10. Posicionamento estático e relativo em CSS, por Tommy Olsson.
  11. Posicionamento absoluto e fixo em CSS, por Tommy Olsson.

JavaScript

Em breve...

Artigos suplementares

  • Colocando seu conteúdo online, por Craig Grannell.
  • Mais sobre o do documento, por Chris Heilmann.
  • Suplementando: Entidades HTML comuns usadas para tipografia, por Hen Henick.
  • Glossário do Currículo dos Padrões Web da Opera, por vários autores. Isto é incompleto, e será incrementado com o passar do tempo.

Agradecimentos

O número de pessoas que me ajudou com este curso é muito grande para mencionar detalhadamente, mas eu espero ter incluído todo mundo aqui. Elas são todas grandes pessoas, então conheça-as melhores — vá às suas palestras, compre seus livros, leia seus blogs, ou faça qualquer coisa que possa para ajudá-los. Eu lhes devo toda minha admiração e gratidão.

  1. Os autores: Muito obrigado ao BenBuchanan, Tom Hughes-Croucher, Mark Norman “Norm” Francis, Linda Goin, Paul Haine, Jen Hanen, Benjamin Hawkes-Lewis, bem Henick, Christian Heilmann, Roger Johansson, Peter-Paul Koch, Jonathan Lane, Tommy Olsson, Nicole Sullivan e Mike West. Sem vocês, este curso não seria nada, literalmente.
  2. A equipe da Opera: Desejo o melhor para Jan Standal, David Storey, o resto do meu time, e todos na Opera por acreditarem nesta idéia, e me ajudarem a desenvolvê-la.
  3. As organizações: Obrigado a todos da Yahoo! (os autores, e Sophie Major por sua grande ajuda com a organização e promoção), da WaSP (particularmente Gareth Rushgrove, Stephanie Troeth e Aarron Walter), da Britpack, da Geekup folks, e todas as universidades que demonstraram interesse no curso.
  4. Os indivíduos: Meus pequenos agradecimentos para essas maravilhosas pessoas — Craig Saila, Sara Dodd, John Allsopp, Roan Lavery, Bruce Lawson, Alan White. Desculpe se eu me esqueci de alguém.
  5. Os leitores: Obrigado a você por ter um interesse em criar sites da forma correta, e usar seu tempo para ler este curso.

Entre em contato

Eu estou constantemente procurando melhorar este curso, e vê-lo adotado por mais pessoas quanto o possível. Se você tem quaisquer sugestões para como este curso pode ser melhorado, quaisquer comentários gerais para compartilhar, ou quer conversar comigo sobre adotá-lo em algum lugar, então entre em contato. Meu e-mail é cmills [arroba] opera [ponto] com. Você pode também deixar comentários sobre cada artigo da série usando o link “Discutir este artigo” no final de cada um. Você irá precisar de uma conta do my.opera para participar das discussões.

Nota do tradutor: Como o autor não é brasileiro, é melhor que você só envie e-mails para ele se forem em inglês. No final de cada artigo eu colocarei um link para a discussão original no Dev.Opera. No entanto, novamente é recomendável que você não envie mensagens em português lá. Se quiser enviar uma sugestão ou comentário a respeito do curso, em português, envie para mim no e-mail opera.cpw [arroba] danillonunes [ponto] net; na medida do possível encaminharei as questões para os autores originais.

Próximo artigo — A história da Internet e da web, e a evolução dos padrões web.

Sobre o autor

Chris Mills é gerente de relações de desenvolvedores para a Opera — ele edita e publica artigos no dev.opera.com e labs.opera.com, mantém contato com a comunidade para colher opiniões a respeito do Opera, e evangeliza sobre o software da Opera onde puder. Ele também é o organizador e editor do Currículo dos Padrões Web.

Fora do trabalho, ele é um fã extremamente ávido de música, escutando uma grande variedade de estilos, incluído metal, folk, punk, eletrônica, prog, e mais. Sua principal banda do momento é a incrível Conquest of Steel.

Este artigo está licenciado sob uma licença Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 2.5.

Discuta este artigo (No Dev Opera, em inglês).

Comentários

I `m a volunteer and support people with visual impairment and would be great to learn all the possibilities that Opera could allow a way to help the blind to have better accessibility to the Opera, and also to support people who help him in the institution Gaf of Viana do Castelo , ie people in the way of social integration, with many difficulties.
however meant that the level of language informatica, know little, but I have many blogs and some websites and forums, but never built anything from scratch.
I like the Opera, even have it on my smartphone.

I do not know if I support frateno hug .. and liked to learn by myself and others who can provide better means of accessibility.

Victor

Victor

Comentar