Curso

HTML, CSS, JavaScript e AngularJS

Com Gui Seek / @guiseek

HyperText Markup Language

HTML (HyperText Markup Language).

É uma linguagem de marcação utilizada na construção de páginas na Web.

Exibindo informações na Web


<!doctype html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>HTML, CSS, JavaScript e AngularJS</title>
        <meta name="description" content="HTML, CSS, JavaScript e AngularJS">
        <meta name="author" content="Gui Seek">
        <link rel="stylesheet" href="assets/css/style.css">
        <script src="assets/js/script.js"></script>
    </head>
    <body>
        Informação
    </body>
</html>

Tags

  • Palavras entre parênteses angulares
  • Marcação semântica
  • Hierarquia de elementos
  • Atributos e valores

Estrutura de um documento


...
<body>
    <header></header>
    <nav></nav>
    <main>
        <section>
            <article></article>
        </section>
        <aside>
        </aside>
    </main>
</body>
...

Semântica / Micro dados

Permite a representação de dados HTML de forma mais semântica para mecanismos de busca.

Exemplo sem semântica


...
<div>
    <div>28/01/2016 19:00</div>
    <div>HTML, CSS, JavaScript e AngularJS</div>
    <div>
        <span>Gumga</span>
        <div>
            <span>Avenida Duque de caxias</span>
            <span>Maringá</span>
            <span>Paraná</span>
        </div>
    </div>
</div>
...

Exemplo com semântica


...
<div itemscope itemtype="http://schema.org/Event">
    <div itemprop="startDate" content="2016-01-28T19:00">28/01/2016 19:00</div>
    <div itemprop="name">HTML, CSS, JavaScript e AngularJS</div>
    <div itemprop="location" itemscope itemtype="http://schema.org/Place">
        <span itemprop="name">Gumga</span>
        <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
            <span itemprop="streetAddress">Avenida Duque de caxias</span>
            <span itemprop="addressLocality">Maringá</span>
            <span itemprop="addressRegion">Paraná</span>
        </div>
    </div>
</div>
...

Documentação de referência?

Schema.org é patrocinado pelo Google, Microsoft, Yahoo e Yandex. Os vocabulários são desenvolvidos por um processo de comunidade aberta, usando a lista de discussão public-schemaorg@w3.org e através do GitHub.

Tags HTML

Elemento raíz

Elemento Descrição
<html> Representa a raiz de um documento HTML ou XHTML. Todos os outros elementos devem ser descendentes desse elemento.

Metadados de documento

Elemento Descrição
<head> Representa uma coleção de metadados sobre o documento, incluindo links suas definições de scripts e folhas de estilo.
<title> Define o título do documento, apresentado na barra de título do navegador ou na guia da página. Ele só pode conter texto e todas as tags contidas não são interpretados.
<base> Define a URL base para URL relativa na página.

Metadados de documento

Elemento Descrição
<link> Usado para linkar arquivos externos, geralmente CSS.
<meta> Define os metadados que não podem ser definidas usando outro elemento HTML.
<style> Tag usada para escrever CSS dentro do documento HTML.

Scripting

Elemento Descrição
<script> Define um script interno ou link para um script externo. A linguagem de script é JavaScript.
<noscript> Define um conteúdo alternativo a ser exibido quando o navegador não suporta scripts.
<template> Container para conteúdo no lado cliente instanciado em tempo de execução usando JavaScript.

Seções

Elemento Descrição
<body> Representa o principal conteúdo de um documento HTML. Há apenas um elemento <body> em um documento.
<section> Define uma seção em um documento HTML.
<nav> Define uma seção que contém apenas links de navegação.
<article> Define que pode existir de forma independente do resto do conteúdo. Esta tag poderia ser um post no fórum, um artigo de revista ou jornal, uma entrada de log da Web, um comentário enviado pelo usuário, ou qualquer outro item independente do conteúdo.

Seções

Elemento Descrição
<aside> Define um conteúdo reservado do resto do conteúdo da página. Se for removida, o conteúdo restante ainda fazem sentido.
<h1>,<h2>,
<h3>,<h4>,
<h5>,<h6> 		São elementos que representam os seis níveis de titulos de cabeçalhos dos documentos. Um elemento título descreve brevemente o tema da seção.
<hgroup> Agrupa um conjunto de elementos <h1> a <h6> quando um título tem vários níveis. Tag excluída da documentação do html5 pelo W3C.
<header> Define o cabeçalho de uma página ou seção. Muitas vezes contém um logotipo, o título do site e uma menu de navegação do conteúdo.

Seções

Elemento Descrição
<footer> Define o rodapé de uma página ou seção. Muitas vezes contém um aviso de copyright, alguns links para informações legal ou endereços para dar feedback.
<address> Define uma seção que contém informações de contato, como endereço e telefone.
<main> Define o conteúdo principal ou importante no documento. Existe apenas um elemento <main> no documento.

Agrupando conteúdo

Elemento Descrição
<p> Define uma parte que deve ser exibido como um paragrafo.
<hr> Representa uma ruptura temática entre parágrafos de um artigo ou seção ou qualquer conteúdo mais longo.
<pre> Indica que o seu conteúdo é pré-formatado e que este formato deve ser preservada.
<blockquote> Representa uma citação.

Agrupando conteúdo

Elemento Descrição
<ol> Define uma lista ordenada de itens.
<ul> Define uma lista não ordenada.
<li> Define um item de uma lista <ol> ou de uma <ul>.

Agrupando conteúdo

Elemento Descrição
<dl> Representa uma lista de definição.
<dt> Representa um item da lista de definição <dd>.
<dd> Representa a definição dos termos listados imediatamente antes dele.

Agrupando conteúdo

Elemento Descrição
<figure> O elemento figura representa um conteúdo de fluxo, opcionalmente com um subtítulo.
<figcaption> Representa a legenda do <figure>.
<div> Representa um contêiner genérico sem nenhum significado especial.

Semântica textual

Elemento Descrição
<a> Representa um hyperlink, ligando a outro recurso.
<em> Representa a enfâse do conteudo.
<strong> Representa a importância de um pedaço de texto com o forte elemento não altera o sentido da frase.
<abbr> Representa uma abreviatura ou acrônimo, eventualmente, com o seu significado.

Semântica textual

Elemento Descrição
<time> Representa um valor de data e hora, eventualmente com um equivalente legivel por máquina.
<code> Representa uma codificação.
<var> Representa uma variável, que pode ser uma expressão matemática, ou codigo de programação, um identificador representando uma constante, um símbolo identificando uma quantificação física, um parametro de função ou um mero espaço reservado.
<samp> Representa uma saída de um programa de computador.
<kbd> Representa uma entrada do usuário, geralmente pelo teclado, mas não necessáriamente, podendo representar outro tipo de entrada como comandos de voz transcritos.

Semântica textual

Elemento Descrição
<b> Representa um texto que chama atenção para fins utilitários. Ele não transmite importância extra e não implica uma voz alternativa.
<span> Representa o texto com nenhum significado específico. Deve ser usado quando nenhum outro elemento semântico transmite um significado adequado, o que, neste caso, é frequentemente trazida por atributos globais, como class, lang, ou dir.
<br> Representa uma quebra de linha.

Conteúdo embutido

Elemento Descrição
<img> Representa uma imagem.
<iframe> Representa um contexto de navegação aninhada, que é um documento HTML incorporado.
<embed> Representa um ponto de integração para um, muitas vezes não HTML externo, a aplicação de conteúdo interativo.
<video> Representa um vídeo, e seus arquivos de áudio e legendas, associadas com a interface necessária para reproduzi-lo.
<audio> Representa um som, ou fluxo de áudio.
<source> Permite aos autores especificar fontes de mídia alternativos para elementos como <video> ou <audio>.

Conteúdo embutido

Elemento Descrição
<canvas> Representa uma área de bitmap que os scripts podem ser usados para renderizar gráficos, como jogos ou quaisquer imagens renderizadas em tempo real.
<svg> Define uma imagem vectorial incorporada.
<math> Define uma fórmula matemática.

Tabulação de dados

Elemento Descrição
<table> Representa dados com mais de uma dimensão.
<tbody> Representa o bloco de linhas que descreve os dados de uma <table>.
<thead> Representa o bloco de linhas que descreve o título de uma coluna.
<tfoot> Representa o bloco de linhas que descreve o resumo de uma coluna.
<tr> Representa uma linha de células de uma tabela.
<td> Representa uma célula de dados numa tabela.
<th> Representa uma célula de cabeçalho de uma tabela.

Formulários

Elemento Descrição
<form> Representa um formulário, que consiste em controles, que podem ser enviados para um servidor para processamento.
<fieldset> Representa um conjunto de controles.
<legend> Representa a legenda para um <fieldset>.
<label> Representa a legenda de um controle de um <form>.
<input> Representa um campo de dados digitados permitindo que o usuário edite os dados.

Formulários

Elemento Descrição
<button> Representa um botão.
<select> Representa um controle que permite a seleção entre um conjunto de opções.
<datalist> Representa um conjunto de opções pré-definidas para outros controles.
<optgroup> Representa um conjunto de opções, agrupados logicamente.
<option> Representa uma opção em um elemento <select>, ou uma sugestão de um elemento <datalist>.

Formulários

Elemento Descrição
<textarea> Representa um controle de edição de texto multi linhas.
<output> Representa o resultado de um cálculo.
<progress> Representa o progresso de uma tarefa.
<meter> Representa uma medida escalar (de um valor fracionário), dentro de um intervalo conhecido.

Referência usada

Mozilla Developer Network.

Cascading Style Sheets

CSS (Cascading Style Sheets).

É uma linguagem de estilo utilizada para descrever a apresentação de um documento escrito em HTML ou outras linguagens de marcação, como SVG.

Seletores

Seletor Seleciona Tipo Versão
* Quaisquer elemento Seletor universal 2
E Elementos tipo E Seletor tipo 1
E[foo] Elementos com atributo "foo" Seletor atributo 2
E[foo="bar"] Elementos E cujo valor do atributo "foo" é exatamente igual a "bar" Seletor atributo 2
E[foo~="bar"] Elementos E cujo valor do atributo "foo" é uma lista de valores separados por espaço, um dos quais é exatamente igual a "bar" Seletor atributo 2

Seletores

Seletor Seleciona Tipo Versão
E[foo^="bar"] Elementos E cujo valor do atributo "foo" começa exatamente com a string "bar" Seletor atributo 3
E[foo$="bar"] Elementos E cujo valor do atributo "foo" termina exatamente com a string "bar" Seletor atributo 3
E[foo*="bar"] Elementos E cujo valor do atributo "foo" contém a substring "bar" Seletor atributo 3
E[foo|="en"] Elementos E cujo atributo "foo" tem uma lista de valores começando com "en" e seguida por um hífen Seletor atributo 2

Seletores

Seletor Seleciona Tipo Versão
E:root Elemento E raíz do documento Pseudo-classe estrutural 3
E:nth-child(n) Elemento E que é o enésimo filho do seu elemento pai Pseudo-classe estrutural 3
E:nth-last-child(n) Elemento E que é o enésimo filho (contado de trás para frente) do seu elemento pai Pseudo-classe estrutural 3

Seletores

Seletor Seleciona Tipo Versão
E:nth-of-type(n) Elemento E que é o enésimo irmão do seu tipo Pseudo-classe estrutural 3
E:nth-last-of-type(n) Elemento E que é o enésimo irmão (contado de trás para frente) do seu tipo Pseudo-classe estrutural 3

Seletores

Seletor Seleciona Tipo Versão
E:first-child Elemento E que é o primeiro filho do seu elemento pai Pseudo-classe estrutural 2
E:last-child Elemento E que é o último filho do seu elemento pai Pseudo-classe estrutural 3
E:first-of-type Elemento E que é o primeiro irmão de seu tipo Pseudo-classe estrutural 3
E:last-of-type Elemento E que é o último irmão de seu tipo Pseudo-classe estrutural 3

Seletores

Seletor Seleciona Tipo Versão
E:only-child Elemento E que é o único filho de seu elemento pai Pseudo-classe estrutural 3
E:only-of-type Elemento E que é irmão único do seu tipo Pseudo-classe estrutural 3
E:empty Elemento E que não tem elementos filhos (inclusive nós de texto) Pseudo-classe estrutural 3

Seletores

Seletor Seleciona Tipo Versão
E:link,
E:visited 		Elemento E que sendo destino de um link ainda não foi visitado (:link) ou que já tenha sido visitado (:visited) Pseudo-classe link 1
E:active,
E:hover,
E:focus 		Elemento E durante determinadas ações do usuário Pseudo-classe ação do usuário 1 e 2
E:target Elemento E que é o destino de um fragmento identificador de um URI Pseudo-classe :target 3

Seletores

Seletor Seleciona Tipo Versão
E:lang(pt-br) Elemento E em um determinado idioma - "exemplo: pt-br" Pseudo-classe :lang() 2
E:enabled,
E:disabled 		Elemento E de uma interface de usuário que está habilitado (:enabled) ou desabilitado (:disabled) Pseudo-classe estado do elemento UI 3
E:checked Elemento E de uma interface de usuário que está marcado (:checked) (por exemplo: radio-button ou checkbox) Pseudo-classe estado do elemento UI 3

Seletores

Seletor Seleciona Tipo Versão
E:first-line Primeira linha formatada do elemento E Pseudo-elemento :first-line 1
E:first-letter Primeira letra formatada do elemento E Pseudo-elemento :first-letter 1
E:before Conteúdo gerado antes do elemento E Pseudo-elemento :before 2
E:after Conteúdo gerado depois do elemento E Pseudo-elemento :after 2

Seletores

Seletor Seleciona Tipo Versão
E.foo Elemento E cujo valor da classe é "foo" Seletor classe 1
E#foo Elemento E cujo valor do id é "foo" Seletor id 1
E:not(selector) Elemento E que não casa com o seletor simples seletor Pseudo-classe negação 3

Seletores

Seletor Seleciona Tipo Versão
E F Elemento F descendente do elemento E Elemento descendente 1
E > F Elemento F filho do elemento E Elemento filho 2
E + F Elemento F imediatamente precedido pelo elemento E Elemento irmão adjacente 2
E ~ F Elemento F precedido pelo elemento E Elemento irmão geral 3

Referência usada

Maujor - Guia de seletores CSS.

Responsividade

O Web design responsivo (RWD, na sigla em inglês) é uma configuração na qual o servidor sempre envia o mesmo código HTML a todos os dispositivos, e o CSS é usado para alterar o processamento da página no dispositivo.

Responsividade

Media Queries é a utilização de Media Types com uma ou mais expressões envolvendo características de uma media para definir formatações para diversos dispositivos.


...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...

Media queries

Para sinalizar aos navegadores que sua página se adaptará a todos os dispositivos, adicione uma metatag ao cabeçalho do documento:


...
<link rel="stylesheet" href="assets/css/mobile.css" media="screen and (max-width:...px)">
...

Media queries no CSS


...
/* Dispositivos pequenos (tablets, 768px e maior). */
@media (min-width: 768px) { ... }

/* Dispositivos médios (desktops, 992px e maior). */
@media (min-width: 992px) { ... }

/* Dispositivos grandes (grandes desktops, 1200px e maior). */
@media (min-width: 1200px) { ... }
...

Media queries no CSS

Definindo limites mínimos e máximos


...
/* Dispositivos (768px até 992px). */
@media (min-width: 768px) and (max-width: 992px) { ... }
...

Twitter Bootstrap

Bootstrap torna o desenvolvimento web front-end mais rápido e fácil. É feito para desenvolvedores de todos os níveis, todos dispositivos e projetos de qualquer tamanho.

Iniciando um projeto

Execute o comando a seguir no terminal para fazer download dos arquivos do framework e suas dependências:

Pré requisitos: NodeJS e bower ou npm instalados.


$ mkdir layout-loja-de-cerveja

$ cd layout-loja-de-cerveja

$ bower install bootstrap
// OU
$ npm install bootstrap

Layout base

Crie um arquivo index.html com o seguinte conteúdo:
Gist Index Loja de Cerveja

Loja de Cerveja

Gist Loja de Cerveja Template

JavaScript

JavaScript != Java

Criada pelo Brendan Eich

Eu e Brendan Eich :D

Me and Brendan Eich

Mas vamos ao que interessa

Funções como objetos de primeira classe

Desfrutam de certas capacidades

  • Podem ser criados por meio de literais;
  • Podem ser atribuídos a variáveis, entradas de arrays e propriedades de outros objetos;
  • Podem ser transmitidos como argumentos para funções;
  • Podem ser retornados como valores a partir de funções;
  • Podem contar com propriedades que podem ser criadas e atribuídas dinamicamente

Loop de eventos do navegador

Dentre outros, os tipos de eventos a seguir podem ocorrer

  • Eventos do navegador;
  • Eventos de rede;
  • Eventos de usuários;
  • Eventos de temporizadores

Exemplo


function startup() {
    /* Faz algo maravilhoso */
}
window.onload = startup;

// OU AINDA

window.onload = function() { /* Faz algo maravilhoso */ }

O conceito de callback

Sempre que configuramos uma função que será chamada futuramente, estamos configurando o que é chamado de um callback.

Essencial para o uso efetivo do JavaScript!

Exemplo


function useless(callback) {
    return callback();
}

Escopos e funções

Em JavaScript, escopos são declarados por funções e não por blocos, ou seja, o tempo de vida de uma variável é definido pela funções onde ela foi declarada, e não no fim do bloco como ocorre em outras linguagens.

Exemplo


if (window) {
    var x = 123;
}
console.log(x);

Contexto de funções usando métodos apply e call


function somaArgumentos() {
    var result = 0;
    for (var n = 0; n < arguments.length; n++) {
        result += arguments[n];
    }
    this.result = result;
}
var obj1 = {};
var obj2 = {};

somaArgumentos.apply(obj1, [1,2,3,4]); // obj1.result === 10
somaArgumentos.call(obj2, 1, 2, 3, 4); // obj2.result === 10

Exemplo de contexto, método call e callback


function forEach(list, callback) {
    for (var n = 0; n < list.length; n++) {
        callback.call(list[n],n);
    }
}

var armas = ['machado','glock'];

forEach(armas, function(index) {
    console.log(this);
    console.log(armas[index]);
});

Vamos para o framework!

AngularJS

Veremos um pouco do poder deste framework


$ mkdir loja-de-cerveja

$ cp -R layout-loja-de-cerveja/* loja-de-cerveja/

$ cd loja-de-cerveja

$ bower install angular
// OU
$ npm install angular

AngularJS

HTML aprimorado para aplicativos da web!

Por quê AngularJS?

HTML é ótimo para declarar documentos estáticos, mas vacila quando tentamos usá-lo para declarar visualizações dinâmicas em aplicações web. AngularJS permite estender elementos HTML para a sua aplicação. O resultado é expressivo, legível e rápido para se desenvolver.

Frameworks MV*

Backbone.js Ember.js
Knockout.js Angular.js
Cappuccino JavaScript MVC
Meteor Spice.js
Riot.js CanJS

JavaScript The Right Way

Criado pelo Google, Angular.js é como um polyfill para o futuro do HTML.

Não fui eu quem disse.

Características do AngularJS

SPA (Single Page Applications)

Aplicações inteiramente contidas no browser que não precisam fazer requisições de novas páginas no servidor.

Características do AngularJS

  • Separação de responsabilidades
    • Controllers
    • Services
    • Factories
    • Directives
    • Providers
  • Estrutura MVC ou MVWhatever
  • Injeção de dependências (Dependency Injection)
  • Ligação de dados (Data Binding)
  • Rotas

Modularização com AngularJS

Criação de módulos reutilizáveis ficou fácil.

Por consequência disso, atualmente com uma busca no NPM por angular retornam em 4.323 resultados e no bower 6.043.

Exemplo de app simples


<!doctype html>
<html ng-app>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    </head>
    <body>
        <div>
            <label>Nome:</label>
            <input type="text" ng-model="seuNome" placeholder="Seu nome">
            <hr>
            <h1>Olá {{seuNome}}!</h1>
        </div>
    </body>
</html>

Dando poder ao HTML com diretivas do AngularJS


<div ng-controller="UsuarioCtrl as ctrl">
    <form ng-submit="ctrl.submit()" name="usuarioForm" novalidate>
        <div>
            <label>Usuário<label>
            <input type="text" name="usuario" ng-model="ctrl.usuario" ng-minlength="5" ng-maxlength="10" required>
            <div ng-show="usuarioForm.$submitted || usuarioForm.usuario.$touched">
                <div ng-show="usuarioForm.usuario.$error.required">Preencha seu nome.</div>
                <div ng-show="usuarioForm.usuario.$error.minlength">Deve ter mais de 5 caracteres.</div>
                <div ng-show="usuarioForm.usuario.$error.maxlength">Deve ter menos de 10 caracteres.</div>
            </div>
        </div>
        <div>
            <button type="submit" ng-disabled="usuarioForm.$invalid">Salvar</button>
        </div>
    </form>
</div>

AngularJS

Vamos colocar a mão na massa!

Layout base

Crie um arquivo index.html com o seguinte conteúdo:
Gist Index Loja de Cerveja

Loja de Cerveja

Gist Loja de Cerveja Template

Bóra fazer a loja funcionar...

Obrigado por participarem, espero que tenham aproveitado!

- github.com/guiseek
- guiseek.js.org