26
Introdução ao Web Design Como funciona a internet, o que é HTML e CSS, criando um site básico

Slides minicurso Web Design

Embed Size (px)

DESCRIPTION

Slides do primeiro dia do mini curso de web design dado na SEE - UNICAMP 2014

Citation preview

Introdução ao Web Design

Como funciona a internet, o que é HTML e CSS, criando um site básico

Ana Rute Mendes Web Designer Formada em

Comunicação Social - Midialogia e técnica

em Informática@ana_rute

Virgílio Santos Desenvolvedor Formado em

Engenharia de Computação

@virgilionsantos

Paula Furtado Especialista em

EducaçãoFormada em Letras,

mestranda em Linguística Aplicada

@paularfurtado

http://escolamupi.com.brhttps://github.com/mupi/

QUEM SOMOS

O Web Design

Back-end X Front-end

Design Thinking

Planejamento

Wireframes

Mockups

Protótipos

WIREFRAME

MOCKUP

Tarefa #1

Em uma folha de papel, fazer um

mockup a mão de uma página de perfil

ou currículo

HTML

Hipertext Markup Language

Linguagem de marcação

Estrutura e organização

HTMLSemântica

Elementos, tags e atributos

<a href="http://escolamupi.com.br">

Escola Mupi

</a>

Estrutura básica<!DOCTYPE html>

<html lang="pt">

<head>

<meta charset="utf-8">

<title>Meu primeiro site</title>

</head>

<body>

<h1>Olá mundo!</h1>

<p>Oba, meu primeiro site!</p>

</body>

</html>

Principais tagsTítulos: <h1></h1>

Parágrafos: <p></p>

Imagens: <img />

Quebra de linha: <br />

Listas: <ul></ul>, <ol></ol> e <li></li>

Âncoras: <a></a>

Destacar palavras: <strong></strong> e

<em></em>

Tarefa #2

Estruturar o seu mockup em uma página HTML

Elementos em bloco vs. em linha

Div e span

Elementos semânticos

<header></header>, <footer></footer>,

<aside></aside>, <nav></nav>

CSS

Cascade Style Sheets

Linguagem para estilização

CSS & HTML

Classe e ID

Seletoreshttp://paularfurtado.github.io/

css-selector-game

Inserindo CSS

<p style="color: #FF0000;">Oi!</p>

<style type="text/css"> p.exemplo{ border: 1px dashed #00F; }</style>

<link rel="stylesheet" type="text/css" href="caminho/arquivo.css" />

Inline

Através das tags <style>

Em arquivos externos, através da tag <link>

1.

2.

3.

CSSSintaxe da linguagem

seletor {

propriedade: valor;

}

Propriedades tipográficasCor de texto: color

Família de fonte: font-family

Tamanho da fonte: font-size

Estilo de fonte: font-style

Peso da fonte: font-weight

Altura da linha: line-height

p {

color: #000088;

font: italic normal bold 14px 100% Georgia,

serif;

}

Valores das propriedades

Cores na web: RGB, Hex,

RGBa

Pixels e medidas

Modelo de caixa

largura: width

altura: height

borda: border

Conteúdo do elemento

distância interna: padding

margem: margin

Exemplos de usosection {

height: 100px;

margin: 0 auto; /* centraliza o elemento */

width: 150px;

}

footer {

border-top: 1px solid #ccc;

padding: 2em;

margin-top: 5px;

}

Tarefa #3

Crie um arquivo CSS, insira-o no seu HTML e estilize a

sua página