alterações

00-intro-mundo-html.md

@@ -0,0 +1,99 @@
+# Sobre o curso - O complexo mundo do front-end
+_"Ação é a chave fundamental para todo sucesso" -- Pablo Picasso_
+
+
+
+Vivemos hoje numa era em que a Internet ocupa um espaço cada vez mais importante em nossas
+vidas pessoais e profissionais. O surgimento constante de Aplicações Web, para as mais
+diversas finalidades, é um sinal claro de que esse mercado está em franca expansão e traz
+muitas oportunidades. Aplicações corporativas, comércio eletrônico, redes sociais, filmes,
+músicas, notícias e tantas outras áreas estão presentes na Internet, fazendo do navegador
+(o _browser_) o software mais utilizado de nossos computadores.
+
+Esse curso pretende abordar o processo de desenvolvimento de sites que acessamos por meio do navegador de nossos computadores, utilizando padrões atuais de desenvolvimento e conhecendo a fundo suas características
+técnicas. Discutiremos as implementações dessas tecnologias nos diferentes navegadores, a
+adoção de _frameworks_ que facilitam e aceleram nosso trabalho, além de dicas técnicas
+que destacam um profissional no mercado. HTML e CSS serão vistos em profundidade além de eventos no JavaScript.
+
+Além do acesso por meio do navegador de nossos computadores, hoje o acesso à Internet a
+partir de dispositivos móveis representa um grande avanço da plataforma, mas também
+implica em um pouco mais de atenção no trabalho de quem vai desenvolver. No decorrer do curso, vamos conhecer algumas dessas necessidades e como utilizar os recursos disponíveis para atender também a essa grande necessidade.
+
+## O curso e os exercícios
+
+Esse é um curso prático que começa nos fundamentos de HTML e CSS, incluindo tópicos
+relacionados às novidades das versões HTML5 e CSS3, como por exemplo, Flexbox e Grid. Depois, é abordada a linguagem de programação JavaScript focada na parte de eventos, para criar interações entre o usuário e a página.
+
+Durante o curso, serão desenvolvidas páginas semelhantes com o site da MusicDot. Os
+exercícios foram projetados para apresentar gradualmente ao aluno quais são as técnicas
+mais recomendadas e utilizadas quando assumimos o papel de pessoa que desenvolve para _front-end_,
+quais são os desafios mais comuns e quais são as técnicas e padrões recomendados para
+atingirmos nosso objetivo, transformando imagens estáticas (os _layouts_) em código que
+os navegadores entendem e exibem como páginas da Web.
+
+Os exercícios propostos são fundamentais para o acompanhamento do curso e para os estudos em casa. Igualmente importante é a participação ativa nas discussões e debates em sala de aula.
+
+## O projeto da MusicDot
+
+Durante o curso, vamos reproduzir o site da MusicDot. Um site para aprender a tocar instrumentos através de video-aulas. Construiremos várias páginas da empresa com intuito de aprender os conceitos de HTML, CSS e JS.
+
+Os conteúdos e o design do site já foram pré-definidos. Vamos, aqui, focar na implementação,
+papel de pessoas que desenvolvem.
+
+## Tirando dúvidas em aula
+
+Durante o curso, tire todas as suas dúvidas a pessoa responsável pela turma. HTML, CSS e JavaScript,
+apesar de parecerem simples e básicos, têm muitas características complexas
+que não podem deixar de ser totalmente compreendidas pelo aluno. Nossa equipe também
+está disponível para tirar as suas dúvidas após o término do curso, basta
+entrar em contato direto com a Caelum, teremos o prazer em ajudá-lo.
+
+Se você está acompanhando essa apostila em casa, pense também em fazer o curso presencial
+na Caelum. Você terá contato direto com nossa equipe para esclarecer suas dúvidas, aprender
+mais tópicos além da apostila, e trocar experiências.
+
+## Tirando dúvidas online no GUJ e no fórum da Alura
+
+Recomendamos fortemente a busca de recursos e a participação ativa na
+comunidade por meio das listas de discussão relacionadas ao conteúdo do curso.
+
+O **GUJ.com.br** é um site de perguntas e respostas para desenvolvedores de software
+que abrange diversas áreas, sendo que front-end é um dos principais focos. A comunidade
+do GUJ tem mais de 150 mil usuários e 1 milhão e meio de mensagens. É o lugar ideal
+pra você tirar suas dúvidas e encontrar outros desenvolvedores.
+
+https://www.guj.com.br
+
+A Alura também é um ótimo lugar para aprender e tirar suas dúvidas. Ela é uma plataforma de cursos online do grupo Caelum que conta com mais de 1000 cursos voltados tanto para tecnologia quanto para outras áreas. Possui uma comunidade ativa nos fórums e nossa equipe está sempre disposta a ajudar.
+
+https://alura.com.br
+
+## Bibliografia
+
+Além do conhecimento disponível na Internet pela comunidade, existem muitos livros
+interessantes sobre o assunto. Algumas referências:
+
+
+* **HTML5 e CSS3: Domine a web do futuro** - Lucas Mazza, editora Casa do Código;
+* **A Web Mobile: Design Responsivo e além para uma Web adaptada ao mundo mobile** - Sérgio Lopes, editora Casa do Código;
+* **A Arte E A Ciência Do CSS** - Adams & Cols;
+* **Pro JavaScript Techniques** - John Resig;
+* **The Smashing Book** - smashingmagazine.com
+
+
+## Para onde ir depois?
+
+Este curso é parte da **Formação Front-end** da Caelum que engloba também o treinamento
+**JavaScript Moderno E Os Fundamentos Para Construção De WEB APPS**. Você pode obter mais informações aqui:
+
+https://www.caelum.com.br/formacao-frontend
+
+Se o seu desejo é entrar mais a fundo no desenvolvimento Web, incluindo a parte
+_server-side_, oferecemos o curso **Desenvolvimento Web com PHP e MySQL**, a
+**Formação Java** e a **Formação .NET** que abordam três caminhos possíveis para
+esse mundo.
+
+Mais informações em:
+
+
+* https://www.caelum.com.br/

01-baixando-os-arquivos-do-curso.md

@@ -0,0 +1,51 @@
+# A estrutura dos arquivos de um projeto
+
+Como todo tipo de projeto de software, existem algumas recomendações quanto à organização
+dos arquivos de um site. Não há nenhum rigor técnico quanto a essa organização e, na
+maioria das vezes, você vai adaptar as recomendações da maneira que for melhor para o seu
+projeto.
+
+Como um site é um conjunto de páginas Web sobre um assunto, empresa, produto ou qualquer
+outra coisa, é comum todos os arquivos de um site estarem dentro de uma só pasta e, assim
+como um livro, é recomendado que exista uma "capa", uma página inicial que possa indicar
+para o visitante quais são as outras páginas que fazem parte desse projeto e como ele pode
+acessá-las, como se fosse o **índice** do site.
+
+Ter esse índice, não por coincidência, é uma convenção adotada pelos servidores de páginas Web. Se
+desejamos que uma determinada pasta seja servida como um site e dentro dessa pasta existe
+um arquivo chamado **index.html**, esse arquivo será a página inicial, ou seja o índice, a menos que alguma
+configuração determine outra página para esse fim.
+
+Dentro da pasta do site, no mesmo nível que o `index.html`, é recomendado que sejam
+criadas mais algumas pastas para manter separados os arquivos de imagens, as folhas de
+estilo e os scripts. Para iniciar um projeto, teríamos uma estrutura de pastas como a
+demonstrada na imagem a seguir:
+
+![ {w=15}](assets/img-musicdot/intro-html-css/estrutura-projeto-novo.png)
+
+Muitas vezes, um site é servido por meio de uma aplicação Web e, nesses casos, a estrutura
+dos arquivos depende de como a aplicação necessita dos recursos para funcionar
+corretamente. Porém, no geral, as aplicações também seguem um padrão bem parecido com o que
+estamos adotando para o nosso projeto.
+
+## Web site ou aplicação Web?
+
+Quando estamos começando no mundo do desenvolvimento Web, acabamos por conhecer muitos termos novos, que por muitas vezes não são claros ou nos causam confusão. Vamos entender um pouco mais agora, qual a diferença de um Web site e uma aplicação Web.
+
+### Web site
+Podemos considerar um Web site uma coleção de páginas HTML estáticas, ou seja, que não interagem com um banco de dados através de uma linguagem de servidor Web. Ou seja, aqui todo o conteúdo do site está escrito diretamente no documento HTML, assim como as imagens e outras mídias. Claro que, para qualquer página Web ser fornecida publicamente a mesma deve estar hospedada em um simples servidor Web (hospedagem de sites).
+
+### Aplicação Web
+Uma aplicação Web pode conter uma coleção de páginas, porém o conteúdo destas páginas é montado dinamicamente, ou seja, é carregado através de solicitações (requisições) à um banco de dados, que conterá armazenado os textos e indicação dos caminhos das imagens ou mídias que a página precisa exibir. Porém um HTML não tem acesso direto à um banco de dados, e esta comunicação deve ser feita por uma linguagem de programação de servidor Web. Esta aplicação escrita com uma linguagem de servidor que tem o poder de acessar o banco de dados e montar a página HTML conforme o solicitado pelo navegador. Estas solicitações podem ser feitas de várias maneiras, inclusive utilizando JavaScript. Portanto uma aplicação Web é mais complexa porque precisa de uma linguagem de servidor para poder intermediar as solicitações do navegador, um banco de dados, e muitas vezes (porém não obrigatoriamente) exibir páginas HTML com estes conteúdos.
+
+Exemplo de linguagens de servidor Web: Java EE, PHP, Python, Ruby on Rails, NodeJS etc...
+
+## Editores e IDEs
+
+Os editores de texto são programas de computador leves e ideais para escrever e editar as páginas de um site, como _Visual Studio Code_ (https://code.visualstudio.com/), _Sublime_
+(https://www.sublimetext.com/), _Atom_ (https://atom.io/) e _Notepad++_
+(https://notepad-plus-plus.org), que possuem realce de sintaxe e outras ferramentas
+para facilitar o desenvolvimento de páginas. 
+
+Há também **IDE**s (_Integrated Development
+Environment_) que são editores mais robustos e trazem mais facilidades para o desenvolvimento de aplicações Web, se integrando com outras funcionalidades. São alguns deles: _WebStorm_ (https://www.jetbrains.com/webstorm/) _Eclipse_ (https://www.eclipse.org/) e _Visual Studio_ (https://visualstudio.microsoft.com).