Webdesign

Profª Fabiane Lima
fabianelim@gmail.com

Universidade Tecnológica Federal do Paraná — 2017

Uma incrivelmente breve história da computação

A industrialização trouxe a necessidade de poder de cálculo cada vez maior.

Máquina diferencial, 1822. Nunca saiu do papel.

Tecnologia existente exige tecnologia nova, e o cálculo automatizado foi se aperfeiçoando.

Máquina tabuladora, 1890.

Os avanços na eletrônica permitiram a criação de novos tipos de máquinas calculadoras para usos cada vez mais diferenciados.

Colossus, 1943.

A programação em alto nível agilizou o processo de desenvolvimento de software.

Grace Hopper opera o UNIVAC, anos 1950.

Com o tempo, a forma de interação com essas máquinas mudou de um ambiente puramente textual...:

Terminal de teletipo, anos 1970.

...para isso:

Xerox Star, 1980.

Apple e a GUI

Apresentação do Macintosh, 1984.

Microsoft e a computação pessoal

Paul Allen e Bill Gates, anos 1980.

O início da internet

Interface do navegador Netscape, anos 1990.

A disputa passou a acontecer online, às vezes no campo dos negócios, às vezes no campo da tecnologia. O Internet Explorer saiu vitorioso da Guerra dos Browsers.
Pelo menos por uns tempos.

Interface do navegador Internet Explorer, anos 1990.

"Who Invented the Internet? And Why?": Kurzgesagt – In a Nutshell (2014)

Webdesign em 4 minutos.

As linguagens da web

Se dividem por tipo em linguagens...:

de marcação
de estilo
de scripting
de manipulação de dados

Linguagens de marcação

São usadas para definir formatos, padrões e formas de exibição de um documento qualquer.

Linguagens de estilo

Definem a apresentação visual de um documento, incluindo cores, formas e estrutura.

Linguagens de scripting

São executadas no interior de outros programas ou linguagens, não se restringindo a isso, no entanto.

Linguagens de manipulação de dados

São linguagens usadas para seleção, inclusão, atualização e remoção de informações em bancos de dados.

Compiladas ou interpretadas?

As linguagens podem ser:

Compiladas
Interpretadas

Nesta disciplina:

Linguagens básicas da web, utilizadas para manipular o DOM (Document Object Model), a plataforma agnóstica que permite manipulação dinâmica de documentos na web.

HTML
CSS
JavaScript

HTML: Hyper Text Markup Language

O HTML é uma linguagem de marcação que usa tags para descrever e estruturar documentos. Cada tag HTML representa e descreve um tipo de conteúdo diferente.

Um documento HTML básico deve conter:


	<!DOCTYPE html>
	<html>
		<head>
			<!-- metatags, título da página, 
			links para folhas de estilo e scripts -->
		</head>
		<body>
			<!-- conteúdo da página propriamente dito -->
		</body>
	</html>

Outras tags básicas:

<h1>, <h2>, <h3>...: títulos
<p>: parágrafo
<img>: imagens
<a>: âncoras, ou links

Atributos

Toda tag html tem atributos, que dão informações adicionais a respeito daquela tag específica.

alt: texto alternativo para imagens
href: endereço de links
src: endereço de imagens
class: classe

Tags de estrutura de layout

Algumas tags servem para estruturar o conteúdo de um documento e auxiliar na composição o layout.

<div>: divisão
<header>: cabeçalho do site
<nav>: navegação
<section>: seção
<aside>: barra lateral do site
<footer>: rodapé do site

CSS: Cascading Style Sheet

O CSS é uma linguagem de estilo. Serve para descrever o visual de uma página web, mas também pode ser usado para transpôr uma página web para outras mídias. Existe um seletor CSS para cada tag HTML.

A sintaxe do CSS funciona da seguinte maneira:

	seletor { propriedade: valor; }

O CSS possui seletores especiais que permitem personalizar e alterar o comportamento de partes específicas do HTML. São os ids e as classes.

A ordem em que cada declaração acontece no CSS influencia no resultado, gerando o efeito cascata:


	body { color: blue }
	p { color: red }

Box Model

Todos os elementos HTML estão dentro de uma caixa imaginária cujos atributos podem ser manipulados pelo CSS.

JavaScript

O JavaScript é A linguagem da web. Trata-se uma linguagem de scripting relativamente fácil de aprender, usada em aplicações de todo grau de complexidade.

Vamos ver um pouco a respeito dela nas próximas aulas.

Atividade

Livro de receitas online.

Para saber mais

ENSMENGER, Nathan. The Computer Boys Take Over: Computers, Programmers, and the Politics of Technical Expertise. Massachussets: The MIT Press, 2010.
STEVEN, Johnson. Cultura da Interface: como o computador transforma nossa maneira de criar e comunicar. Rio de Janeiro: Zahar, 2001.
TORVALDS, Linus; DIAMOND, David. Just for Fun: The Story of an Accidental Revolutionary. Nova York: HarperBusiness, 2002.