WEBDESIGN

https://webdesign.ranoya.com

departamento de design | UFPE

PROFESSOR

PROGRAMA

CALENDÁRIO

MEETS

BIBLIOGRAFIA

REFERÊNCIAS

PROFESSOR

PROGRAMA

CALENDÁRIO

MEETS

BIBLIOGRAFIA

REFERÊNCIAS

PROFESSOR

PROGRAMA

CALENDÁRIO

MEETS

BIBLIOGRAFIA

REFERÊNCIAS

c7tb6bu

TURMA /CLASSROOM

TECNOLOGIA

EIXO

FUNDAMENTAL

NÍVEL


DESIGN
 

ARTE

TECNO
LOGIA

PROFESSOR

PROGRAMA

CALENDÁRIO

MEETS

BIBLIOGRAFIA

REFERÊNCIAS

https://webdesign.ranoya.com

WEBDESIGN

departamento de design | UFPE

TURMA /CLASSROOM

TECNOLOGIA

EIXO

FUNDAMENTAL

NÍVEL

PROFESSOR

PROGRAMA

CALENDÁRIO

MEETS

BIBLIOGRAFIA

REFERÊNCIAS


DESIGN
 

ARTE

TECNO
LOGIA

ESTUDO DOS MATERIAIS
UTILIZADOS NO PROJETO DE
DESIGN DO PORVIR

CÓDIGO COMPUTACIONAL
COMO FERRAMENTA DE DESIGN

WEBDESIGN

departamento de design | UFPE


DESIGN
 

ARTE

TECNO
LOGIA

ESTUDO DOS MATERIAIS
UTILIZADOS NO PROJETO DE
DESIGN DO PORVIR

CÓDIGO COMPUTACIONAL
COMO FERRAMENTA DE DESIGN

CÓDIGOS

HTML + CSS

O TECIDO DAS TECNOLOGIAS CRIATIVAS

CÓDIGOS

HTML + CSS

Designers deveriam aprender a programar?

Resposta rápida:
Sim! Mas não para se tornarem
desenvolvedores de software.

O TECIDO DAS TECNOLOGIAS CRIATIVAS


DESIGN
 

ARTE

TECNO
LOGIA

ESTUDO DOS MATERIAIS
UTILIZADOS NO PROJETO DE
DESIGN DO PORVIR

CÓDIGO COMPUTACIONAL
COMO FERRAMENTA DE DESIGN

ESTUDO DOS MATERIAIS
UTILIZADOS NO PROJETO DE
DESIGN DO PORVIR

CÓDIGOS

HTML + CSS

Designers deveriam aprender a programar?

Resposta rápida:
Sim! Mas não para se tornarem
desenvolvedores de software.

Criar suas próprias ferramentas usadas para projetar;

1

Porquê, então?

O TECIDO DAS TECNOLOGIAS CRIATIVAS

ESTUDO DOS MATERIAIS
UTILIZADOS NO PROJETO DE
DESIGN DO PORVIR

O TECIDO DAS TECNOLOGIAS CRIATIVAS

AULA

Designers deveriam aprender a programar?

Resposta rápida:
Sim! Mas não para se tornarem
desenvolvedores de software.

2

Construir elementos e aspectos do artefato que são muito complicadas para se fazer manualmente, mais simples para um computador resolver;

Porquê, então?

Criar suas próprias ferramentas usadas para projetar;

1

CÓDIGOS

HTML + CSS

ESTUDO DOS MATERIAIS
UTILIZADOS NO PROJETO DE
DESIGN DO PORVIR

Resposta rápida:
sim! Mas não para se tornarem
desenvolvedores de software.

3

Entender melhor o material que tece a mídia digital, para que seus projetos sejam melhores (mais adequados e efetivos);

Porquê, então?

Criar suas próprias ferramentas usadas para projetar;

1

2

Construir elementos e aspectos do artefato que são muito complicadas para se fazer manualmente, mais simples para um computador resolver;

CÓDIGOS

HTML + CSS

ESTUDO DOS MATERIAIS
UTILIZADOS NO PROJETO DE
DESIGN DO PORVIR

Resposta rápida:
sim! Mas não para se tornarem
desenvolvedores de software.

4

Entender as técnicas e os processos de construção da mídia digital, para que suas soluções sejam factíveis.

Porquê, então?

Criar suas próprias ferramentas usadas para projetar;

1

2

Construir elementos e aspectos do artefato que são muito complicadas para se fazer manualmente, mais simples para um computador resolver;

3

Entender melhor o material que tece a mídia digital, para que seus projetos sejam melhores (mais adequados e efetivos);

CÓDIGOS

HTML + CSS

ESTUDO DOS MATERIAIS
UTILIZADOS NO PROJETO DE
DESIGN DO PORVIR

Resposta rápida:
sim! Mas não para se tornarem
desenvolvedores de software.

Porquê, então?

Criar suas próprias ferramentas usadas para projetar;

1

2

Construir elementos e aspectos do artefato que são muito complicadas para se fazer manualmente, mais simples para um computador resolver;

3

Entender melhor o material que tece a mídia digital, para que seus projetos sejam melhores (mais adequados e efetivos);

4

Entender as técnicas e os processos de construção da mídia digital, para que suas soluções sejam factíveis.

CÓDIGOS

HTML + CSS

ESTUDO DOS MATERIAIS
UTILIZADOS NO PROJETO DE
DESIGN DO PORVIR

Resposta rápida:
sim! Mas não para se tornarem
desenvolvedores de software.

1

Entender melhor o material que tece a mídia digital, para que seus projetos sejam melhores (mais adequados e efetivos);

Porquê, então?

4

Entender as técnicas e os processos de construção da mídia digital, para que suas soluções sejam factíveis.

ARQUITETURA DA MÍDIA E FUNDAMENTOS

PARTE 1

CÓDIGOS

HTML + CSS

ESTUDO DOS MATERIAIS
UTILIZADOS NO PROJETO DE
DESIGN DO PORVIR

CÓDIGOS

HTML + CSS

Resposta rápida:
sim! Mas não para se tornarem
desenvolvedores de software.

1

Porquê, então?

4

ARQUITETURA DA MÍDIA E FUNDAMENTOS

PARTE 1

MATERIAL

OS TIPOS DE
CÓDIGOS COMPUTACIONAIS

CÓDIGOS

O código computacional é apenas um conjunto de informações que instruem um computador o que ele deve fazer.

É uma linguagem, por que é a forma como explicamos para ele o que queremos.

CÓDIGOS

MATERIAL

OS TIPOS DE
CÓDIGOS COMPUTACIONAIS

O código computacional é apenas um conjunto de informações que instruem um computador o que ele deve fazer.

É uma linguagem, por que é a forma como explicamos para ele o que queremos.

Infelizmente, diferente de nós, um computador não é capaz realmente de interpretar a linguagem. Ele segue as instruções de forma literal.

MATERIAL

OS TIPOS DE
CÓDIGOS COMPUTACIONAIS

O código computacional é apenas um conjunto de informações que instruem um computador o que ele deve fazer.

É uma linguagem, por que é a forma como explicamos para ele o que queremos.

Infelizmente, diferente de nós, um computador não é capaz realmente de interpretar a linguagem. Ele segue as instruções de forma literal.

Resposta rápida:
sim! Mas não para se tornarem
desenvolvedores de software.

1

4

ARQUITETURA DA MÍDIA E FUNDAMENTOS

PARTE 1

MATERIAL

OS TIPOS DE
CÓDIGOS COMPUTACIONAIS

CÓDIGO COMPILADO

CÓDIGO INTERPRETADO

function x(a) {
  println("hello");
  return a + 10;
}
010001 0101000 101001 010100 1010111 011010 101011 1010101 111010

É uma linguagem, por que é a forma como explicamos para ele o que queremos.

Infelizmente, diferente de nós, um computador não é capaz realmente de interpretar a linguagem. Ele segue as instruções de forma literal.

CÓDIGOS WEB

<div>
  <a href="#">link</a>
  <p>parágrafo</p>
</div>
#titulo {
  color: #ffffff;
}
if (espera == true) {
  objeto = elemtno('xpto');
  objeto.style.display = "none";
}

Código transformado, de uma linguagem de programação legível para seres humanos, para a linguagem de máquina específica do computador / sistema em que irá ser executado. É sua forma mais rápida, mas precisa ser construído especificamente para cada sistema.  

Código transformado em tempo real, de uma linguagem legível para seres humanos, para linguagem de máquina. É uma forma mais lenta e dispendiosa de execução, mas permite que um único código seja construído para que seja executado em qualquer tipo de sistema.

Resposta rápida:
sim! Mas não para se tornarem
desenvolvedores de software.

1

ARQUITETURA DA MÍDIA E FUNDAMENTOS

PARTE 1

MATERIAL

OS TIPOS DE
CÓDIGOS COMPUTACIONAIS

É uma linguagem, por que é a forma como explicamos para ele o que queremos.

Infelizmente, diferente de nós, um computador não é capaz realmente de interpretar a linguagem. Ele segue as instruções de forma literal.

4

function x(a) {
  println("hello");
  return a + 10;
}
010001 0101000 101001 010100 1010111 011010 101011 1010101 111010

4

CÓDIGOS WEB

<div>
  <a href="#">link</a>
  <p>parágrafo</p>
</div>
#titulo {
  color: #ffffff;
}
if (espera == true) {
  objeto = elemtno('xpto');
  objeto.style.display = "none";
}

HTML

CSS

JAVASCRIPT

CÓDIGO COMPILADO

CÓDIGO INTERPRETADO

SCRIPTS

LINGUAGEM FORMAL DE PROGRAMAÇÃO

1

4

MATERIAL

OS TIPOS DE
CÓDIGOS COMPUTACIONAIS

CÓDIGO COMPILADO

CÓDIGO INTERPRETADO

function x(a) {
  println("hello");
  return a + 10;
}
010001 0101000 101001 010100 1010111 011010 101011 1010101 111010

A REDE

<div>
  <a href="#">link</a>
  <p>parágrafo</p>
</div>
#titulo {
  color: #ffffff;
}
if (espera == true) {
  objeto = elemtno('xpto');
  objeto.style.display = "none";
}

BACK-END

PARTE DO CÓDIGO QUE É PROCESSADO NO COMPUTADOR DO USUÁRIO
HTML, CSS, JAVASCRIPT

PARTE DO CÓDIGO QUE É PROCESSADO EM UM SERVIDOR ONLINE
PHP, JAVA, C#, .NET

GERA UM CÓDIGO FRONT-END E ENVIA PARA O COMPUTADOR DO USUÁRIO

FRONT-END

1

4

MATERIAL

OS TIPOS DE
CÓDIGOS COMPUTACIONAIS

CÓDIGO COMPILADO

CÓDIGO INTERPRETADO

function x(a) {
  println("hello");
  return a + 10;
}
010001 0101000 101001 010100 1010111 011010 101011 1010101 111010

A REDE

010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
index.html

1

A REDE

010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
index.html

1

A REDE

010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101

CACHE

index.html
index.html

?

1

A REDE

010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101

CACHE

1:N

index.html

?

1

A REDE

N

1

1:N

O QUE ISSO SIGNIFICA?

VOCÊ PRECISA SER ECONÔMICO COM OS RECURSOS QUE UTILIZA NO SEU CÓDIGO. VOCÊ NUNCA SABE QUANTAS PESSOAS ESTÃO UTILIZANDO O BACK-END AO MESMO TEMPO.

1

A REDE

N

1

1:N

O QUE ISSO SIGNIFICA?

VOCÊ PRECISA SER ECONÔMICO COM OS RECURSOS QUE UTILIZA NO SEU CÓDIGO. VOCÊ NUNCA SABE QUANTAS PESSOAS ESTÃO UTILIZANDO O BACK-END AO MESMO TEMPO.

WWW PROPOSAL

CERN NeXT EMULATOR

Documento histórico com a proposta original de Tim Barnes-Lee ao CERN para a criação da World Wide Web (WWW) em 1989.

Primeiro navegador web rodando em um emulador dos computadores NeXT, no CERN, em 1990. Neste link, o emulador abre a página atual do www.globo.com para visualização das limitações do código HTML original.

Para abrir outras páginas:
MENU > DOCUMENT > OPEN FROM FULL DOCUMENT REFERENCE

coloque a URL desejada no dialog box

WWW PROPOSAL

CERN NeXT EMULATOR

Este é o início da internet comercial, e do código HTML como material primordial usado para construção da web.

DIFERENÇAS ENTRE

DISPOSITIVOS DE I/O

E RECURSOS

DISPONÍVEIS

LARGURA DE BANDA
E RESTRIÇÕES DE TRANSFERÊNCIA DE DADOS

CAPACIDADE DE PROCESSAMENTO

CONSUMO DE MEMÓRIA

DISPONIBILIDADE

CAPACIDADE DE PROCESSAMENTO

CONSUMO DE MEMÓRIA

INCOMPATIBILIDADE DE SOFTWARE

LIMITAÇÕES
TÉCNICAS

INCOMPATIBILIDADE DE SOFTWARE

FRONT-END

BACK-END

MONTAGEM

PRODUÇÃO

PROPÓSITO / FUNÇÃO

CONTEÚDO

LAYOUT

CÓDIGO FRONT-END

CÓDIGO BACK-END

PROPÓSITO / FUNÇÃO

CONTEÚDO

LAYOUT

CÓDIGO FRONT-END

CÓDIGO BACK-END

PROJETO

EXECUÇÃO

NEGÓCIOS, ADMINISTRAÇÃO

PRODUTORES, COMUNICAÇÃO SOCIAL

DESIGN DE INFORMAÇÃO

WEB DESIGN (CONSTRUÇÃO TÉCNICA)

COMPUTAÇÃO, ENGENHARIA

SERVIÇO

IMAGENS, TEXTOS, VÍDEOS, LINKS, ETC.

INTERPRETAÇÃO DO NAVEGADOR

HTML, CSS, JAVASCRIPT

RESPOSTA DO SERVIDOR

ESTRATOS DA CRIAÇÃO / PRODUÇÃO WEB

LAYOUT

FRONT-END + BACK-END

Layout

Esquema Construtivo

Códigos e Arquivos

Webserver / Webhost

Web

PROBLEMA ESTRATÉGICO

PROBLEMA CONSTRUTIVO

PROBLEMA TECNOLÓGICO

DESIGN DE INFORMAÇÃOO

HTML, CSS, EDITORAÇÃOE PROGRAMAÇÃO

TECNOLOGIA DE INFORMAÇÃO (TI)
 

ESTRUTURA DE DIRETÓRIOS
SISTEMA DE REFERÊNCIA RELATIVA

files

img

css

html

pdf

index.html

outro.html

estilo.css

logo.png

foto.jpg

../../files
../img
../css
../img/logo.png
../img/foto.jpg
../css/estilo.css
./pdf
./outro.html

ARQUIVOS

jpeg

gif

png
svg
webp

texto puro (.txt) sem formatação encodificado em utf-8

terminação (.html, .php, .js, .css, etc.) são convenções

códigos

imagens

https://www.ranoya.com/pasta/arquivo.php?xpto=n&abc=5#top

A URL

PROTOCOLO DE COMUNICAÇÃO
HTTP, HTTPS, FTP, FTPS, ETC...

A URL

https://www.ranoya.com/pasta/arquivo.php?xpto=n&abc=5#top

PROTOCOLO DE COMUNICAÇÃO
HTTP, HTTPS, FTP, FTPS, ETC...

DOMÍNIO

jpeg

gif

png
svg
webp

texto puro (.txt) sem formatação encodificado em utf-8

terminação (.html, .php, .js, .css, etc.) são convenções

códigos

imagens

ARQUIVOS

A URL

https://www.ranoya.com/pasta/arquivo.php?xpto=n&abc=5#top

DOMÍNIO

PROTOCOLO DE COMUNICAÇÃO
HTTP, HTTPS, FTP, FTPS, ETC...

DIRETÓRIO DENTRO DO WEBSERVER

A URL

https://www.ranoya.com/pasta/arquivo.php?xpto=n&abc=5#top

DOMÍNIO

DIRETÓRIO DENTRO DO WEBSERVER

ARQUIVO DENTRO DO WEBSERVER

A URL

https://www.ranoya.com/pasta/arquivo.php?xpto=n&abc=5#top

DIRETÓRIO DENTRO DO WEBSERVER

ARQUIVO DENTRO DO WEBSERVER

VARIÁVEIS DE URL

DECLARAÇÃO DE VARIÁVEIS DE URL

SEPARADOR DE VARIÁVEIS

A URL

https://www.ranoya.com/pasta/arquivo.php?xpto=n&abc=5#top

ARQUIVO DENTRO DO WEBSERVER

VARIÁVEIS DE URL

DECLARAÇÃO DE VARIÁVEIS DE URL

SEPARADOR DE VARIÁVEIS

DECLARAÇÃO DE ÂNCORA

ÂNCORA NO DOCUMENTO

A URL

https://www.ranoya.com/pasta/arquivo.php?xpto=n&abc=5#top

VARIÁVEIS DE URL

DECLARAÇÃO DE VARIÁVEIS DE URL

SEPARADOR DE VARIÁVEIS

DECLARAÇÃO DE ÂNCORA

ÂNCORA NO DOCUMENTO

>

<

CÓDIGO HTML

PARTE 2

CÓDIGO HTML

PARTE 2

>

<

A URL

https://www.ranoya.com/pasta/arquivo.php?xpto=n&abc=5#top

DECLARAÇÃO DE ÂNCORA

ÂNCORA NO DOCUMENTO

como faço para criar websites incríveis?

senta lá, Cláudia... é bem mais complexo do que parece...

O QUE SÃO TAGS HTML?

TAGS SÃO INSERIDAS DENTRO DE OUTRAS TAGS NO CÓDIGO HTML, PARA CONSTRUIR ESTRUTURAS MAIS ELABORADAS

SÃO PEQUENOS BLOCOS DE INSTRUÇÃO, QUE REALIZAM ALGUMA AÇÃO NO NAVEGADOR

O QUE SÃO TAGS HTML?

TAGS SÃO INSERIDAS DENTRO DE OUTRAS TAGS NO CÓDIGO HTML, PARA CONSTRUIR ESTRUTURAS MAIS ELABORADAS

SÃO PEQUENOS BLOCOS DE INSTRUÇÃO, QUE REALIZAM ALGUMA AÇÃO NO NAVEGADOR

<b>texto</b>

CONTEÚDO

ABERTURA DA TAG HTML

FECHAMENTO DA TAG HTML

O QUE SÃO TAGS HTML?

TAGS SÃO INSERIDAS DENTRO DE OUTRAS TAGS NO CÓDIGO HTML, PARA CONSTRUIR ESTRUTURAS MAIS ELABORADAS

SÃO PEQUENOS BLOCOS DE INSTRUÇÃO, QUE REALIZAM ALGUMA AÇÃO NO NAVEGADOR

<b>texto</b>

CONTEÚDO

ABERTURA DA TAG HTML

FECHAMENTO DA TAG HTML

PROPRIEDADES DA TAG HTML

O QUE SÃO TAGS HTML?

TAGS SÃO INSERIDAS DENTRO DE OUTRAS TAGS NO CÓDIGO HTML, PARA CONSTRUIR ESTRUTURAS MAIS ELABORADAS

SÃO PEQUENOS BLOCOS DE INSTRUÇÃO, QUE REALIZAM ALGUMA AÇÃO NO NAVEGADOR

<a href="./arquivo.html">texto</a>

CONTEÚDO

ABERTURA DA TAG HTML

FECHAMENTO DA TAG HTML

PROPRIEDADES DA TAG HTML

O QUE SÃO TAGS HTML?

TAGS SÃO INSERIDAS DENTRO DE OUTRAS TAGS NO CÓDIGO HTML, PARA CONSTRUIR ESTRUTURAS MAIS ELABORADAS

SÃO PEQUENOS BLOCOS DE INSTRUÇÃO, QUE REALIZAM ALGUMA AÇÃO NO NAVEGADOR

<a href="./arquivo.html" id="link1">texto</a>

CONTEÚDO

ABERTURA DA TAG HTML

FECHAMENTO DA TAG HTML

PROPRIEDADES DA TAG HTML

ESTA TAG             POSSUI:

<a>

CONTEÚDO

texto

PROPRIEDADES

href:

id:

./arquivo.html

link1

O QUE SÃO TAGS HTML?

TAGS SÃO INSERIDAS DENTRO DE OUTRAS TAGS NO CÓDIGO HTML, PARA CONSTRUIR ESTRUTURAS MAIS ELABORADAS

SÃO PEQUENOS BLOCOS DE INSTRUÇÃO, QUE REALIZAM ALGUMA AÇÃO NO NAVEGADOR

<a href="./arquivo.html" id="link1">texto</a>

CONTEÚDO

ABERTURA DA TAG HTML

FECHAMENTO DA TAG HTML

PROPRIEDADES DA TAG HTML

ESTA TAG             POSSUI:

<a>

CONTEÚDO

texto

PROPRIEDADES

href:

id:

./arquivo.html

link1

<div id="bloco1">

 <p class="card">Este parágrafo tem um
  

 </p>

</div>

O QUE SÃO TAGS HTML?

<a href="./arquivo.html" id="link1">texto</a>

CONTEÚDO

ESTA TAG             POSSUI:

<a>

CONTEÚDO

texto

PROPRIEDADES

href:

id:

./arquivo.html

link1

<div id="bloco1">

 <p class="card"> Este parágrafo tem um
  

 </p>

</div>

TAGS PODEM SER COLOCADAS DENTRO DE OUTRAS TAGS

A ESTRUTURA DESTE ANINHAMENTO É CHAMADA DE

DOCUMENT OBJECT MODEL (DOM)

O QUE SÃO TAGS HTML?

<a href="./arquivo.html" id="link1">texto</a>

CONTEÚDO

ESTA TAG             POSSUI:

<a>

CONTEÚDO

texto

PROPRIEDADES

href:

id:

./arquivo.html

link1

<div id="bloco1">

 <p class="card"> Este parágrafo tem um
  

 </p>

</div>

TAGS PODEM SER COLOCADAS DENTRO DE OUTRAS TAGS

A ESTRUTURA DESTE ANINHAMENTO É CHAMADA DE

DOCUMENT OBJECT MODEL (DOM)

<p id="pg1">
  Parágrafo 1
</p>
  
<p id="pg2">
  Parágrafo 2
</p>

TAGS PARALELAS NO DOM

O QUE SÃO TAGS HTML?

<a href="./arquivo.html" id="link1">texto</a>

CONTEÚDO

ESTA TAG             POSSUI:

<a>

CONTEÚDO

texto

PROPRIEDADES

href:

id:

./arquivo.html

link1

<div id="bloco1">

 <p class="card"> Este parágrafo tem um
  

 </p>

</div>

TAGS PODEM SER COLOCADAS DENTRO DE OUTRAS TAGS

A ESTRUTURA DESTE ANINHAMENTO É CHAMADA DE

DOCUMENT OBJECT MODEL (DOM)

<p id="pg1">
  Parágrafo 1
</p>
  
<p id="pg2">
  Parágrafo 2
</p>

TAGS PARALELAS NO DOM

<p id="pg1">
  Parágrafo 1
    <p id="sub_pg1">
      Parágrafo 2
	</p>
</p>

TAGS ANINHADAS NO DOM

O QUE SÃO TAGS HTML?

<p id="pg1">
  Parágrafo 1
</p>
  
<p id="pg2">
  Parágrafo 2
</p>

TAGS PARALELAS NO DOM

<p id="pg1">
  Parágrafo 1
    <p id="sub_pg1">
      Parágrafo 2
	</p>
</p>

TAGS ANINHADAS NO DOM

<p id="pg1">
  Parágrafo 1
    <div id="card">
      Parágrafo 2
	</p>
</div>

ERRO SINTÁTICO / ESTRUTURAL

O QUE SÃO TAGS HTML?

TAGS PARALELAS NO DOM

<p id="pg1">
  Parágrafo 1
    <p id="sub_pg1">
      Parágrafo 2
	</p>
</p>

TAGS ANINHADAS NO DOM

<p id="pg1">
  Parágrafo 1
    <div id="card">
      Parágrafo 2
	</p>
</div>

ERRO SINTÁTICO / ESTRUTURAL

CONTEÚDOS

Parágrafo 1

UMA TAG                 ABERTA

<p>
<div>

A TAG          POSSUI:

O QUE SÃO TAGS HTML?

<p id="pg1">
  Parágrafo 1
    <div id="card">
      Parágrafo 2
	</p>
</div>

ERRO SINTÁTICO / ESTRUTURAL

CONTEÚDOS

Parágrafo 1

UMA TAG                 ABERTA

<p>
<div>

A TAG          POSSUI:

CONTEÚDOS

Parágrafo 2

O FECHAMENTO DE
UMA TAG             QUE NUNCA
FOI ABERTA

<div>
<p>

A TAG                POSSUI:

O QUE SÃO TAGS HTML?

<p id="pg1">
  Parágrafo 1
    <div id="card">
      Parágrafo 2
	</p>
</div>

ERRO SINTÁTICO / ESTRUTURAL

CONTEÚDOS

Parágrafo 1

UMA TAG                 ABERTA

<p>
<div>

A TAG          POSSUI:

CONTEÚDOS

Parágrafo 2

O FECHAMENTO DE
UMA TAG             QUE NUNCA
FOI ABERTA

<div>
<p>

A TAG                POSSUI:

<a href="doc.html" class="link">
 <p>Este parágrafo possui um
   <b class="forte">texto</b>
   em negrito
 </p>
</a>
<div id="bloco2">
 Segundo parágrafo
</div>

O CÓDIGO HTML COMO ELE NORMALMENTE FICA

O QUE SÃO TAGS HTML?

<p id="pg1">
  Parágrafo 1
    <div id="card">
      Parágrafo 2
	</p>
</div>

ERRO SINTÁTICO / ESTRUTURAL

CONTEÚDOS

Parágrafo 1

UMA TAG                 ABERTA

<p>
<div>

A TAG          POSSUI:

CONTEÚDOS

Parágrafo 2

O FECHAMENTO DE
UMA TAG             QUE NUNCA
FOI ABERTA

<div>
<p>

A TAG                POSSUI:

<a href="doc.html" class="link">
 <p>Este parágrafo possui um
   <b class="forte">texto</b>
   em negrito
 </p>
</a>
<div id="bloco2">
 Segundo parágrafo
</div>

O CÓDIGO HTML COMO ELE NORMALMENTE FICA

EXERCÍCIOS

ESTRUTURA

PROPRIEDADES

ESTRUTURA

PROPRIEDADES

Exercícios voltados para a sintaxe e a estrutura de tags HTML

Exercícios voltados para os atributos e propriedades das tags HTML

ORGANIZAÇÃO DO CÓDIGO HTML

O DOCUMENTO HTML, POR CONVENÇÃO, DEVE SER DIVIDIDO EM 2 PARTES SEPARADAS:

A PARTE QUE É VISÍVEL PARA O USUÁRIO NA TELA DO NAVEGADOR

ORGANIZAÇÃO DO CÓDIGO HTML

O DOCUMENTO HTML, POR CONVENÇÃO, DEVE SER DIVIDIDO EM 2 PARTES SEPARADAS:

A PARTE QUE É VISÍVEL PARA O USUÁRIO NA TELA DO NAVEGADOR

E A PARTE QUE CONTEM META-INFORMAÇÃO: DESCRIÇÕES E PROPRIEDADES DO DOCUMENTO INVISÍVEIS PARA QUEM USA O DOCUMENTO

ORGANIZAÇÃO DO CÓDIGO HTML

A PARTE QUE É VISÍVEL PARA O USUÁRIO NA TELA DO NAVEGADOR

E A PARTE QUE CONTEM META-INFORMAÇÃO: DESCRIÇÕES E PROPRIEDADES DO DOCUMENTO INVISÍVEIS PARA QUEM USA O DOCUMENTO

<body>

<head>

A META-INFORMAÇÃO FICA DENTRO DA TAG <head>
O CONTEÚDO VISÍVEL DENTRO DA TAG <body>

ORGANIZAÇÃO DO CÓDIGO HTML

E A PARTE QUE CONTEM META-INFORMAÇÃO: DESCRIÇÕES E PROPRIEDADES DO DOCUMENTO INVISÍVEIS PARA QUEM USA O DOCUMENTO

<body>

<head>

A META-INFORMAÇÃO FICA DENTRO DA TAG <head>
O CONTEÚDO VISÍVEL DENTRO DA TAG <body>

E AS DUAS TAGS FICAM SEMPRE DENTRO DA TAG <html>

<html>

ORGANIZAÇÃO DO CÓDIGO HTML

<body>

<head>

A META-INFORMAÇÃO FICA DENTRO DA TAG <head>
O CONTEÚDO VISÍVEL DENTRO DA TAG <body>

E AS DUAS TAGS FICAM SEMPRE DENTRO DA TAG <html>

<html>

<html>

ORGANIZAÇÃO DO CÓDIGO HTML

<body>

<head>

E AS DUAS TAGS FICAM SEMPRE DENTRO DA TAG <html>

<html>

<html>

TAG <html>

<html>
  
  <head>
    [...]
  </head>
  
  <body>
    [...]
  </body>
  
</html>

METAINFORMAÇÃO
(PARTE INVISÍVEL)

CONTEÚDO VISÍVEL

TAGS

head

body

html

TAG <html>

<html>
  
  <head>
    [...]
  </head>
  
  <body>
    [...]
  </body>
  
</html>

METAINFORMAÇÃO
(PARTE INVISÍVEL)

CONTEÚDO VISÍVEL

TAGS

head

body

html

head

TAGS

head

body

html

body

TAGS

head

body

html

2017 © PROF. DR. GUILHERME RANOYA

CÓDIGO CSS

PARTE 3

{

}

DESIGN
RESPONSIVO

PARTE 4

A URL

https://www.ranoya.com

PROTOCOLO DE COMUNICAÇÃO

DOMÍNIO

https://www.ranoya.com/pasta

DIRETÓRIO NO WEBSERVER

https://www.ranoya.com/pasta/index.php?xpto=n&abc=5#top

DOCUMENTO

VARIÁVEL

VARIÁVEL

ÂNCORA NO DOCUMENTO

Código transformado, de uma linguagem de programação legível para seres humanos, para a linguagem de máquina específica do computador / sistema em que irá ser executado. É sua forma mais rápida, mas precisa ser construído especificamente para cada sistema.  

CÓDIGO COMPILADO

CÓDIGO INTERPRETADO

Código transformado em tempo real, de uma linguagem legível para seres humanos, para linguagem de máquina. É uma forma mais lenta e dispendiosa de execução, mas permite que um único código seja construído para que seja executado em qualquer tipo de sistema  (portável).

function x(a) {
  println("hello");
  return a + 10;
}
010001 0101000 101001 010100 1010111 011010 101011 1010101 111010

SCRIPTS

LINGUAGEM FORMAL DE PROGRAMAÇÃO

FRONT-END

BACK-END

PARTE DO CÓDIGO QUE É PROCESSADO NO COMPUTADOR DO USUÁRIO
HTML, CSS, JAVASCRIPT

PARTE DO CÓDIGO QUE É PROCESSADO EM UM SERVIDOR ONLINE
PHP, JAVA, C#, .NET

GERA UM CÓDIGO FRONT-END E ENVIA PARA O COMPUTADOR DO USUÁRIO

ARQUITETURA DA MÍDIA E FUNDAMENTOS

PARTE 1

Webdesign Mobile

By Guilherme Ranoya

Made with Slides.com

Webdesign Mobile

APRESENTAÇÃO MOBILE DA DISCIPLINA DE WEBDESIGN DA UNIVERSIDADE FEDERAL DE PERNAMBUCO (dDESIGN|UFPE) VERSÃO 4.0

  • 884

More from Guilherme Ranoya