WEBDESIGN

https://webdesign.ranoya.com

departamento de design | UFPE

AVISOS

ESTE MATERIAL FOI DESENVOLVIDO COMO PARTE INTEGRANTE DA DISCIPLINA DE WEBDESIGN DO CURSO DE BACHARELADO EM DESIGN DA UNIVERSIDADE FEDERAL DE PERNAMBUCO. SEU USO E ACESSO É PÚBLICO E IRRESTRITO, MAS NÃO CONFIGURA VÍNCULO COM A UNIVERSIDADE, TAMPOUCO O CUMPRIMENTO DAS EXIGÊNCIAS DA UNIVERSIDADE PARA CONCLUIR A DISCIPLINA DO CURSO, OU REALIZAR EQUIVALÊNCIA À QUALQUER OUTRA DISCIPLINA DE CURSO SUPERIOR OU DE QUALQUER OUTRA MODALIDADE. ESTE É APENAS UM MATERIAL DE APOIO AS ATIVIDADES DOCENTES E DISCENTES.

AS TECNOLOGIAS ENVOLVIDAS PARA A CONSTRUÇÃO DESTE MATERIAL NÃO SÃO INTEGRALMENTE COMPATÍVEIS COM DISPOSITIVOS MOBILE, EM ESPECIAL, AO SISTEMA OPERACIONAL IOS. POR MAIORES QUE SEJAM OS ESFORÇOS EM PRODUZIR UM MATERIAL QUE FUNCIONE BEM EM QUALQUER PLATAFORMA OU DISPOSITIVO, ALGUNS RECURSOS NECESSÁRIOS PARA A INTERAÇÃO PODEM NÃO ESTAR DISPONÍVEIS, OU SEREM INSUFICIENTES, NESTES DISPOSITIVOS.

OS CONTEÚDOS QUE FORAM CRIADOS E PRODUZIDOS PARA ESTA DISCIPLINA, E A CURADORIA DE REFERÊNCIAS E EXEMPLOS, SÃO PROPRIEDADE INTELECTUAL DO PROF. DR. GUILHERME RANOYA. SEU USO COMERCIAL OU REPRODUÇÃO (MESMO PARCIAL) POR ORGANIZAÇÕES COM FINS LUCRATIVOS SÃO VEDADOS, EXCETO NA EXPRESSA AUTORIZAÇÃO DO AUTOR.

DEPARTAMENTO DE DESIGN
dDESIGN | UFPE

UNIVERSIDADE FEDERAL DE PERNAMBUCO

PESQUISA EM EXPERIÊNCIA E ESTÉTICA DA INTERAÇÃO

2017 © PROF. DR. GUILHERME RANOYA

SOCIEDADE

ESTÉTICA

TECNOLOGIA

CIÊNCIA

SOCIEDADE

ESTÉTICA

TECNOLOGIA

CIÊNCIA

WEBDESIGN

EIXOS

CICLO / PROCESSO DE DESIGN

ESTRUTURA BASEADA NO TRABALHO DE GUSTAVO BOMFIM

DESIGN DE INFORMAÇÃO PARA WEB

ARQUITETURA DE INFORMAÇÃO

USER EXPERIENCE

DESIGN DE INTERFACES

USOS DOS ARTEFATOS

NECESSIDADES LATENTES

APLICAÇÕES

CONFIGURAÇÃO DOS ARTEFATOS

FORMA

SOLUÇÃO

PRODUÇÃO

MATERIAIS

TÉCNICAS

PROCESSOS

CONTEXTO

FUNDAMENTO

VERIFICAÇÃO
 

PROJETÃO

USABILIDADE

ERGONOMIA

PROBLEMA DE CONTEÚDO E SUA FORMA MULTIMIDIÁTICA

MATERIAIS, INSTRUMENTOS E FERRAMENTAS UTILIZADAS NA CONSTRUÇÃO DO DESIGN DE INFORMAÇÃO EM SUPORTE DIGITAL

IDENTIFICAÇÃO DAS NECESSIDADES DE USUÁRIOS / CONSUMIDORES E DEFINIÇÃO DE REQUISITOS DE PROJETO

VERIFICAÇÃO E AJUSTE DOS ARTEFATOS SOBRE O USO, CONFORTO, ADEQUAÇÃO, PERFORMANCE, ETC.

WEBDESIGN

TECNOLOGIA

ESTÉTICA

SOCIEDADE

CIÊNCIA

CONSTRUÇÃO DOS DOCUMENTOS WEB

LINGUAGEM UTILIZADA NA SUA ESTRUTURAÇÃO

TÉCNICAS PARA TORNÁ-LOS RESPONSIVOS

CUIDADOS COM CONTEXTOS MOBILE

WEBDESIGN

TÉCNICAS, FERRAMENTAS E MATERIAIS PARA O EXERCÍCIO DO DESIGN NOS PRÓXIMOS 5 ANOS (OU MAIS). 

DESIGN

ARTE

COMPUTAÇÃO

MUSTIC

D+C

USO DO CÓDIGO COMPUTACIONAL COMO FERRAMENTA DE DESIGN

A DISCIPLINA DE WEBDESIGN NASCEU COMO UM ESFORÇO DE PREPARAR OS FUTUROS PROJETISTAS PARA TRABALHAREM COM FERRAMENTAS DE DESIGN DAS PRÓXIMAS DÉCADAS

DISCIPLINA COMO
CONHECIMENTO EM PRODUÇÃO

UTILIZAR A DISCIPLINA COMO UMA FORMA DE PRODUZIR NOVOS CONHECIMENTOS, E PRODUZIR MATERIAL ÚTIL PARA A COMUNIDADE DE ESTUDANTES DOS CURSOS.

UMA OUTRA CULTURA

A DISCIPLINA DE WEBDESIGN LIDA COM SCRIPTS HTML E CSS. A DISCIPLINA SERÁ APROVEITADA PARA PRODUZIR E DOCUMENTAR MATERIAIS ÚTEIS PARA O ENSINO DE PROGRAMAÇÃO COM SCRIPTS WEB.

UMA DISCIPLINA ETERNAMENTE
"EM CONSTRUÇÃO"

 

HTML/CSS:
GUIA DE REFERÊNCIA

"O CURSO DE DESIGN DA UFPE É COMO UM CURSO DE MÚSICA ONDE NÃO SE ENCOSTA EM UM ÚNICO INSTRUMENTO MUSICAL DURANTE 4 ANOS"

ALUNO ANÔNIMO

NÃO NO QUE DIZ RESPEITO A ESTA DISCIPLINA

COMUNICAÇÕES SÃO FEITAS ATRAVÉS DO AMBIENTE DA DISCIPLINA NO
GOOGLE CLASSROOM

CÓDIGO DA TURMA

c7tb6bu

ATENDIMENTOS INDIVIDUAIS PRESENCIAIS OU VIA GOOGLE MEETS PARA ACOMPANHAMENTO DE TRABALHOS, ESCLARECIMENTO DE DÚVIDAS, OU OUTRAS QUESTÕES, PRECISAM SER AGENDADOS NOS HORÁRIOS DISPONÍVEIS NA AGENDA DO PROFESSOR

https://meet.google.com/lookup/fwdk3xwvqy

SALA PARA VIDEOCONFERÊNCIAS

https://meet.google.com/lookup/fwdk3xwvqy

SALA PARA VIDEOCONFERÊNCIAS

https://chat.google.com/room/AAAAKD3veKQ

CHAT / MENSAGENS

https://chat.google.com/room/AAAAKD3veKQ

CHAT / MENSAGENS

BIBLIOGRAFIA  

CURSOS ON-LINE

ARQUITETURA DA MÍDIA
E FUNDAMENTOS

PARTE 1

como faço para criar websites incríveis?

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

CÓDIGO INTERPRETADO

CÓDIGO COMPILADO

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

ROTEAMENTO DE DADOS

010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101

CACHE

ROTEAMENTO DE DADOS

1

n

ROTEAMENTO DE DADOS

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

JORNALISMO
LETRAS
PUBLICIDADE
PRODUTORES

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

ETAPAS DE CRIAÇÃO

Layout

Esquema Construtivo

Código e Arquivos

Webserver

Web

LAYOUT

FRONT END + BACK END

PROBLEMA ESTÉTICO

PROBLEMA TECNOLÓGICO

PROBLEMA CONSTRUTIVO

<div>
    <a href="#">link</a>
    <p> parágrafo</p>
</div>

p {
      color: #ffffff;
}
if (apaga == true) {
var objeto = document.getElementById("P1");

objeto.display = "none";
}

MORFOLOGIA DOS CÓDIGOS

HTML

CSS

JAVASCRIPT

SCRIPTS

LINGUAGEM FORMAL DE PROGRAMAÇÃO

CÓDIGO HTML

PARTE 2

<
>

O QUE SÃO TAGS HTML?

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

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

UNIVERSAL RESOURCE LOCATOR

URL
https://www.ranoya.com/public/aulas/index.php?nonew=true&theme=bluemsx#web

PROTOCOLO DE COMUNICAÇÃO

DOMÍNIO

DIRETÓRIO NO WEBSERVER


DOCUMENTO


VARIÁVEIS


ÂNCORA NO DOCUMENTO

ESTRUTURA DE DIRETÓRIOS

meusarquivos

imagens

css

html

pdf

doc.pdf

index.html

outro.html

estilo.css

logotipo.png

icone.svg

foto.jpg

imagens

css

../css
../imagens

pdf

./pdf

meusarquivos

../../meusarquivos

logotipo.png

../imagens/logotipo.png

icone.svg

../imagens/icone.svg

foto.jpg

../imagens/foto.jpg

estilo.css

../css/estilo.css

doc.pdf

./pdf/doc.pdf

outro.html

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

sublime text
visual studio code
atom editor
adobe brackets
notepad ++
windows notepad

sublime text

visual studio code

atom editor

adobe brackets

notepad ++

SINTAXE

<tag propriedades>conteúdo</tag>

COMEÇO DA INSTRUÇÃO

FIM DA INSTRUÇÃO

<div>

<body>

<style>

<head>

<p>

<strong>

.

.

.

 

.

.

.

</strong>

</p>

</head>

</style>

</body>

</div>

.
.
.
href="https:/www.ranoya.com"
width=100%
frameborder=0
class="meulink"
style="color: black;"
method=GET
name="xpto"
id="logotipo"

o que aparece na tela

SINTAXE

<a href="https://www.ranoya.com" class="link">meu site</a>

ABERTURA DA TAG

FECHAMENTO DA TAG

NÓ PAI
DE UMA ESTRUTURA DE ÁRVORE

ABERTURA DA TAG

FECHAMENTO DA TAG

NÓ PAI
DE UMA ESTRUTURA DE ÁRVORE

PROPRIEDADE HREF DA TAG <A>

PROPRIEDADE CLASS DA TAG <A>

CONTEÚDO DA TAG <A>

O CONTEÚDO DA TAG VIRA UM NOVO NÓ (FILHO) DA ESTRUTURA

<a href="../layout.html">
                      <div>
                         Meu Site
                      </div>
</a>

ABERTURA DA TAG

FECHAMENTO DA TAG

TAG <A>

ABERTURA DA TAG

FECHAMENTO DA TAG

TAG <DIV>

CONTEÚDO

SINTAXE

<a href="../layout.html">
                      <div>
                         Meu Site
                      </div>
                      <p>
                         Novo nó
                      </p>
</a>

TAG <A>

TAG <DIV>

CONTEÚDO

TAG <P>

CONTEÚDO

SINTAXE

<a href="../layout.html">
                      <div>
                         Meu Site
                      </div>
                      <p>
                         <ul>
                           <li>
                             Nó 1
                           </li>
                           <li>
                             Nó 2
                           </li>
                         </ul>
                      </p>
</a>

SINTAXE

<!DOCTYPE html>

<html>

    <head>

    </head>

    <body>

    </body>

</html>

ESTRUTURA

ESPECIFICAÇÃO DA VERSÃO DO HTML PARA QUE O NAVEGADOR SAIBA O QUE ESTÁ INTERPRETANDO

CORPO TOTAL DO CÓDIGO PROPRIAMENTE DITO. TODO O CÓDIGO HTML PRECISA FICAR DENTRO DA TAG

<html>

POR CONVENÇÃO, A TAG
                SÓ DEVE CONTER ESTA DUAS TAGS (

E                )

<head>

METADADOS
DEFINIÇÕES E INFORMAÇÕES QUE NÃO DEVEM APARECER NA TELA DO NAVEGADOR DEVEM FICAR DENTRO DA TAG

<head>

CORPO EFETIVO DO "TEXTO"
AQUILO QUE DEVE APARECER NA TELA DO NAVEGADOR DEVE FICAR DENTRO DA TAG

<body>
<html>
<body>
<head>
 <meta charset="utf-8">
 <meta http-equiv="Content-Language" content="pt-br">
 <meta property="og:locale" content="pt_BR">
 <title>HTML - Guia de Referência</title>
 <meta property="og:title" content="HTML - Guia de Referência">
 <meta property="og:site_name" content="ranoya.com">
 <meta property="og:url" content="https://webdesign.ranoya.com">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="keywords" content="html, tags, sintaxe, propriedades">
 <meta name="generator" content="nenhum">
 <meta property="og:type" content="article">
 <meta name="description" content="documento exemplo sobre head">
 <meta property="og:description" content="documento exemplo sobre head">
 <meta name="author" content="Guilherme Ranoya">
 <link rel="icon" type="image/png" href="icon16x16.png">
 <link rel="shortcut icon" href="icon57x57.png">
 <link rel="apple-touch-icon" href="icon57x57.png">
 <link rel="apple-touch-icon" sizes="72x72" href="icon72x72.png">
 <link rel="apple-touch-icon" sizes="114x114" href="icon114x114.png">
 <link rel="apple-touch-icon" sizes="144x144" href="icon144x144.png">
 <meta property="og:image:width" content="600">
 <meta property="og:image:height" content="600">
 <meta property="og:image:type" content="image/jpeg">  
 <link rel="image_src" type="image/jpg" href="coverimage.jpg">
 <meta property="og:image:secure_url" content="coverimage.jpg">
 <meta property="og:image" content="coverimage.jpg">
 <meta name="theme-color" content="#8487BE">
 <meta name="msapplication-navbutton-color" content="#8487BE">
 <meta name="apple-mobile-web-app-status-bar-style" content="#8487BE">
 <script type="text/javascript" src="jquery.min.js"></script>
 <link rel="stylesheet" type="text/css" href="base.css">
</head>

HEAD

TAGS <META> NÃO POSSUEM FECHAMENTO </META>

TAGS <LINK> NÃO POSSUEM FECHAMENTO </LINK>

DEFINE O USO DA TABELA DE CARACTERES UNICODE (UTF8)

INFORMA QUE A LINGUA UTILIZADA NO CONTEÚDO É O PORTUGUÊS BRASILEIRO

DEFINE O QUE APARECE NA BARRA DE TÍTULO DO NAVEGADOR, O NOME DO SITE E O ENDEREÇO PARA REDIRECIONAMENTO

INFORMA AOS NAVEGADORES MOBILE QUE ELES NÃO DEVEM ESCALONAR OS CONTEÚDOS POR CONTA PRÓPRIA

INFORMA AS PALAVRAS-CHAVES PARA INDEXAÇÃO PELOS MECANISMOS DE BUSCA

INFORMA QUAL PLATAFORMA GEROU ESTE DOCUMENTO, E QUE TIPO DE DOCUMENTO ELE É 

DESCREVE O CONTEÚDO PARA OS MECANISMOS DE BUSCA, E INFORMA SEU AUTOR

DEFINE IMAGENS PARA SEREM USADAS COMO ÍCONES PARA ATALHOS DA PÁGINA, CRIADOS NO DESKTOP E EM DISPOSITIVOS MOBILE

DEFINE UMA IMAGEM DE 16x16 PIXELS PARA SER USADA COMO ÍCONE NA ABA DO NAVEGADOR

DEFINE UMA IMAGEM E SUAS CARACTERÍSTICAS PARA SER USADA COMO REFERÊNCIA VISUAL QUANDO O DOCUMENTO É COMPARTILHADO EM REDES SOCIAIS E OUTRAS PLATAFORMAS

DEFINE A COR DA BARRA DO NAVEGADOR EM DISPOSITIVOS MOBILE

CARREGA CÓDIGOS JAVASCRIPT E CSS DE ARQUIVOS EXTERNOS 

<head>

 <style>

    body {
        color: blue;
    }

    .meuslinks {
        color: black;
    }
 
 </style>

 <script>

    alert("Olá!");
    document.write("Hello World!");

 </script>

</head>

HEAD

CÓDIGO CSS

CÓDIGO JAVASCRIPT

CONSTRUA O HEAD DE SEU PRIMEIRO CÓDIGO HTML

PLAYGROUND

PLAYGROUND

<a>...</a>
<b>...</b>
<br>
<em>...</em>
<i>...</i>
<img>
<strong>...</strong>
<span>...</span>

INLINE TAGS

AS TAGS INLINE, OU TAGS DE CONTEÚDO, SÃO NÓS DA ESTRUTURA CRIADOS PARA APRESENTAR CONTEÚDOS (TEXTOS, IMAGENS, ETC.) OCUPANDO O MÍNIMO DE ESPAÇO POSSÍVEL NA TELA DO NAVEGADOR, DE FORMA CONTÍGUA AO QUE VEM ANTES E DEPOIS DELAS.

AS TAGS INLINE NÃO PRODUZEM, ORIGINALMENTE, UM BLOCO PARA SEPARAR CONTEÚDOS E HIERARQUIAS.

CRIA UMA ÂNCORA NO DOCUMENTO, OU UM LINK PARA OUTRO DOCUMENTO

DEIXA O TEXTO EM NEGRITO, SEM CRIAR NENHUM PESO SEMÂNTICO, OPERANDO APENAS NA FORMATAÇÃO DO TEXTO

INSTRUÇÃO GENÉRICA PARA ALTERAR CARACTERÍSTICAS DO TEXTO ATRAVÉS DE PROPRIEDADES

PULA LINHA
A TAG           NÃO POSSUI FECHAMENTO

<br>
</br>

DEIXA O TEXTO OBLÍQUO, INFORMANDO SEMANTICAMENTE QUE HÁ ÊNFASE SOBRE AQUELE CONTEÚDO

DEIXA O TEXTO OBLÍQUO, SEM CRIAR NENHUM PESO SEMÂNTICO, OPERANDO APENAS NA FORMATAÇÃO DO TEXTO

INSERE UMA IMAGEM NO NAVEGADOR
A TAG              NÃO POSSUI FECHAMENTO

<img>
</img>

DEIXA O TEXTO EM NEGRITO, INFORMANDO QUE HÁ ÊNFASE SEMÂNTICA SOBRE ESTE CONTEÚDO

INLINE TAGS

EXPERIMENTE

<div>...</div>
<h1>...</h1>
<h2>...</h2>
<h6>...</h6>
<p>...</p>
<table>...</table>
<td>...</td>
<tr>...</tr>

BLOCK TAGS

AS BLOCK TAGS, OU TAGS DE BLOCO, SÃO NÓS DA ESTRUTURA CRIADOS PARA ORGANIZAR E SEPARAR OS CONTEÚDOS.

CRIA UMA DIVISÃO NA ORGANIZAÇÃO / ESTRUTURA DO DOCUMENTO

<tr>,

CRIA UM BLOCO PARA GUARDAR UM TÍTULO PARA O CONTEÚDO

CRIA UM BLOCO PARA GUARDAR UM SUBTÍTULO PARA O CONTEÚDO

CRIA UM BLOCO PARA GUARDAR UM SUB-SUB-SUBTÍTULO PARA O CONTEÚDO (H6 É O ÚLTIMO NÍVEL HIERÁRQUICO DE TÓPICOS QUE VAI DE H1 A H6)

CRIA UM BLOCO PARA GUARDAR UM PARÁGRAFO DE TEXTO/CONTEÚDO

CRIA UM BLOCO PARA GUARDAR UMA TABELA

CRIA UMA COLUNA DENTRO DE UMA LINHA, DENTRO DE UMA TABELA. A TAG           PRECISA ESTAR DENTRO DE UMA TAG
ESTA JÁ DENTRO DE UMA TAG

<td>
<table>

CRIA UMA LINHA DENTRO DE UMA TABELA. A TAG           PRECISA ESTAR DENTRO DE UMA TAG

<tr>
<table>
<form>...</form>
<input>
<option>...</option>
<select>...</select>
<textarea>...</textarea>

FORMS

AS TAGS DE FORMULÁRIO CRIAM CAMPOS DE ENTRADA DE DADOS PARA INTERAÇÃO COM OS DOCUMENTOS, E PARA QUE DADOS POSSAM SER TRANSMITIDOS  DE UM DOCUMENTO PARA OUTRO.

CRIA UM BLOCO PARA GUARDAR UM FORMULÁRIO E SEUS DADOS

<select>

CRIA UM CAMPO DE ENTRADA DE DADOS, DENTRE OS VÁRIOS TIPOS DE ENTRADA QUE O HTML PERMITE

CRIA UMA OPÇÃO DE VALOR PARA SER EXIBIDA EM UM CONJUNTO DO TIPO 

CRIA UM CONJUNTO DE VALORES QUE PODEM SER ACESSADOS VIA UM BOTÃO COM UM DROPDOWN

CRIA UMA AREA PARA ENTRADA DE TEXTOS

CÓDIGO CSS

PARTE 3

{

}
<div> conteúdo </div>
<div> novo conteúdo </div>
<p> não aplica </p>


div {
     color: white;

}

HTML

CSS

APLICAÇÃO DE CSS POR TAG

<div id="xpto"> conteúdo </div>
<div> não aplica </div>

#xpto {
     color: white;

}

APLICAÇÃO DE CSS POR ID

APLICAÇÃO DE CSS POR CLASS

<div class="tex"> conteúdo </div>
<p class="tex"> novo conteúdo </p>
<div id="xpto"> não aplica</div>

.tex {
     color: white;

}

APLICAÇÃO DE CSS POR STYLE

<div style="color: white;"> conteúdo </div>

<a> conteúdo </a>


a {
  color: white;
}

a:hover {
  background-color: cyan;
}

HTML

CSS

SELETORES

conteúdo

.
.
.
first-child
target
selected
focus
visited
hover

<a style="color: white"> conteúdo </a>


a {
  text-decoration: underline;
}
a {
  background-color: blue;
}

a {
  background-color: cyan;
}

HTML

CSS

OVERRIDE DE ATRIBUTO

conteúdo

<a class="cA cB"> conteúdo </a>


.cA {
  background-color: grey;
}

.cB {
  color: cyan;
  text-decoration: underline;
}

HTML

CSS

OVERRIDE DE CLASSE

conteúdo

SINTAXE

a {
     width: 320px;
     line-height: 24px;

}

IDENTIFICADOR
TAG

ELEMENTO

ATRIBUTOS

VALORES

FIM DE LINHA

font-family
color
background-image
padding
margin
display
position
transition
.
.
.

10px
50%
20em
5vw
20vh
.
.
.

#
.
tag

SINTAXE

#logotipo a:hover, .texto {
             width: 320px;
             line-height: 24px;

}

IDENTIFICADOR
TAG, ID OU CLASS

IDENTIFICADOR
TAG, ID OU CLASS

IDENTIFICADOR
TAG, ID OU CLASS

ESPECIFICAÇÃO DE SUB-ELEMENTO

ESPECIFICAÇÃO DE SUB-ELEMENTO

ELEMENTO

SELETOR

ESPECIFICAÇÃO DE SUB-ELEMENTO

class="texto"

id="logotipo"

ELEMENTO

ESPECIFICAÇÃO DE SUB-ELEMENTO

<div id="logotipo"><a href="#">

<div id="logotipo">

<p class="texto">

SEPARADOR

ATRIBUTOS

VALORES

FIM DE LINHA

#
.
tag


#
.
tag


#
.
tag


hover
visited
focus
.
.
.

elemento, elemento, elemento {

font-family
color
background-image
padding
margin
display
position
transition
.
.
.

10px
50%
20em
5vw
20vh
.
.
.

<style>

a {
    color: cyan;
    text-decoration: none;
}

a:hover {
    background-color: cyan;
    color: blue;
}

p, h1, h2, div {
    color: grey;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 24px;
    font-size: 18px;
}

.highlight {
    font-weight: bold;
}

div.highlight {
    font-weight: normal;
    color: white;
}

.pequeno div.highlight {
    color: grey;
    font-weight: normal;
    text-decoration: underline;
}

</style>

o que acontece com todas as tags 

<a>

o que acontece quando se passa o mouse sobre todas as tags 

<a>

o que acontece com todas as tags                                 e

<p>,<h1>,<h2>
<div>

o que acontece com todas as tags  que tiverem

class="highlight"

altera a regra anterior e define o que acontece especificamente com os
             que tiverem 

class="highlight"
<div>

altera a regra anterior e define o que acontece especificamente com os
             que tiverem

e estiverem dentro de uma tag com 

class="highlight"
<div>
class="pequeno"

CSS

CSS

CSS

EXPERIMENTE

CSS

CSS

CSS

conteúdo
padding
border
margin
width
height

Box Model

height
width
tipografia
fontes nativas aos sistemas operacionais:

Helvetica

Arial

Times

Times New Roman

Courrier

CSS

fontes não-nativas?

Google Fonts

Adobe Fonts

Fontes OTF / WOFF com diretriz @import

font-family: Helvetica, sans-serif;
font-size: 16px;
font-weight: 300;
font-style: italic;
text-align: right;
color: white;
line-height: 22px;
letter-spacing: 2px;
word-spacing: 5px;
text-indent: 40px;
text-decoration: none;
hyphens: auto;
word-break: break-all;
font-variant: small-caps;

características básicas da tipografia

espaçamentos

detalhes

tipografia

CSS

Parágrafos
Texto: 18px, ou 14px bold
Espaçamento entre-linha: 1.5x o tamanho da fonte (1.5em)
Espaçamento entre-parágrafos: 2x o tamanho da fonte (2em)
 

WCAG 2.0 Web Content Accessibility Guidelines

Headings
p:    18px
h3:  22px
h2:  33px
h1:  44px
 

DESIGN
RESPONSIVO

PARTE 4

COMPORTAMENTO

COMPORTAMENTO

COMPORTAMENTO

COMPORTAMENTO

MOBILEFIRST

360px

480px

655px

767px

835px

979px

1200px

1024px

BREAKPOINTS

SÓ É POSSÍVEL DETECTAR O DISPOSITIVO ATRAVÉS DE PROGRAMAÇÃO JAVASCRIPT

DEDUÇÃO DE
CONTEXTO

BOOTSTRAP

306 dp/dip/px

320 dp/dip/px

status bar 24dp/dip

app bar 56dp/dip

320 dp/dip/px

margem 7 dp/dip/px

margem 7 dp/dip/px

conteúdo 306 dp/dip/px

306 dp/dip/px

MÍNIMOS

iPhone 4
iPhone 5
iPhone 6
Moto G
Samsung S8

320x480
320x568
375x667
360x640
360x740

media query
360px
800px
800px
1024px
1024px
>1024px
>1024px
media query (conteúdo)
360px
800px
800px
1024px
1024px
>1024px
>1024px
media query (conteúdo)
360px
800px
1024px
/* Mobile First (até 480px) */


/* Tablets & Mobile (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
  
 
}

/* Tablets, Ipads (landscape 768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
 
}

/* Tablets, Ipads (portrait landscape 768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  
  
}

/* Laptops, Desktops (> 1025px) */
@media (min-width: 1025px) {
  
  
}

Z PATTERN

EYE TRACKING

F PATTERN

TECNICAS E
TRUQUES

PARTE 5

boas práticas

PARA QUE SE POSSA CONSTRUIR UM BOM DESIGN, A CLAREZA E LIMPEZA DO CÓDIGO PRECISAM SER IMPECÁVEIS, DO CONTRÁRIO SERÁ IMPOSSÍVEL ENTENDER O QUE ESTÁ AGINDO SOBRE A MUDANÇA DOS COMPORTAMENTOS

CRIAR VARIÁVEIS PARA REGISTRAR OS ATRIBUTOS/PROPRIEDADES QUE SÃO REPETIDOS AO LONGO DO CÓDIGO CSS

PENSAR PRIMEIRO NO CONTEXTO MAIS RESTRITO (MOBILE)


MANTER OS CÓDIGOS JAVASCRIPT, HTML E CSS EM ARQUIVOS SEPARADOS

procedimentos
<head>
<link rel="stylesheet" type="text/css" href="ESTILO.css">
<script src="CODIGO.js"></script>
</head>

CRIAR VARIÁVEIS PARA REGISTRAR OS ATRIBUTOS/PROPRIEDADES QUE SÃO REPETIDOS AO LONGO DO CÓDIGO CSS

PENSAR PRIMEIRO NO CONTEXTO MAIS RESTRITO (MOBILE)

:root {

    --cor-foreground: cyan;
    --cor-background: black;
    --tamanho-corpo: 400px;
    
    --breakpoint-mobile: 620px;
    --breakpoint-desktop: 1024px;

}

.conteudo {

    width: var(--tamanho-corpo, 600px);

}
variáveis CSS

variáveis

aplicação

CSS

OPENGRAPH

<meta property="og:url" content="https://www.projetao.com.br">
<meta property="og:title" content="Projetão | Updates">
<meta property="og:site_name" content="Projetão">
<meta property="og:locale" content="pt_BR">
<meta property="og:description" content="Website Projetão">
<meta property="og:type" content="website">
<meta property="og:image:width" content="600">
<meta property="og:image:height" content="600">
<meta property="og:image:type" content="image/jpeg">  
<meta property="og:image:secure_url" content="https://www.projetao.com.br/img/ogparaalunos.jpg">
<meta property="og:image" content="https://www.projetao.com.br/img/ogparaalunos.jpg">

METAINFORMAÇÃO PARA PLATAFORMAS QUE USAM O PROTOCOLO OPENGRAPH (REDES SOCIAIS, NO GERAL)

OPENGRAPH

ENDEREÇO PARA ENCAMINHAMENTO

LÍNGUA

DESCRIÇÃO DO CONTEÚDO

BARRA DE TÍTULO (JANELA) E NOME DO SITE

TIPO DE MÍDIA (SITE, VÍDEO, NOTÍCIA, ETC.)

IMAGEM DE CAPA PARA COMPARTILHAMENTO

OPENGRAPH

DIMENSIONAMENTO DE IMAGENS DE CAPA

600px
600px
LinkedIn
Facebook
Twitter
1.64:1
1.91:1
2:1
1.64:1
1.91:1
2:1
< 300Kb
JPG
Instagrm

2017 © PROF. DR. GUILHERME RANOYA

Webdesign v.4

By Guilherme Ranoya

Made with Slides.com

Webdesign v.4

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

  • 1,288

More from Guilherme Ranoya