Skip to content

A
adega

onde comecar web

Last edited by Jomaro Rodrigues
Page history

Esse é o ponto de entrada do projeto pro pessoal que vai trabalhar com WEB

Tecnologias usadas no projeto:

Sob avaliação:

  • Sass (mais precisamente com sintaxe scss)
  • alguma biblioteca pra fazer os gráficos

Divagações

  • Um material didático seria um material em que você pode confiar pra realmente te ensinar alguma coisa. Tipo te pegar do zero e ir ensinando as coisas, mostrando os problemas mais comuns, algumas dicas, etc. Para algumas coisas simplesmente não têm um bom guia didático (que eu conheça), o caminho é se aventurar na web. Essa atitude geralmente gera "buracos" no seu conhecimento sobre o assunto, tente tapar conforme for conhecendo eles.
  • Um outro tipo de material além do didático são os guias de referência. Em geral são ruins para aprender porque eles não foram feitos pra ensinar. São mais como o guia de consultas praquelas situações de "O que isso fazia mesmo?" ou "tal elemento tem tal propriedade?". Eu recomendo algum esforço para ler esses materiais. O objetivo não é decorar mas talvez algum dia se lembrar: "tinha um elemento que podia me ajudar nesse problema agora". E ele vai ajudar a dizer quais são os buracos no seu conhecimento.
  • As tecnologias WEB são criadas por grupos de trabalho pelo mundo e aprovadas em especificações que são então implementadas pelos browsers. Só que não é bem assim. Primeiramente que depois de lançado provavelmente vão trabalhar em uma nova versão. O HTML5 tem sido lançado em partes, conforme os componentes individuais vão ficando maduros o suficiente. Uma tecnologia de segurança da área já era implementada por browsers antes mesmo de a especificação final ser lançada, estavam lançando coisas implementadas a partir dos rascunhos não aprovados para especificação final. Só para citar exemplos mais mirabolantes. Antigamente as especificações não eram necessariamente respeitadas e cada fabricante fazia seu browser como quisesse, o que era um pesadelo para os desenvolvedores web. Apesar de que hoje os fabricantes dos browsers respeitarem bastante as especificações, ainda pode demorar um tempo para o browser implementar aquela funcionalidade. E muito mais importante, para os usuários passarem a usar a nova versão do browser. O que pode ser um processo lento, nem todo mundo vai mudar de uma hora pra outra, então pode ser que ao usar um recurso moderno você esteja fazendo seu site inutilizável em navegadores mais antigos, em geral os que não tinham recursos de atualização automática (internet explorer). Pra dar uma luz existe o can I use? um site que sabe a partir de qual versão de cada navegador o recurso X ficou disponível, e quantos porcento da internet usa navegadores compatíveis. Então sabemos se é "seguro" usar tal recurso.

Material

Eu tenho que admitir que eu não tenho nenhum guia didático sobre HTML e CSS, nesse ponto você está meio que por sí mesmo. Mas vamos colocar alguns links interessantes do assunto e o resto vai ter conteúdo.

  • W3C é a instituição que cuida da regulamentação do HTML e do CSS. Seria a referência mais confiável de todas no assunto.
  • MDN - Mozilla Developers Network também é uma boa referência bastante confiável
  • Web Nerd Terminology (Explained)
  • Just Starting Out with CSS & HTML não conheço esse guia, mas o site é bom e confiável. Acredito que seja um bom começo.
  • Can I use? já explicado nas divagações.
  • As Developer Tools são provavelmente as ferramentas mais úteis para debug web. Ao apertar F12 em um navegador deve se abrir uma janela com ferramentas para desenvolvedores web. Links para materiais das ferramentas da Mozilla e da Google. Um carinho especial para:
    • A aba inspector é essencial para debug e inspeção de código HTML e CSS.
    • Saber usar a aba console é essencial para desenvolvedores javascript.
    • E a aba network permite ver quais arquivos estão, de fato, sendo requisitados pela página e como estão sendo carregados. É o básico pra debug do "aquilo não tá aparecendo", sempre tenha certeza de que todos os arquivos estão sendo carregados.
  • Web Developer Checklist um checklist de coisas que desenvolvedores web normalmente tem que fazer em um site. Útil para ter ideia sobre aqueles buracos no conhecimento e sobre como desenvolvimento web acaba sendo uma questão multi-disciplinar.
  • PageSpeed da Google, é uma ferramenta que provem relatórios sobre o carregamento de uma página. Não é a primeira preocupação de quem está começando, mas pode ser uma luz no horizonte. Disponível como serviço web, extensão de navegador (se integra ao developer tools), e outros.
  • thimble tem exemplos de páginas que podem ser editadas pelo usuário. Um bom brinquedo para iniciantes que estão se acostumando com as tecnologias.

HTML

  • Se nunca viu o que é HTML vá a quaquer site e tecle ctrl+u, é isso, só um monte de texto. Como montar esse texto é que é aprender HTML.
  • NU é um validador de html, vê se a página está correta ou possui algum erro. Útil já que html não mostra erros sozinho.

CSS

  • CSS Tricks é bem confiável e tem muito conteúdo
  • Maujor provavelmente a maior referência brasileira no assunto

javascript e JQuery

  • JQuery Fundamentals é um material bastante didático feito pelo pessoal do jquery, começa dando o necessário de javascript então da pra pegar ele direto. Pode estar meio defasado, eu usei em 2012 e não foi muito atualizado desde então (mas a API também não mudou grandes coisas, então vai saber)

Django