HTML5 + CSS3 - Do Zero e do Jeito Certo

ALCIDES QUEIROZ

Do zero e do jeito certo

@alcidesqueiroz

@alcidesqueirozalcidesqueiroz@gmail.com

@alcidesqueirozalcidesqueiroz@gmail.comgithub.com/alcidesqueiroz

@alcidesqueirozalcidesqueiroz@gmail.comgithub.com/alcidesqueirozalcidesqueiroz.com

@alcidesqueirozalcidesqueiroz@gmail.comgithub.com/alcidesqueirozalcidesqueiroz.com (???)

Do zero?

Do jeito certo?

APRESENTAÇÃO

BREVE HISTÓRICO (Internet)

1957 - ARPA surge

APRESENTAÇÃO

1957 - ARPA surge

1969 - O primeiro e-mail é transmitido em rede

APRESENTAÇÃO

1957 - ARPA surge

1969 - O primeiro e-mail é transmitido em rede

1969 - A ARPANET entra em funcionamento

APRESENTAÇÃO

197* - ARPANET em Universidades

APRESENTAÇÃO

197* - ARPANET em Universidades1971 - Vinton Cerf cunha o termo

APRESENTAÇÃO

197* - ARPANET em Universidades1971 - Vinton Cerf cunha o termo Internet1973 – Primeira conexão entre continentes

APRESENTAÇÃO

197* - ARPANET em Universidades1971 - Vinton Cerf cunha o termo Internet1973 – Primeira conexão entre continentes1977 - Criação do TCP/IP

APRESENTAÇÃO

197* - ARPANET em Universidades1971 - Vinton Cerf cunha o termo Internet1973 – Primeira conexão entre continentes1977 - Criação do TCP/IP1979 - Criada a USENET

APRESENTAÇÃO

1981 - Lançado o IBM PC

APRESENTAÇÃO

1983 - É criada a MILNET

APRESENTAÇÃO

1983 - TCP/IP é adotado

APRESENTAÇÃO

1983 - TCP/IP é adotado

1984 - ARPANET possui 1000 servidores

APRESENTAÇÃO

DNS, BBS, IRC, USENET, e-mail,TCP/IP ...

APRESENTAÇÃO

BREVE HISTÓRICO (Web)

APRESENTAÇÃO

A motivação

APRESENTAÇÃO

A motivação

A linguagem HTML

APRESENTAÇÃO

A motivação

A linguagem HTML

O protocolo HTTP

APRESENTAÇÃO

A motivação

A linguagem HTML

O protocolo HTTP

APRESENTAÇÃO

1980 - TBL cria o ENQUIRE

APRESENTAÇÃO

1980 - TBL cria o ENQUIRE

1989 - TBL e Robert Cailliau realizam a primeira comunicação bem sucedida entre um cliente HTTP e um servidor na Internet

APRESENTAÇÃO

1990 - Surge o HTML

APRESENTAÇÃO

1990 - Surge o HTML

1993 - Primeiro servidor HTTP

APRESENTAÇÃO

1990 - Surge o HTML

1993 - Primeiro servidor HTTP

1993 - Primeira página da Web

APRESENTAÇÃO

BREVE HISTÓRICO (HTML)

APRESENTAÇÃO

Criada por Tim Berners-Lee e Robert Cailliau em 1989

O piloto foi realizado no CERN

APRESENTAÇÃO

Linguagem de marcação dehipertexto

APRESENTAÇÃO

Linguagem de Marcação??

É um conjunto de códigos aplicados a um texto ou a dados, com o fim de adicionar informações particulares sobre esse texto ou dado, ou sobre trechos específicos.

Olá, meu nome é João, sou filho de Marta e moro em Fortaleza.

Olá, meu nome é <nome>João</nome>, sou filho de <nome>Marta</nome> e moro em <cidade>Fortaleza </cidade>.

Linguagem de Programação !=

Linguagem de Marcação

if (idade == 18) { for (var i = 0; i < 10; i++){ alert(“Essa é uma mensagem \ sem sentido”);

APRESENTAÇÃO

Hipertexto??

Termo cunhado por Ted Nelson em 1965

Hipertexto??

Termo cunhado por Ted Nelson em 1965

Texto não necessariamente

linear

Hipertexto??

Hipermídia??

Termo de autoria também atribuída a Ted Nelson

Hipermídia??

Termo de autoria também atribuída a Ted Nelson

É o hipertexto que não está limitado a conter apenas texto, podendo possuir imagens, vídeos, sons, etc.

Hipermídia??

Continuando...

Derivada da SGML e HyTime

APRESENTAÇÃO

BREVE HISTÓRICO

APRESENTAÇÃO

Instruções que marcam e adicionam semântica ao hipertexto.

APRESENTAÇÃO

ATRIBUTOS

Propriedades de um elemento

APRESENTAÇÃO

SEMÂNTICA NA WEB

As tags do HTML carregam um significado.

APRESENTAÇÃO

WEB STANDARDS

Normas criadas pelo W3C, a serem ser implementadas pelos browsers do mercado e seguidas pela comunidade de desenvolvimento.

MÃOS NO SUBLIME TEXT!

OU NÃO...

AS TAGS DO HTML (ATÉ 4.01)

<html>

Representa um documento HTML

<html> - atributo lang

Usado para que os user-agents saibam qual é a linguagem principal do documento.

<head>

Contém meta-dados a respeito do documento

<title>

Representa o título da página, que constará na barra de título do navegador.

<title>

<title>Don't panic!</title>

<body>

Representa o corpo da página.

<body>

Godfather é o melhor filme da história.

</body>

<h1> a <h6> (Headings)

Representam cabeçalhos de diferentes níveis de importância no documento

<h1> a <h6> (Headings)

<h1>A Linguagem Ruby</h1><h2>Introdução</h2><h3>História</h3>

Representa um link para outro recurso na web, ou para um trecho específico desse recurso.

<a href=”sobre.html”>Sobre a empresa</a><a href=”mailto:eu@joao.com”>e-mail</a><a href=”http://google.com”> Google</a>

<a> - atributo href

<a href=”localizacao”>Especifica a localização do recurso

<a> - atributo name

<a name=”rodape”></a>Nomeia um ponto específico de um documento para que possa ser referenciado por outros links.

<a href=”#rodape”>Rodapé</a>

<a> - atributo name

atributo name se tornou obsoleto no HTML5

Representa uma imagem

<img> - atributo src

Representa o caminho (absoluto ou relativo) para a imagem

Representa um parágrafo

<p>Exemplo de um parágrafo qualquer, este texto não deve fazer sentido algum.

Let's Code!

gist.github.com/alcidesqueiroz

<table>

Tag usada para apresentar dados em formato tabular.

Representa uma linha de uma tabela.

Representa uma célula de uma tabela.

<td> - atributo colspan

Número de colunas pelo qual a célula irá se expandir

<td> - atributo rowspan

Número de linhas pelo qual a célula irá se expandir

<table>, <tr> e <td><table> <tr> <td>Código</td> <td>Descrição Produto</td> </tr> <tr> <td>0001</td> <td>Camisa Polo</td> </td></table>

Let's Code!

<form>

Representa um formulário.

<form> - atributos

action<form action=”enviar.aspx”>

Representa a URL do recurso que irá receber os dados do formulário e que realizará o processamento desejado

<form> - atributos

method<form action=”enviar.aspx” method=”get”>

Representa o método HTTP que será usado para envio do formulário

Método GET

Para submeter o formulário, os valores de seus campos são concatenados à URL.

Método GET

http://teste.com/processa?nome=joao&idade=32&sexo=m

Método POST (default)

Os dados do formulário são enviados nos headers das solitações HTTP

<input>

Representa um campo de um formulário.

<input> - atributos

type button, checkbox, file, hidden, image, password, radio, reset, submit, text

Representa uma caixa de seleção.

Representa uma opção de um select.

<option> - atributo value

O valor da opção. É o que será submetido ao servidor.

Representa uma caixa de texto multilinha.

<textarea> - atributo rows

Número de linhas

<textarea> - atributo cols

Número de colunas

Representa um botão.

<label>

Representa um rótulo.

<label> - atributo for

Especifica o ID do campo ao qual a label está associada.

Let's Code!

Representam uma divisão em um site.

Representa uma linha horizontal.

Representa uma lista ordenada.

Representa um item de lista.

Representa uma lista não ordenada.

Let's Code!

Dá ênfase a algo

Representa uma página “embutida” em outra. [Inline Frame]

Localização da página

<link>

Define um relacionamento entre um documento e um recurso externo.

<link>

Suporte real apenas para folhas de estilo e favicons.

Especifica a localização do recurso externo

Especifica o tipo de relacionamento

Código em um linguagem de script (por padrão JavaScript), ou URI para arquivo de script externo.

Especifica a localização do script

<meta>

Representa um meta-dado sobre o documento.

Nome do meta-dado

Valores possíveis:

author, description, keywords, reply-to

Valor do meta-dado

Texto pré-formatado. Preserva espaços e quebras de linha e é exibido em fonte mono-espaçada.

<style>

Trecho de código CSS.

SENDO MAIS SEMÂNTICO

<abbr>

Define siglas e abreviações.

Define um endereço

Define uma citação

Legenda para tabelas. Por padrão centralizada.

<code>

Trecho de código

<code>

<code>Código Inline</code><pre> <code> Código multilinha </code></pre>

Texto que foi deletado de um documento

Texto que foi inserido em um documento.

Geralmente sublinhado.

Agrupa campos relacionados de um formulário

Adiciona uma legenda a um fieldset

<samp>

Exemplo de saída de código

<tfoot>

Rodapé de uma tabela

<thead>

Cabeçalho de uma tabela

Célula-título de uma tabela

USAR COM BOM-SENSO

Na dúvida, não use.

USAR COM BOM-SENSO

Prefira usar a tag <strong>

USAR COM BOM-SENSO

Prefira usar a tag <em>

Let's Code!

COMENTÁRIOS EM HTML

DOCTYPE

<!DOCTYPE html>

Define a versão do html na qual o documento foi escrito, fazendo com que o navegador renderize uma página corretamente

BREVE HISTÓRICO

1994 - Proposto por Håkon Wium Lie

BREVE HISTÓRICO

1994 - Proposto por Håkon Wium Lie1996 - W3C lança recomendação oficial do CSS1

BREVE HISTÓRICO

1994 - Proposto por Håkon Wium Lie1996 - W3C lança recomendação oficial do CSS11996 - IE3 lança suporte parcial

BREVE HISTÓRICO

1994 - Proposto por Håkon Wium Lie1996 - W3C lança recomendação oficial do CSS11996 - IE3 lança suporte parcial

1998 - W3C lança recomendação do CSS2

A LINGUAGEM

SEPARAÇÃO DE RESPONSABILIDADES

A LINGUAGEM

SEPARAÇÃO DE RESPONSABILIDADES

A LINGUAGEM

FOLHA DE ESTILO

A LINGUAGEM

FOLHA DE ESTILO EM CASCATA

A LINGUAGEM

COMPATIBILIDADE CROSSBROWSER

A LINGUAGEM

PROPRIEDADES

A LINGUAGEM

REGRAS

A LINGUAGEM

SELETORES

A LINGUAGEM

PSEUDO-ELEMENTOS

A LINGUAGEM

PSEUDO-CLASSES

SELETORES DO CSS(ATÉ O 2)

* [Universal]

E > F[filhos]

E:first-child [pseudo-classe first-child]

E:link E:visited[pseudo-classes de link]

E:active E:hover E:focus[pseudo-classes dinâmicas]

E + F [adjacentes]

E[foo] [possui atributo]

E[foo="warning"] [possui atributo igual a]

E[foo~="warning"] [possui atributo que contém (independente de possuir espaços)]

DIV.classe

E#id [id]

COMENTÁRIOS EM CSS(ATÉ O 2)

/*Este é um comentário*/

PROPRIEDADES DO CSS(ATÉ O 2)

background

background-color

background-image

background-repeat

border

height

max-height

max-width

min-height

min-width

font-family

font-size

font-style

font-weight

list-style-type

square, circle, bullet, none

margin

padding

cursor

display

none, inline, block, inline-block

overflow

visible, hidden, scroll, auto

position

bottom

z-index

letter-spacing

line-height

text-align

text-decoration

underline, overline, line-through, none

text-indent

text-transform

uppercase, capitalize, lowercase

vertical-align

word-spacing

UM NOVO FOCO

MAIS SEMÂNTICA

NOVIDADES

AS TAGS DO HTML5

AS TAGS DO HTML5

AS TAGS DO HTML5

Título de uma seção details

AS TAGS DO HTML5

Título de uma section. Pode conter headings, hgroups (removido da especificação em abril/13), content tables, logos, search form

AS TAGS DO HTML5

Agrupa items que possuam relação entre si, e cujo agrupamento não seja meramente para fins de posicionamento

AS TAGS DO HTML5

Rodapé, geralmente último elemento do documento

AS TAGS DO HTML5

Conteúdo agrupado, importante e passível de utilização em feeds

AS TAGS DO HTML5

Uma figura, que possivelmente possuirá legenda

AS TAGS DO HTML5

Legenda de uma figura

AS TAGS DO HTML5

AS TAGS DO HTML5

<datalist> - fallbackDigite seu time: <input list="times"><datalist id="times"> <label>Ou escolha na lista a seguir</label> <select> <option value="Ceará"> <option value="Fortaleza"> <option value="Uniclinic"> </select></datalist>

AS TAGS DO HTML5

<mark>

Efetua highlight de um texto e denota que o mesmo possui maior destaque

AS TAGS DO HTML5

<meter>

Medidor em formato de barra

AS TAGS DO HTML5

<meter> - atributo min

AS TAGS DO HTML5

<meter> - atributo max

AS TAGS DO HTML5

<meter> - atributo value

AS TAGS DO HTML5

Um tipo de section, que agrupa links de navegação

AS TAGS DO HTML5

<aside>

Citação, sidebars, anúncios publicitários, grupos de navegação

AS TAGS DO HTML5

Representa o resultado de um cálculo

AS TAGS DO HTML5

<form >

</form>

AS TAGS DO HTML5

Barra de progresso, geralmente usada para representar o progresso de uma determinada tarefa

AS TAGS DO HTML5

<time>

Representa uma data, hora ou ambos

AS TAGS DO HTML5

<time> - atributo datetime

TAGS DEPRECADAS

TAGS DEPRECADAS

TAGS DEPRECADAS

TAGS DEPRECADAS

TAGS DEPRECADAS

<font>

TAGS DEPRECADAS

<frame>

TAGS DEPRECADAS

TAGS DEPRECADAS

TAGS DEPRECADAS

TAGS DEPRECADAS

CSS3 - Seletores

element1~element2 [sequenciais]

CSS3 - Seletores

[attribute^=value]

Inicia exatamente com a string value

CSS3 - Seletores

[attribute$=value]

Termina exatamente com a string value

CSS3 - Seletores

[attribute*=value]

Contém a string value

CSS3 - Seletores

:first-of-type

CSS3 - Seletores

:last-of-type

CSS3 - Seletores

:only-of-type

CSS3 - Seletores

:only-child

CSS3 - Seletores

:nth-child(n)

CSS3 - Seletores

:nth-last-child(n)

CSS3 - Seletores

:nth-of-type(n)

CSS3 - Seletores

:nth-last-of-type(n)

CSS3 - Seletores

:last-child

CSS3 - Seletores

:empty (sem filhos, nem ao menos text-nodes)

CSS3 - Seletores

:enabled

CSS3 - Seletores

:disabled

CSS3 - Seletores

:checked

CSS3 - Seletores

:not(selector)

CSS3 - Seletores

::selection

padding-box, content-box, border-box, text

CSS3 - Propriedades

background-clip

CSS3 - Propriedades

background-position

left top, left center, left bottom, 50% 50%, 10px 200px

CSS3 - Propriedades

background-origin

padding-box, content-box, border-box

CSS3 - Propriedades

background-size

width height

200px200px auto

50% 50%contain e cover

CSS3 - Propriedades

border-radius

border-radius: 12px;

border-top-left-radius: 25px;

CSS3 - Propriedades

box-decoration-break

slice clone

CSS3 - Propriedades

box-shadow

box-shadow: hr vr blur color;

CSS3 - Propriedades

overflow-x

CSS3 - Propriedades

overflow-y

CSS3 - Propriedades

Rotate (CSS Transformations)

transform: rotate(90deg)

CSS3 - Propriedades

opacity

opacity: 0.5;

CSS3 - Propriedades

text-shadow

text-shadow: hr vr blur color;

CSS3 - Propriedades

transition

transition: background-color 800ms ease;

linear, ease, ease-in, ease-out

Pré-processadores CSS

Sass, LESS, Stylus

HTML5 + CSS3 - Do Zero e do Jeito Certo

Technology

Transcript of HTML5 + CSS3 - Do Zero e do Jeito Certo

Html5,css3,javascript o lugar onde sonhos se tornam realidade.

HTML5＆CSS3、レスポンシブWebデザインに対 …iip-kanazawa.co.jp/img/kunren/koukyou/PDF/koukyou28_09...HTML5＆CSS3、レスポンシブWebデザインに対応！ Web制作の一連の流れを理解し、Webコンテンツを構成する素材を自ら作成する

UNIDADE FERNANDES LIMA - sintect-al.com.br · Palestra: Páginas Web com HTML5 e CSS3 (4h) Java: Programação Orientada a Objetivos e Banco de Dados (80h) Montador e Reparador de

Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3

HTML5＆CSS3、レスポンシブWebデザインに対応！ Web ......HTML5＆CSS3、レスポンシブWebデザインに対応！ Web制作の一連の流れを理解し、Webコンテンツを構成する素材を自ら作成する

The Developer's Conference (TDC) 2013 - Florianópolis: HTML5 + CSS3 em múltiplos browsers, em múltiplas plataformas e em múltiplos dispositivos

HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE

HTML5 e CSS3 - UFPEdfop/Arquivos/Pacote Web/HTML5 e... · 2012. 1. 28. · ÍNDICE Uma breve história 15 as 3 camadas de desenvolvimento 19 Primeira camada: Informação 20 Segunda

O W3C Futuro da Web HTML5W3C - Futuro da Web - HTML5 Futuro da Web Conectividade – CSS3 – Acesso de dispositivos – Gráficos 3D e Efeitos – Multimídia – Performance e Integração

Html5 e css3 mural do marujo

HTML5 e CSS3 : Por onde começar no mercado editorial ?

HTML5 웹 프그래밍 문 4장. CSS3 스타일시트 기초 - HANSUNGitsys.hansung.ac.kr/.../upload/HTML5_chapter04.pdf · 2016-05-12 · 스타일시트와 css3 기본 개념 스타일시트란?

Html5,css3,javascript: O lugar onde sonhos se tornam realidade.

HTML5 + CSS3 em múltiplos browsers, em múltiplas plataformas e em múltiplos dispositivos

アジャストアカデミー · HTML5・CSS3を使い、PC ... SNSリスク対策概論 SNS ... Photohshopクリエイター能力認定試験(スタンダード) 03-5291-9518.

Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3

HTML5, CSS3 e o futuro da web

アジャストアカデミー · html5・css3を使い、pc、スマホ、タブレットなどマルチデバイスで表示可能なレスポンシブデザインのス マートフォンサイトを作成:

Quero ser um ninja em xHTML, HTML5 e CSS3

Minicurso introdução ao html5 e css3

アジャストアカデミー · html5・css3を使い、pc、スマホ、タブレットなどマルチデバイスで表示可能なレスポンシブデザインのスマートフォンサイトを作成: