2/23/10. Programa. Bibliografia, etc. Aula 1. Métodos & Tecnologias

Transcrição

1 Aula 1 39 Programa Métodos & Tecnologias Conceitos de IHC Programação web client side Concepção centrada no utilizador Model-based design Programação web server side Avaliação de interfaces 40 Bibliografia, etc. Human-Computer Interaction, third edition. Dix et al. (2004), Pearson/Prentice-Hall. Learning jquery 1.3. Chaffer and Swedberg (2009), Packt. Slides Artigos e outro material a entregar nas aulas 41 1

2 Funcionamento Aulas de UI das 14h às 17h30 (2h30+1h). Canais de comunicação - jose.campos@di.uminho.pt Componente de exposição teórica Componente prática Avaliação contínua 42 Aula 1 PROGRAMAÇÃO WEB Arquitectura em camadas 44 2

3 Importância da UI pessoas 45 Preâmbulo

4 2/23/ Importância da UI tecnologia UIs estão sujeitas a muitas alterações Novas features na aplicação Diversidade de dispositivos Novas tecnologias de input/output Separação de camadas Portabilidade Reutilização Uma aplicação, múltiplas interfaces Customisation 50 4

5 Arquitectura da UI Modelo de Seeheim 1st UI software tools workshop, Seeheim, Alemanha. 1-3 Nov., Modelo lógico de um UIMS (User Interface Management Systems) 51 Componentes do Modelo de Seeheim Presentation lê dados do input gera o output Dialogue Control define a estrutura do diálogo faz ponte entre Presentation e Application 52 Components of Seeheim Model (ctd) Application Interface Model representação da aplicação na perspectiva da interface inclui: especificação dos dados da aplicação especificação das operações da aplicação mapeamento dos dados e operações da interface para dados e operações da aplicação 53 5

6 Seeheim Model Prós and Contras Prós separation of concerns possibilitou a utilização de técnicas e ferramentas de processamento de linguagens Contras multi-threaded interaction? low-level ʻsemanticʼ feedback? cada componente é monolítico 54 Interfaces nos anos Web Apps Data sources / services 56 6

7 Conteúdo vs. Forma HTML (HyperText Markup Language) propósito original: definir o conteúdo de um documento HTML com tags de formatação (HTML 3.2) Uma má ideia! Formatação feita página a página!! CSS (Cascading Style Sheets) Aparecem no HTML 4.0 Definem como o HTML deve ser apresentado Permitem remover a informação de formatação do HTML Exemplo: 57 Separar o conteúdo do layout 58 Programação Web HTML/XHTML 59 7

8 Um pouco de história SGML HTML/HTML+ HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 X/HTML Forms 1997 visual markup CSS XML accesssibility internationalization rendering 2008 (draft) strict transactional frameset strict transactional frameset 60 Estrutura tipo de um documento HTML Com excepção do DOCTYPE, todo o documento está contido num elemento HTML Versão de HTML utilizada Informação sobre o <!DOCTYPE HTML PUBLIC "-//W3C//DTD documento (título, palavras HTML 4.01//EN" " chave, ) que não é considerada conteúdo <HTML> Charset do <HEAD> documento <META http-equiv="content-type" content="text/html; charset=iso "> <META name="keywords" lang="en-us content="vacation, sunshine"> <META name="keywords" lang= pt content= férias, sol"> <TITLE>My first HTML document</title> </HEAD> <BODY> <P>Hello world! </BODY> </HTML> Conteúdo do documento Todos os documentos HTML devem ter um elemento TITTLE na HEAD 61 HTML Forms GET POST GET: /le_nome.pl?user= <FORM ACTION= le_nome.pl" METHOD= GET"> Username: <INPUT TYPE="text" NAME="user > <INPUT TYPE= SUBMIT" VALUE="Submit > </FORM> 62 8

9 HTML 4.01 vs XHTML XHTML: XML com os mesmos elementos e atributos do HTML 4 - respeito pelo aninhamento - fechar todos os elementos elementos vazios também! (<br />) - case sensitive (tags em minúsculas) - valores dos atributos das tags entre aspas 63 Exemplo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <HTML> <HEAD> <META http-equiv="content-type" content="text/html; charset=iso "> <META <!DOCTYPE name="keywords" HTML PUBLIC lang="en-us "-//W3C//DTD XHTML 1.0 Strict//EN" " content="vacation, sunshine"> <META <html name="keywords" xmlns=" lang= pt content= férias, sol"> <head> </HEAD> <BODY> </BODY> </HTML> <TITLE>My first HTML document</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=iso /> <P>Hello world! <meta name="keywords" lang="en-us content="vacation, sunshine /> <meta name="keywords" lang= pt content= férias, sol /> <title>my first XHTML document</title> </head> <body> <p>hello world!</p> </body> </html> 64 (X)HTML (Extensible )HyperText Markup Language 65 9

10 <div> e <span> <div> - define uma secção no documento - block-level element por omissão tem largura máxima e quebras de linha antes e depois <span> - não provoca alterações visuais por si só - útil para marcar partes do documento - inline element 66 Programação Web CASCADING STYLE SHEETS 67 Cascading Style Sheets (CSS) Estilos (Styles) definem formatação dos elementos HTML Estilos podem ser guardados separademente do HTML em folhas de estilo (Style Sheets): - Ficheiros.css - Permitem controlar estilo e layout de multiplas páginas 68 10

11 Cascading Style Sheets (CSS) Aplicação dos estilos dá prioridade a (Cascading): 1. estilo Inline (dentro do elemento HTML) <dt style="margin bottom:20px;"> </dt> 2. style sheet interna (dentro da tag <head>) <style type="text/css"> <! td {font size: 0.8em;} > </style> 3. style sheet externa <link href= mystyle.css" rel="stylesheet" type="text/css"> 4. estilo por omissão do browser 69 CSS Sintaxe Expressão base: - selector {propriedade: valor} - body {color: black} p {font-family: "sans serif"} Mais que uma propriedade: - p {text-align: center; color: red} Mais que um selector - h1,h2,h3,h4,h5,h6 {color: green} 70 CSS Selectores Universal - faz pattern matching com qualquer elemento - *{color: red} Selecção por tipo h1{color: red} em {color: red} Selectores descendentes - HTML: <h1>título <em>muito</em> importante!</h1>?! - CSS: h1 em {colour: oranje} - CSS: h1 * em {colour: blue}?! 71 11

12 CSS Selectores Selectores filhos - Identifica um elemento que é filho de outro - body > p {line-height: 1.3} - div ol > li p?! Irmãos adjacentes - h1 + h2 {margin-top: -5mm} Selecção por atributos - h1[title] {color: blue;} - h1[lang=pt] { color: blue; } - Problema com valores por omissão! (XHTML) 72 CSS Selectores Classes - Diferentes estilos para o mesmo tipo de elemento? - CSS: p.right {text-align:right} p.center {text-align:center} - HTML: <p class="right">alinhado à direita.</p> <p class="center">centrado.</p> - Mais que uma classe: HTML: <p class="center bold">centrado e negrito.</p> CSS: p.center.bold {text-align:center; font-weight : bold} - Omissão do selector universal:.center {text-align:center} 73 CSS Selectores Idʼs - Podemos definir estilos com base no atributo id - Atributo id é único - CSS: h1#chapter1 {text-align: center} - HTML: <h1 id=chapter1>título</p> - Omissão do selector universal: #chapter1 {text-align:center} 74 12

13 CSS Selectores Pseudo-classes - :first-child CSS: div > p:first-child {text-indent: 0} HTML: <div class="note ><p>texto.</p></div> - :link e :visited a:link {color: red} a:visited {color: brown} a.external:visited {color: blue}?! 75 CSS Selectores Mais pseudo-classes - :hoover, : active e :focus a:hover {color: yellow} a:active {color: lime} a:focus {background: yellow} a:focus:hover {background: white} - :lang html:lang(fr-ca) { quotes: '«' '»' } html:lang(de) { quotes: '»' '«' '\2039' '\203A' } :lang(fr) > Q { quotes: '«' '»' }?! 76 CSS Selectores Pseudo-elements - :first-line p:first-line {text-transform: uppercase} - :first-letter p {line-height: 1.1} p:first-letter {font-size: 3em; font-weight: normal} span {font-weight: bold} - :before e :after body { counter-reset: chapter; /* Create a chapter counter scope */} h1:before { content: "Chapter " counter(chapter) ". "; counter-increment: chapter;} /* Add 1 to chapter */ h1 { counter-reset: section;} /* Set section to 0 */ h2:before { content: counter(chapter) "." counter(section) " "; counter-increment: section;} 77 13

14 Utilizar uma Style Sheet Estilo inline (dentro dos elementos HTML) - Perde-se a separação estílo / conteúdo - <htmltag style= propriedade: valor; > Style sheet interna (na <head>) - Para quando um documento tem um estilo único - <style type= text/css >  </style> Style sheet externa - <link href= stylesheet.css" rel="stylesheet" type="text/css"> 78 CSS Propriedades Estilo - Color - Font - Spacing - Layout - Posicionar os elementos na página - Acabaram-se as tabelas! (?!) - Tricky 79 CSS Layout Box model - Elementos HTML vistos como caixas - Propriedades CSS relevantes: width, height margin, margin-x border, border-x (border:1px dotted black) - border-width, border-x-width (border-width: medium) - border-color, border-x-color (border-top-color: lime) - border-style, border-x-style (border-style: dashed) padding, padding-x (padding: 12px 0px 12px 12px) X = {top, bottom, right, left} 80 14

15 CSS Layout Classification - permitem definir como e onde aparecem os elementos - Propriedades: float: left right none clear: left right both none cursor: url auto crosshair default display: none inline block position: static relative absolute fixed visibility: visible hidden collapse 81 CSS Layout Por omissão elementos são posicionados sequencialmente - float: left right none - position: static absolute relative fixed inherit - bottom top left right: auto % valor p {position: absolute; bottom: 20px} - clip: forma auto img {clip: rect(10px, 5px, 10px, 5px)} - overflow: visible hidden scroll auto - vertical-align: baseline sub super top text-top - z-index: auto número isolatin-1 ; - permite definir o charset a {font-family: <remote-font-name>; src: <source>} - importar URL ; - importa uma style mediatype {regras CSS} - define regras para um dado mediatype (screen, print, selector {regras CSS} - Para tratar paginação (

16 Exemplo

17

18 Links úteis The End! CASCADING STYLE SHEETS 91 18