Desenvovlimento web com javascript, css e html5, Manuais, Projetos, Pesquisas de Programação Javascript

Baixe Desenvovlimento web com javascript, css e html5 e outras Manuais, Projetos, Pesquisas em PDF para Programação Javascript, somente na Docsity!

Sumário

1 Sobre o curso - O complexo mundo do front-end 1.1 O curso e os exercícios 1 1.2 O projeto da MusicDot 2 1.3 Tirando dúvidas em aula 2 1.4 Tirando dúvidas online no GUJ e no fórum da Alura 3 1.5 Bibliografia 3 1.6 Para onde ir depois? 4

2 A estrutura dos arquivos de um projeto 2.1 Web site ou aplicação Web? 5 2.2 Editores e IDEs 6

3 Introdução ao HTML 3.1 Exibindo informações na Web 8 3.2 Sintaxe do HTML 13 3.3 Tags HTML 14 3.4 Imagens 15 3.5 Primeira página 16

4 Estrutura de um documento HTML 4.1 A tag 18 4.2 A tag 19 4.3 A tag 19 4.4 A instrução DOCTYPE 20

5 Estilizando com CSS 5.1 Sintaxe e inclusão de CSS 22 5.2 Propriedades tipográficas e fontes 25 5.3 Alinhamento e decoração de texto 26 5.4 Imagem de fundo 27 5.5 Bordas 27

Caelum Sumário

5.6 Cores na Web 28

6 Espaçamentos e dimensões 6.1 Dimensões 31 6.2 Espaçamentos 32

7 Listas HTML 7.1 Listas de definição 35 7.2 Links no HTML 36

8 Seletores mais específicos e herança 8.1 Para saber mais: o valor inherit 42

9 Desacoplamento com classes

10 Elementos estruturais e semântica dos elementos

11 Conhecendo padrões de CSS 11.1 Tipos de display 48

12 Unidades relativas com EM e REM

13 Site mobile ou mesmo site? 13.1 CSS media types 55 13.2 CSS3 media queries 57 13.3 Viewport 58 13.4 Responsive Web Design 58 13.5 Mobile-first 59

14 O processo de desenvolvimento de uma tela 14.1 Analisando o Layout 62 15.1 CSS Reset 65 15.2 Fontes Próprias 66 15.3 Modularizando Componentes com CSS Isolados 67

15 Progressive Enhancement 16.1 Condições, opções, limitações e restrições 69

16 Display Flex 17.1 Flex Container 72

17 Responsividade e Fallback

18 Display: grid 19.1 grid-template-columns 82

Sumário Caelum

CAPÍTULO 1

"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.

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

SOBRE O CURSO - O COMPLEXO MUNDO

DO FRONT-END

1.1 O CURSO E OS EXERCÍCIOS

1 SOBRE O CURSO - O COMPLEXO MUNDO DO FRONT-END 1

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.

Conheça a Casa do Código , uma nova editora, com autores de destaque no mercado, foco em ebooks (PDF, epub, mobi), preços imbatíveis e assuntos atuais. Com a curadoria da Caelum e excelentes autores, é uma abordagem diferente para livros de tecnologia no Brasil.

Casa do Código, Livros de Tecnologia.

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.

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.

Seus livros de tecnologia parecem do século passado?

1.2 O PROJETO DA MUSICDOT

1.3 TIRANDO DÚVIDAS EM AULA

2 1.2 O PROJETO DA MUSICDOT

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/

1.6 PARA ONDE IR DEPOIS?

4 1.6 PARA ONDE IR DEPOIS?

CAPÍTULO 2

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:

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.

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.

A ESTRUTURA DOS ARQUIVOS DE UM

PROJETO

2.1 WEB SITE OU APLICAÇÃO WEB?

2 A ESTRUTURA DOS ARQUIVOS DE UM PROJETO 5

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).

2.2 EDITORES E IDES 7

CAPÍTULO 3

"Quanto mais nos elevamos, menores parecemos aos olhos daqueles que não sabem voar." -- Friedrich Wilhelm Nietzsche

A única linguagem que um navegador Web consegue interpretar para a exibição de conteúdo é o HTML. Para iniciar a exploração do HTML, vamos imaginar o seguinte caso: o navegador realizou uma requisição e recebeu como corpo da resposta o seguinte conteúdo:

MusicDot Bem-vindo à MusicDot, seu portal de cursos de música online. Confira nossas promoções. Receba informações sobre nossos lançamentos por email. Navegue por todos nossos cursos disponíveis. Aprenda sem sair de casa. Para conhecer o comportamento dos navegadores quanto ao conteúdo descrito antes, vamos reproduzir esse conteúdo em um arquivo de texto comum, que pode ser criado com qualquer editor de texto puro. Salve o arquivo como index.html e abra-o a partir do navegador à sua escolha.

INTRODUÇÃO AO HTML

3.1 EXIBINDO INFORMAÇÕES NA WEB

8 3 INTRODUÇÃO AO HTML

A imagem acima foi tirada nos navegadores: Brave, Mozilla Firefox e Google Chrome.

Obs: existe a possibilidade de que mesmo nesses navegadores, se utilizada uma versão mais antiga, pode ser que o texto seja mostrado igual na foto dos navegadores da Microsoft.

Usando os resultados acima podemos concluir que os navegadores mais antigos e até mesmo o Microsoft Edge por padrão:

Podem não exibir caracteres acentuados corretamente;

Mas até mesmo nos navegadores mais novos:

Não exibem quebras de linha.

Para que possamos exibir as informações desejadas com a formatação, é necessário que cada trecho de texto tenha uma marcação indicando qual é o significado dele. Essa marcação também influencia a maneira com que cada trecho do texto será exibido. A seguir é listado o texto com esta marcação esperada pelo navegador:

__

MusicDot

10 3.1 EXIBINDO INFORMAÇÕES NA WEB

MusicDot Bem-vindo à MusicDot, seu portal de cursos de música online.

Confira nossas promoções. Receba informações sobre nossos lançamentos por email. Navegue por todos nossos cursos disponíveis. Aprenda sem sair de casa.

O texto com as devidas marcações, comumente chamado de "código". Reproduza então o código anterior em um novo arquivo de texto puro e salve-o como index-2.html. Não se preocupe com a sintaxe, vamos conhecer detalhadamente cada característica destas marcações nos próximos capítulos. Abra o arquivo no navegador.

3.1 EXIBINDO INFORMAÇÕES NA WEB 11

O HTML ( Hypertext Markup Language ) ou linguagem de marcação de hipertexto foi desenvolvido para suprir a necessidade exibição de documentos científicos fornecidos por uma rede de Internet. Para termos uma comparação, é como se a Web fosse desenvolvida para exibir monografias redigidas e formatadas pela Metodologia do Trabalho Científico da ABNT. Porém, com o tempo e a evolução da Web e de seu potencial comercial, tornou-se necessária a exibição de informações com grande riqueza de elementos gráficos e de interação.

Começaremos por partes, primeiro entenderemos como o HTML funciona, para depois aprendermos estilos, elementos gráficos e interações.

Conheça a Casa do Código , uma nova editora, com autores de destaque no mercado, foco em ebooks (PDF, epub, mobi), preços imbatíveis e assuntos atuais. Com a curadoria da Caelum e excelentes autores, é uma abordagem diferente para livros de tecnologia no Brasil.

Casa do Código, Livros de Tecnologia.

O HTML é um conjunto de tags responsáveis pela marcação do conteúdo de uma página no navegador. No código que vimos antes, as tags são os elementos a mais que escrevemos usando a sintaxe . Diversas tags são disponibilizadas pela linguagem HTML e cada uma possui

uma funcionalidade específica.

No código de antes, vimos por exemplo o uso da tag . Ela representa o título principal da

página.

MusicDot

Note a sintaxe. Uma tag é definida com caracteres < e > , e seu nome ( h1 no caso). Muitas tags possuem conteúdo, como o texto do título ( "MusicDot" ). Nesse caso, para determinar onde o conteúdo acaba, usamos uma tag de fechamento com a barra antes do nome: .

Algumas tags podem receber algum tipo de informação extra dentro de sua definição chamada de atributo. São parâmetros usando a sintaxe de atributo="valor". Para definir uma imagem, por

Seus livros de tecnologia parecem do século passado?

3.2 SINTAXE DO HTML

3.2 SINTAXE DO HTML 13

exemplo, usamos a tag e, para indicar o caminho que está essa imagem, usamos o atributo

src :

Repare que a tag img não possui conteúdo por si só, e sim ela carrega ali o conteúdo de um arquivo

externo (a imagem). Nesses casos, não é necessário usar uma tag de fechamento como antes no h.

O HTML é composto de diversas tags, cada uma com sua função e significado. Desde 2013, com a atualização da linguagem para o HTML 5, muitas novas tags foram adicionadas, que veremos ao longo do curso.

Nesse momento, vamos focar em tags que representam títulos , parágrafo e ênfase.

Quando queremos indicar que um texto é um título em nossa página, utilizamos as tags de heading em sua marcação:

MusicDot Bem-vindo à MusicDot, seu portal de cursos de música online.

As tags de heading são para exibir conteúdo de texto e contém 6 níveis, ou seja de à ,

seguindo uma ordem de importância, sendo o título principal, o mais importante, e o título

de menor importância.

Utilizamos, por exemplo, a tag para o nome, título principal da página, e a tag como subtítulo ou como título de seções dentro do documento.

Obs: a tag só pode ser utilizada uma vez em cada página porque não pode existir mais de um

conteúdo mais importante da página.

A ordem de importância tem impacto nas ferramentas que processam HTML. As ferramentas de indexação de conteúdo para buscas, como o Google, Bing ou Yahoo! levam em consideração essa ordem e relevância. Os navegadores especiais para acessibilidade também interpretam o conteúdo dessas tags de maneira a diferenciar seu conteúdo e facilitar a navegação do usuário pelo documento.

Quando exibimos qualquer texto em nossa página, é recomendado que ele seja sempre conteúdo de alguma tag filha da tag . A marcação mais indicada para textos comuns é a tag de parágrafo :

A MusicDot é a maior escola online de música em todo o mundo.

3.3 TAGS HTML

Títulos

Parágrafos

14 3.3 TAGS HTML