Apresentaçao Aula 1

minimini--cursocurso

DESENVOLVIMENTODESENVOLVIMENTODESENVOLVIMENTODESENVOLVIMENTOpara web com padrões para web com padrões para web com padrões para web com padrões ((TablelessTableless, , WebstandardsWebstandards e Usabilidade)e Usabilidade)

Danilo Rosisca PereiraEspecialista em Sistemas para Internet

Desenvolvimento para Web com Padrões

O A d W b

O Avanço da Web

Percebe-se o aumento exagerado de informações disponibilizadas em ambientes digitaisambientes digitais.

E muitas vezes apresentadas de forma E muitas vezes, apresentadas de forma desorganizada.

Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões

AA NOVA GERAÇÃO DA WEB

exige uma mudançaexige uma mudançae um repensar noprocesso de desenvolvimento de processo de desenvolvimento de ambientes informacionais digitais.d g ta s.

AA Web 2.0 é A NOVA GERAÇÃO DA WEB, que

traz novas regras e

serviços baseados serviços baseados na Web como plataforma.

AA Web 2.0 busca

i t ã t a interação entre usuários, com a criação e o compartilhamento de

conteúdoconteúdo.

Arquitetura daInformação

A i d I f ãArquitetura da Informação

Foi criada por Saul Wurman em 1976 com o objetivo de Foi criada por Saul Wurman em 1976, com o objetivo de organizar a informação, para:

• tornar simples o que é complexo;

• buscar um balanceamento entre usuário-conteúdo-contexto;

• facilitar para as pessoas o acesso a informação• facilitar para as pessoas o acesso a informação.

Si d A i d I f ãSistemas da Arquitetura da Informação

A Arquitetura da Informação possui 4 sistemas e quando A Arquitetura da Informação possui 4 sistemas, e quando reunidas servem para organizar o ambiente informacional digital(website). Rosenfeld e Morville (2006). g ( ) ( )

E i ãEsses sistemas são:

Si t d O i ã Sistema de Organização: Maneira de categorizar e organizar a informação.

Esquema de Organização Esquema de Organização

Esquema de Organização Alfabética

Esquema de Organização por

TempoTempoTempo

Esquema de Organização por Assunto

Si t d R t l ã Sistema de Rotulação:

Define a forma de representar a Define a forma de representar a informação.

Sã l t f d t i São elementos fundamentais que antecipam o que virá a seguir logo após efetuar o clique em um link.

Si t d N ã Sistema de Navegação: Determina o modo de navegar ou mover no espaço Informacional (e hipertextual).

Si t d P i Sistema de Pesquisa:

dú id Estabelece as dúvidas (perguntas) executadas em uma consulta de pesquisa e como elas consulta de pesquisa e como elas serão respondidas.

(Exemplo de busca de fácil compreensão)

UsabilidadeUsabilidade

U bilid dUsabilidade:

Poss i componentes múltiplos e é radicionalmente associada Possui componentes múltiplos e é radicionalmente associada com estes cinco atributos:

• Ser fácil de APRENDER;

• Ser eficiente na utilização;Ser eficiente na utilização;

• Ser fácil de ser recordado;

• Ter poucos erros;• Ter poucos erros;

• Ser subjetivamente agradável.

(Nilsen, 1993)

Tempo de do nload mínimoTempo de download mínimo

Dez segundos é o limite para Dez segundos é o limite para manter a atenção do usuário.

(Jacob Nielsen)

Fácil de navegarFácil de navegarVisitantes não devemperder tempo pensando e tentando descobrir:

- Onde está?

- Onde posso ir?p

- Por onde devo começar?- Quais são as coisas mais - Quais são as coisas mais importantes nesta página? PostePoste com com dezenasdezenas

de de setassetas parapara todostodos ladoslados

Usabilidade: Tipografia

As fontes tipográficas (ou apenas fontes) são classificadas em 4 grupos básicos: as com serifas, as ,sem serifas, as cursivas e as fontes dingbats.g

Fonte: DigitalPaperWeb.com.br Acessado em: 01 julho 2008

Usabilidade: F t l í i b

Usabilidade: Fontes legíveis para web

Nome da Fonte Característica

Arial Moderna, limpa, básica.

F t if j t d l it liGeorgia

Fonte com serifa projetada para leitura on-line.Aparência Tradicional, visual mais moderno que Times News Roman.

Trebuchet MS Moderna, simples.

Verdana Fonte on-line mais legivel, mesmo em texto pequeno

Todas com 10 pontos ou acima.(Nielsen e Loranger, 2007)

Usabilidade: Legibilidade, textos existem para serem lidos.

Exemplo:Fonte serifadaFonte serifada

í l í lFonte serifadaFonte serifada

í l í lExemplo:

Curiosidade, inovação e descoberta

para títulopara títulopara títulopara título

A World Wide Web abriu fronteiras inacreditáveis: pela primeira vez os profissionais de layout e artes gráficas têm acesso a um público enorme, que pode ver seus trabalhos a qualquer instantequalquer instante.

Alguns dizem que o conjunto das tais “páginas pessoais” é a maior exposição pública de arte da história.

Sob alguns aspectos, esse público é até maior que o dos publicitários, pois não tem restrições de tempo.

Fonte Fonte semsem serifaserifapara para textotexto

COMBINAÇÃO DE CORESCOMBINAÇÃO DE CORES NÍVEL DE LEITURANÍVEL DE LEITURACOMBINAÇÃO DE CORESCOMBINAÇÃO DE CORES NÍVEL DE LEITURANÍVEL DE LEITURA

Texto preto com fundo branco Valor mais alto de contraste

T l f d b Dif ti lt t t l Texto azul contra fundo branco Diferença perceptiva alta, contanto que se use azul escuro.

Texto preto com fundo cinzaDiferença perceptiva média e alta dependendo das combinações de cores e do nível de saturação.cores e do nível de saturação.

Texto branco com fundo azulDifícil de ler, pois o fundo escuro é percebido mais intensamente que o texto branco.

Texto cinza com fundo branco. Baixo valor de contraste, diferença perceptível baixa.

Texto branco com fundo cinza Baixo valor de contraste, diferença perceptível baixa. Texto branco com fundo cinza. Baixo valor de contraste, diferença perceptível baixa.

Texto vermelho com fundo azulDiferença perceptível muito baixa, combinações de cores escuras criam um efeito vibrante, cansando os olhos. ,

Texto vermelho contra fundo preto.Diferença perceptível muito baixa, combinações de cores escuras criam um efeito vibrante, cansando os olhos.

U bilid d P b i

Usabilidade: Portanto um website...

Bicicleta Convergente de Jacques Carelman.

Deve ser fácil de usar; Com simplicidade, OBJETIVIDADE e

foco na experiência foco na experiência do usuáriousuário.

WebstandardsWebstandards

Padrões Web (Webstandards)

Criados pelo W3C (World Wide Web Consortium), eles separam o conteúdo em HTML da apresentação em CSS, mantendo a compatibilidade e portabilidade com navegadores dispositivos a compatibilidade e portabilidade com navegadores, dispositivos...

(Ferreira, 2005, p. 12)

Os Padrões Web tornam o desenvolvimento mais simples e produtivo, resultando em:

Montagem Rápida do Layout;Desenvolvimento simplificado;Desenvolvimento simplificado;Independência entre layout e conteúdo;Manutenção simplificada;Padrões Reaproveitáveis.

(Ferreira, 2005)

Boa posição nas ferramentas de busca

SEO S h E i O ti i tiSEO – Search Engine Optimization:

A estratégia de divulgação é peça fundamental para o sucesso de l ó i liqualquer negócio online.

Saiba mais: http://www.maujor.com/

AgoraAgora

Chega de conversaChega de conversa...

Padrões Web ‐ Introdução ao CSS

Sintaxe:

seletor {propriedade: valor;}

Inserindo CSS na página:

Existem 3 formas para aplicar CSS em páginas:

CSS Inline,

CSS Interno, e,

CSS Externo.

CSS Externo: (mais produtivo)

A ib idAtributo id:

O nome do id deve ser único. Não pode haver mais de um id com pmesmo nome em uma página.

O uso do ID é especificado assim:O uso do ID é especificado assim:

#nome { color:black;}

<div id="nome">conteúdo</div>

A ib classAtributo class:Ela serve para criar um grupo de elemento que terão características p g p qiguais e pode ser usado o mesmo nome varias vezes em uma página.O uso da class é especificado assim:

.destaques {background‐color:black;color:white;font‐family: Verdana;

}}<div class="destaques“> Aqui vai o texto do destaque</div>

Olá mundo:<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN"

Arquivo externo estilo.css

#principal{ width: 250px;}3"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http‐equiv="Content‐Type" content="text/html; charset=iso‐8859‐1" />

.destaque {background‐color:black;p q yp 59

color: #ededed;font‐family: Verdana;}

<body>

<div id="principal" class="destaque">Olá mundo tableless!

</div></div>

</body></html>

Exemplo 2: Arquivo externo estilo.css

<div id="geral"> margin:0px;padding:0px;list-style:none;text-decoration:none;}

# l {</div> #geral {margin: 0 auto;width: 960px;position: relative;position: relative;}

Exemplo 3: #topo {font-family: Arial, Helvetica, sans-serif;font-size: 36px;

<h1 id="topo">Logo – topo

color: #FF0000;background-color: #000000;display: block;g

</h1> float: left;height: 70px;width: 400px;

ddi 30 0 0 25padding: 30px 0 0 25px;}

Exemplo 4.1:

li h f "#" M / /li<li><a href="#">Menu 1</a></li><li><a href="#">Menu 2</a></li><li><a href="#">Menu 3</a></li><li><a href= # >Menu 3</a></li><li><a href="#">Menu 4</a></li><li><a href="#" class="menu5">Menu 5</a></li>

</ul></div>

Exemplo 4.2:#menu li a{font: 16px Verdana Arial Helvetica sans-serif;

#menu ul {background:#000000;width: 500px;

font: 16px Verdana, Arial, Helvetica, sans serif;color: #FFFFFF;float: left;margin: 45px 20px 0 20px;width: 500px;

height: 100px;float: left;padding: 0 0 0 35px;

margin: 45px 20px 0 20px;_margin: 45px 10px 0 20px;}

padding: 0 0 0 35px;}

#men l li{

#menu li a:hover {text-decoration:underline;

#menu ul li{ display:inline;list‐style: none;

color: #ccc;}

} #menu li.menu5 a { margin: 45px 0 0 20px;}

Exemplo 5:#condeudo {float:left;

<div id="conteudo">float:left;width:910px;border-color:#000;border style:none solid solid;

</div>

border-style:none solid solid;border-width:10px;padding:10px 15px;}}

Exemplo 6: #condeudo h2 {font: bold 28px Arial, Helvetica, sans-serif;margin: 15px 0;

<h2>Web Standards</h2><p>Texto xyz – Baixar texto

margin: 15px 0;}

#condeudo p {Texto xyz Baixar texto</p>

#condeudo p {font: 16px/28px Arial, Helvetica, sans-serif;width: 450px;

i 0 20 0 0margin: 0 20px 0 0;display: block;float:left;}

Exemplo 7.1:

</div>

#col2 {float:left;width: 200px;/div p ;display:block;}

Exemplo 7.2:

#col2 h1 a{background: #000;border: solid 10px #999;/h1

<h1><a href="#">Exemplo </a>

p ;width: 400px;height: 75px;float: left;<a href= # >Exemplo...... </a>

float: left;font: bold 60px Georgia, "Times New Roman", Times, serif;color: #FFFFFF;<h1>

<a href="#">Tableless!....</a></h1>

color: #FFFFFF;padding: 15px 10px;margin: 0 0 20px 0;}}

Exemplo 8:

</div>margin: 20px 0 0 0;width: 910px;height: 20px;float:left;}

MuitoObrigado!danilo@sitedodanilo.com.br

REFERÊNCIAS BIBLIOGRÁFICAS REFERÊNCIAS BIBLIOGRÁFICAS

FERREIRA, E. Produtividade Web 2.0. São Paulo: Visie, 2005.

ÓMEMÓRIA, F. Design para Internet: projetando a experiência perfeita. Rio de Janeiro: Elsevier, 2005.

NIELSEN, J. Usabiliy Engineering. San Francisco: Academic Press, 1993. 361 p.

NIELSEN, J.; LORANGER, H. Usabilidade na web. Rio de Janeiro: Elsevier, 2007.

ROSENFELD, L.; MORVILLE, P. Information Architecture for the Word Wide Web. 2ed. Sebastopol: O'Reilly, 2006.

SHEA, D.; HOLZSCHLAG, M.. The zen of css design: visual enlightenment for the web. Peachpit Press: Berkeley/CA, 2005.

ZELDMAN J D i i ith b t d d N Rid P bli hi I di li IN 2003ZELDMAN, J. Designing with web standards. New Riders Publishing: Indianapolis, IN, 2003.

Apresentaçao Aula 1

Design

Transcript of Apresentaçao Aula 1

Apresentaçao gestao

Apresentaçao -tema 1

Apresentaçao PAP

Apresentaçao piaçaba

Apresentaçao final modulo 1

Artigo1 apresentaçao

Apresentaçao Influenza

Apresentaçao Gisele

Apresentaçao do internato 2009[1].1

Apresentaçao Materiais de Construção II - 1 Revisão

Apresentaçao diagnostico

Apresentaçao rh

Metallica apresentaçao

Apresentaçao Setubal

Apresentaçao DAMAEQ

apresentaçao audiolight

Apresentaçao fe

Apresentaçao PHP

01 pe 2013 2017 apresentaçao em cp v6 (1)

APRESENTAÇAO reumatologia.pptx