Html5css3 dozeroedojeitocerto-130520201244-phpapp02

+

ALCIDES QUEIROZ

Do zero e do jeito certo

@alcidesqueiroz

@[email protected]

@[email protected]/alcidesqueiroz

mailto:[email protected]

@[email protected]/alcidesqueirozalcidesqueiroz.com


@[email protected]/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


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

URI

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

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.


Ex:

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


Ex:

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

TAGS

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

APRESENTAÇÃO

ATRIBUTOS

Propriedades de um elemento

HTML

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!

MÃOS NO SUBLIME TEXT!

OU NÃO...

AS TAGS DO HTML (ATÉ 4.01)


<html>

Representa um documento HTML


<html> - atributo lang

<html lang=”pt-br”>

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>

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


<a>

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


<a>

<a href=”sobre.html”>Sobre a empresa</a><a href=”mailto:[email protected]”>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

Dica:

atributo name se tornou obsoleto no HTML5


<img>

Representa uma imagem


<img> - atributo src

<img src =”logo.png”/>

Representa o caminho (absoluto ou relativo) para a imagem


<p>

Representa um parágrafo


<p>

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

</p>

Let's Code!

gist.github.com/alcidesqueiroz


<table>

Tag usada para apresentar dados em formato tabular.


<tr>

Representa uma linha de uma tabela.


<td>

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

Ex:

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


<select>

Representa uma caixa de seleção.


<option>

Representa uma opção de um select.


<option> - atributo value

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


<textarea>

Representa uma caixa de texto multilinha.


<textarea> - atributo rows

Número de linhas


<textarea> - atributo cols

Número de colunas


<button>

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!


<div> e <span>

Representam uma divisão em um site.


<hr>

Representa uma linha horizontal.


<ol>

Representa uma lista ordenada.


<li>

Representa um item de lista.


<ul>

Representa uma lista não ordenada.

Let's Code!


<strong>

Dá ênfase a algo


<pre>

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

SENDO MAIS SEMÂNTICO


<abbr>

Define siglas e abreviações.


<address>

Define um endereço


<blockquote>

Define uma citação


<caption>

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>


<del>

Texto que foi deletado de um documento


<ins>

Texto que foi inserido em um documento.

Geralmente sublinhado.


<fieldset>

Agrupa campos relacionados de um formulário


<legend>

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


<th>

Célula-título de uma tabela

USAR COM BOM-SENSO

<br>

Na dúvida, não use.

USAR COM BOM-SENSO

<b>

Prefira usar a tag <strong>

USAR COM BOM-SENSO

<i>

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

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


width


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


right


left


top


z-index


color


letter-spacing


line-height


text-align


text-decoration

underline, overline, line-through, none


text-indent


text-transform

uppercase, capitalize, lowercase


vertical-align


word-spacing


float

HTML5

UM NOVO FOCO

HTML5

MAIS SEMÂNTICA

HTML5

NOVIDADES

AS TAGS DO HTML5

<canvas>

AS TAGS DO HTML5

<details>

AS TAGS DO HTML5

<summary>

Título de uma seção details

AS TAGS DO HTML5

<header>

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

<section>

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

AS TAGS DO HTML5

<footer>

Rodapé, geralmente último elemento do documento

AS TAGS DO HTML5

<article>

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

AS TAGS DO HTML5

<figure>

Uma figura, que possivelmente possuirá legenda

AS TAGS DO HTML5

<figcaption>

Legenda de uma figura

AS TAGS DO HTML5

<datalist>

<input list="times"><datalist id="times"> <option value="Ceará"> <option value="Fortaleza"> <option value="Uniclinic"></datalist>

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

<nav>

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

<output>

Representa o resultado de um cálculo

AS TAGS DO HTML5

<output>

<form >

<input id="a" type="text"> +<input id="b" type="text"> =<output for="a b"></output>

</form>

AS TAGS DO HTML5

<progress>

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

<acronym>

TAGS DEPRECADAS

<applet>

TAGS DEPRECADAS

<basefont>

TAGS DEPRECADAS

<big>

TAGS DEPRECADAS

<center>

TAGS DEPRECADAS

<font>

TAGS DEPRECADAS

<frame>

TAGS DEPRECADAS

<frameset>

TAGS DEPRECADAS

<noframes>

TAGS DEPRECADAS

<strike>

TAGS DEPRECADAS

<tt>

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

:root

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

Ex:

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

Html5css3 dozeroedojeitocerto-130520201244-phpapp02

Internet

Transcript of Html5css3 dozeroedojeitocerto-130520201244-phpapp02