Tribunal de Justiça de Pernambuco Padronização de Interface para Sistemas Web

Tamanho: px
Começar a partir da página:

Download "Tribunal de Justiça de Pernambuco Padronização de Interface para Sistemas Web"

Transcrição

1 Tribunal de Justiça de Pernambuco Padronização de Interface para Sistemas Web Versão 1.0

2 Introdução Este é um modelo completo para padronização de interfaces dos sistemas web do Tribunal de Justiça de Pernambuco. A padronização inclui as melhores práticas de usabilidade e acessibilidade, baseada no conjunto de regras da W3C, no Modelo de Acessibilidade do Governo Federal (e-mag), no site da ONG Acessibilidade Brasil e no livro Não me faça pensar (Krug), mas possui uma visão própria e singular do TJPE, com especificações, indicações simplificadas e priorizações adaptadas à realidade de nossas necessidades. Para incorporar no dia-a-dia as recomendações descritas neste padrão, é necessário compreender alguns conceitos e melhores práticas. Assim, o documento se divide em duas seções, uma teórica e com melhores práticas e outra com as definições específicas para os sistemas web do TJPE. Estrutura do documento: 1 Melhores práticas e teorias de usabilidade e acessibilidade 2 Especificação do Padrão 2.1 Template 2.2 Fonte 2.3 Links 2.4 Tipografia 2.5 Marcadores e Numeração 2.6 Cabeçalho 2.7 Menu 2.8 Breadcrumbs 2.9 Layout 2.10 Menu Específico 2.11 Dashboards 2.12 Botões 2.13 Tabelas 2.14 Paginação 2.15 Formulários 2.16 Mensagens 2.17 Tooltip

3 2.18 Impressão 2.19 Relatórios 2.20 Tela de Login Rodapé 3 Considerações Finais

4 1 - Melhores práticas e teorias de usabilidade e acessibilidade Usabilidade A usabilidade é a capacidade, em termos funcionais humanos, de um sistema ser usado facilmente e com eficiência pelo usuário (Shackel, 1993). Para Scapin (1993), a usabilidade está diretamente ligada ao diálogo na Interface, e materializa-se na capacidade do software permitir que o usuário alcance as suas metas na interação com o sistema. Princípios de usabilidade: 1 - Crie uma hierarquia visual clara em cada página Mostre com clareza e precisão os relacionamentos entre o que está na página: as coisas que se relacionam entre si e as que fazem parte de outras. 2 - Quanto mais importante algo é, mais destacado está Por exemplo, os tópicos mais importantes são maiores, estão em negrito, em uma cor diferente, com mais espaço em branco ou mais próximos do topo da página ou alguma combinação dessas características 3 - Coisas que estejam relacionadas logicamente, também estão relacionadas visualmente; Você pode mostrar que coisas são semelhantes agrupando-as sob um cabeçalho, exibindo-as de uma forma visualmente parecida ou colocando-as em uma área claramente definida. 4 - Coisas aninhadas visualmente para mostrar quais fazem parte de quais. Um cabeçalho da seção apareceria acima do título de uma determinada subseção, e assim por diante, de forma a representar o aninhamento entre as seções e subseções. 5 Antecipação O sistema web deve antecipar-se às necessidades do usuário. 6 - Autonomia Os usuários devem ter o controle sobre o sistema web. Os usuários sentem que controlam um web site se conhecem sua situação em um meio abrangente, mas não infinito. 7 Precaução nas cores Utilizar as cores com precaução para não dificultar o acesso aos usuários com problemas de distinção de cores. 8 Consistência As aplicações devem ser consistentes com as expectativas dos usuários, ou seja, com sua aprendizagem prévia. 9 - Eficiência do usuário Os sistemas web devem centrar-se na produtividade do usuário, não no próprio sistema. Por exemplo, às vezes as tarefas com maior número de passos são mais rápidas de realizar para uma pessoa que outras tarefas com menos passos mas mais complexas. 10 Reversibilidade Um sistema web há de permitir desfazer as ações realizadas 11 - Redução de tempo de latência. Torna possível otimizar o tempo de espera do usuário, permitindo a realização de outras tarefas

5 enquanto se completa a prévia e informando ao usuário do tempo pendente para a finalização da tarefa. 12 Aprendizagem Os sitemas web devem requerer um mínimo processo de aprendizagem e devem poder ser utilizados desde o primeiro momento. 13 Proteção do Trabalho A proteção do trabalho dos usuários é algo prioritário, deve-se assegurar que os usuários nunca percam seu trabalho por conseqüência de um erro Legibilidade A cor dos textos deve contrastar com a do fundo, e o tamanho de fonte deve ser suficientemente grande Continuação das ações do usuário. Conhecendo e armazenando informação sobre seu comportamento prévio deve-se permitir ao usuário realizar operações freqüentes de maneira mais rápida Interface visível. Deve-se evitar elementos invisíveis de navegação que há de ser inferidos pelos usuários, menus desdobráveis, indicações ocultas, etc. Outros princípios para o desenho das páginas de um sistema web são: a) Os usuários devem ser capazes de alcançar seus objetivos com um mínimo esforço e com resultados máximos. b) Um sistema web não pode tratar o usuário de forma hostil. Quando o usuário comete um erro o sistema deve solucionar o problema, ou por padrão sugerir varias soluções possíveis, mas não emitir respostas que meramente informem do erro culpando o usuário. c) Em nenhum caso um sistema web pode ir abaixo ou produzir um resultado inesperado. Por exemplo, não devem existir links quebrados. d) Um sistema web deve se ajustar aos usuários. A liberdade no uso de uma funcionalidade é um termo perigoso, quanto maior for o número de ações que um usuário possa realizar, maior será a probabilidade que cometa um erro. Limitando o número de ações ao público objetivo facilita-se o uso de um sistema web. e) Os usuários não devem sofrer sobrecarga ou falta de informação. Quando um usuário entra em um sistema web e não sabe por onde começar ou como realizar uma atividade, existe sobrecarga ou falta de informação. f) Um sistema web deve ser consistente em todos os passos do processo. Embora possa parecer apropriado que diferentes áreas tenham designs diferentes, a consistência entre os designs facilita ao usuário o uso de um sistema web. g) Um sistema web deve prover feedback aos usuários, de maneira que estes sempre conheçam e compreendam o que acontece em todos os passos do processo.

6 Acessibilidade A expressão acessibilidade, presente em diversas áreas de atividade, tem também na informática um importante significado. Representa para o nosso usuário não só o direito de acessar a rede de informações, mas também o direito de eliminação de barreiras arquitetônicas, de disponibilidade de comunicação, de acesso físico, de equipamentos e programas adequados, de conteúdo e apresentação da informação em formatos alternativos. Não é fácil, a princípio, avaliar a importância dessa temática associada à concepção de páginas para a web. Mas os dados W3C (Consórcio para a WEB) e WAI (Iniciativa para a Acessibilidade na Rede) apontam situações e características diversas que o usuário pode apresentar: 1. Incapacidade de ver, ouvir ou deslocar-se, ou grande dificuldade - quando não a impossibilidade - de interpretar certos tipos de informação. 2. Dificuldade visual para ler ou compreender textos. 3. Incapacidade para usar o teclado ou o mouse, ou não dispor deles. 4. Insuficiência de quadros, apresentando apenas texto ou dimensões reduzidas, ou uma ligação muito lenta à Internet. 5. Dificuldade para falar ou compreender, fluentemente, a língua em que o documento foi escrito. 6. Ocupação dos olhos, ouvidos ou mãos, por exemplo, ao volante a caminho do emprego, ou no trabalho em ambiente barulhento. 7. Desatualização, pelo uso de navegador com versão muito antiga, ou navegador completamente diferente dos habituais, ou por voz ou sistema operacional menos difundido. Essas diferentes situações e características precisam ser levadas em conta pelos criadores de conteúdo durante a concepção de uma página ou sistema web. Para ser realmente potencializador da acessibilidade, cada projeto de sistema deve proporcionar respostas simultâneas a vários grupos de incapacidade ou deficiência e, por extensão, ao universo de usuários da web. Os autores de páginas em HTML obtêm um maior domínio sobre as páginas criadas, por exemplo, com a utilização e divisão de folhas de estilo para controle de tipos de letra, e eliminação do elemento FONT. Assim, além de torná-las mais acessíveis a pessoas com problemas de visão, reduzem seu tempo de transferência, em benefício da totalidade dos usuários. Princípios para a acessibilidade na WEB A acessibilidade à web é parte integrante do projeto brasileiro de inclusão digital para as pessoas portadoras de necessidades especiais. No início do processo de adaptação dos sítios existentes a esse novo conceito, foram estabelecidos princípios gerais que, embora sem a garantia de total acessibilidade, favorecem seu conhecimento e experimentação por parte dos responsáveis. São os seguintes:

7 . quanto à apresentação da informação Associação de um texto a cada elemento não textual, como imagens, representações gráficas de texto, regiões de mapa de imagem, animações, botões gráficos etc.. quanto à navegação Garantia de que as ligações textuais ou com um equivalente textual sejam palavras ou expressões compreensíveis e que os elementos da página possam ser ativados pelo teclado.. quanto à implantação Utilização dos requisitos de acessibilidade de conteúdo da WEB do W3C/WAI, disponíveis em português (www.acessobrasil.org.br) ou inglês (www.cast.org/bobby). Desenho das Páginas Em relação ao desenho das páginas, são pressupostos do conceito de desenho universal: 1- Equiparação nas possibilidades de uso O design é útil e comercializável às pessoas com habilidades diferenciadas. 2- Flexibilidade no uso O design atende a uma ampla gama de indivíduos, preferências e habilidades. 3- Uso Simples e intuitivo O uso do design é de fácil compreensão, independentemente de experiência, nível de formação, conhecimento do idioma ou da capacidade de concentração do usuário. 4- Captação da informação O design comunica eficazmente ao usuário as informações necessárias, independentemente de sua capacidade sensorial ou de condições ambientais. 5- Tolerância ao erro O design minimiza o risco e as conseqüências adversas de ações involuntárias ou imprevistas. 6- Mínimo esforço físico O design pode ser utilizado com um mínimo de esforço, de forma eficiente e confortável. 7- Dimensão e espaço para uso e interação O design oferece espaços e dimensões apropriados para interação, alcance, manipulação e uso, independentemente de tamanho, postura ou mobilidade do usuário.

8 Orientações para a construção das páginas É fundamental assegurar uma transformação harmoniosa entre os elementos que compõem a página, tendo sempre em mente a necessidade de separar a estrutura da apresentação (conteúdo, estrutura e apresentação). Sempre que possível, incluir equivalentes textuais em todos os elementos (imagens, sons e demais elementos da página). O texto pode ser incluído de tal modo que seja possível ser interpretado por praticamente todos os dispositivos de navegação e por quase todos os usuários. Criar documentos que cumpram a sua finalidade, mesmo que o usuário não consiga ver e/ou ouvir. Fornecer informações que preencham a mesma finalidade ou função que o áudio ou o vídeo, de tal maneira que se adaptem o melhor possível a canais sensoriais alternativos. Isso não significa que deva ser criada uma versão áudio pré-gravada de todo o site, para torná-lo acessível a usuários cegos ou com problemas visuais graves. Esses podem recorrer à tecnologia dos leitores de tela para extraírem todas as informações textuais das páginas. Criar documentos que não dependam apenas de um tipo de equipamento. As páginas devem poder ser utilizadas por pessoas que não possuam mouse, que tenham monitores de vídeo pequenos, de baixa resolução ou monocromáticos, que apenas recebam voz ou texto. Tornar o conteúdo compreensível e navegável Os criadores de conteúdo Web devem tornar as suas produções compreensíveis e navegáveis. Isso passa não só por uma linguagem clara e simples, mas também pela apresentação de meios compreensíveis para proceder à navegação entre páginas e no interior delas. A inclusão de ferramentas de navegação e orientação nas páginas é um fator promotor da acessibilidade e da facilidade de uso. Nem todos os usuários podem se servir de "pistas" gráficas (como mapas de imagens, barras de deslocamento proporcionais, frames colocados lado a lado, ou gráficos) que guiam os usuários com visão normal, em navegadores gráficos de estações de trabalho gráficas. Os usuários perdem também informações de contexto quando apenas conseguem ver uma parte da página, seja porque estão acessando a página palavra a palavra (por discurso sintetizado ou monitor Braille), seja seção a seção (em um monitor de vídeo pequeno ou muito ampliado). Sem informações de orientação, os usuários podem não compreender tabelas, listas ou menus extensos, por exemplo.

9 2 Especificação do Padrão de Interface O desenho das páginas de sistemas web deve ter o único objetivo de tornar a experiência de interação do usuário fácil e agradável. A simplificação e a intuição humana, em relação à disposição dos elementos da página, devem ser elevadas ao máximo. Não é interessante fazer o usuário pensar sobre quais são as possibilidades de navegação, ou em que seqüência será lido o texto ou preenchido o formulário. Para que se alcancem as propriedades de usabilidade e acessibilidade nos sistemas web do TJPE, algumas recomendações essenciais são apresentadas nesta seção. 2.1 Template O modelo de desenho do template padrão proposto tenta construir uma identidade visual dos sistemas web do TJPE. Todos os demais elementos especificados neste documento devem harmonizar com o desenho do template. Para isso, as especificações dos elementos que compõem a estrutura e formatação das páginas foram definidas com este propósito e devem ser seguidas à risca, o que tornará fácil aos usuários navegar e identificar os elementos padronizados dos sistemas web do TJPE. A figura abaixo é um exemplo da composição de páginas web. Especificações: Ao construir o layout de páginas o projetista deve sempre utilizar a resolução padrão (1024x768 pixels), mas sem deixar de conferir o resultado final em resoluções menores (800 x 600 pixels) e em resoluções acima da resolução padrão. As páginas são construídas dentro de um contêiner que permite a utilização de uma resolução de vídeo de no mínimo 800 x 600 pixels. O Contêiner limita a largura máxima da página a 968 pixels, uma vez que páginas com largura ilimitada podem dificultar a percepção humana na

10 compreensão do conteúdo e na leitura do texto nele disposto. No entanto, o contêiner não limita a resolução máxima do vídeo do usuário. Para isso é necessário definir css do contêiner com as seguintes especificações: #conteiner{ width: 92%; margin:0 auto; max-width:968px; min-width: 740px; Ao projetar um sistema web neste padrão, lembre-se do princípio de usabilidade em relação à divisão de áreas: Divida as páginas em áreas claramente definidas. 2.2 Fonte A fonte padrão utilizada é a Trebuchet MS. Por questões de acessibilidade, deve-se definir um tamanho padrão de fonte válido para todo o documento e em seguida atribuir especificações relativas aos tamanhos de fontes utilizados nas outras tags. Por exemplo, uma vez definido o tamanho generalizado da fonte, uma tag H1 deve ser formatada, em relação ao tamanho da fonte, com a especificação relativa: font-size: 140%; A padrão do estilo geral da fonte segue a seguinte especificação: font-family: trebuchet ms,verdana,arial,tahoma; font-color: #666666; font-size: 12px/1.5; 2.3 Links Os links devem ser identificados por cor única em todas as páginas dos sistemas web. Princípio de Usabilidade: Deixe óbvio o que pode ser clicado. Para serem facilmente percebidos pelos usuários, os links devem ter cor diferenciada. A cor definida para os links foi o azul (DarkBlue) - hexadecimal (#003399). Ao passar o mouse sobre o link, deve-se sublinhar o link e alterar a cor para o azul (Dodgerblue) hexadecimal (#0066CC). A seguinte especificação atende aos requisitos de usabilidade dos links: a:link, a:visited { color: #003399; text-decoration: none;

11 a:hover{ color: #0066CC; text-decoration: none; Para complementar a experiência dos usuários com a identificação do tipo de link, algumas convenções de imagens de links são definidas ao incluir um link com um tipo específico. Por questões de codificação, deve-se disponibilizar alguma opção de não incluir a convenção de imagens, como por exemplo aplicando um estilo noicon aos atributos do link. Codificação desses links: Link para um <a href="something.doc">documento word</a><br /> Link para um <a href="something.pdf">documento pdf</a><br /> Link para um <a href="http://www.something.com">site externo</a><br /> Link para um <a href="something.rss">feed rss</a><br /> Link para um <a href="something.xls">documento excel</a><br /> Link para um <a href="aim:something">link AIM</a><br /> Link para um <a href="mailto:something">endereço de </a><br /> Link para um <a href="http://tjpe.jus.br/">link do tjpe</a><br /> Link para um <a class="noicon" href="http://yourwebsite.com">an internal link</a> 2.4 Tipografia A tipografia cria uma hierarquia visual clara em cada página exibida nos sistemas. A tipografia deve ser bem definida e simplificada, para que não ocorram discrepâncias entre as interfaces dos sistemas web. Os projetistas devem defini-la de forma clara e aplicá-la automaticamente nos estilos HTML padronizados. Por exemplo: Ao se definir um título, este deve estar entre as tags <H1>Título</H1>. Assim, este título será formatado conforme a definição padrão. É necessário que se mostrem com clareza e precisão os relacionamentos entre o que está na página: as coisas que se relacionam entre si e as que fazem parte de outras.

12 3 Princípios de hierarquia visual de usabilidade: Quanto mais importante algo é, mais destacado está. Coisas que estejam relacionadas logicamente, também estão relacionadas visualmente. Coisas são - aninhadas - visualmente para mostrar quais fazem parte de quais. A tipografia das páginas deve seguir o seguinte padrão: H1 - Utilizado para formatar o título principal da página. OBS: Cada página deve ter apenas um único título marcado com a tag H1. font-size: 180%; line-height:1.2em; margin-bottom:.3em; H2 Utilizado para formatar um título uma seção da página. font-size: 160%; line-height:1.2em; margin-bottom:.3em; margin-top:1em; H3 Utilizado para formatar um título de uma subseção hierarquicamente abaixo de alguma seção da página. font-size: 140%; line-height:1.2em; margin-bottom:.3em; H4 Utilizado para formatar um título hierarquicamente abaixo da subseção H3. font-size: 120%; line-height:1.2em; margin-bottom:.3em; H5 Utilizado para formatar um título hierarquicamente abaixo de um título com a tag H4 font-size: 100%; line-height:1.2em; margin-bottom:.3em; H6 Utilizado para formatar um título hierarquicamente abaixo de um título com a tag H5 font-size: 90%; line-height:1.2em; margin-bottom:.3em;

13 Utilização da class="fancy" Marque uma tag com class="fancy" para indicar uma citação Utilização da class="thin" Marque uma tag de cabeçalho (h1,h2,h3,etc) com class="thin" para retirar o negrito Utilização da class="caps" Blockquote Marque uma tag com class="caps" para exibir os caracteres em CAIXA ALTA. Utilize a tag "blockquote" para dar um destaque em alguma citação ou comentário sobre o conteúdo do texto. Veja a especificação da formatação: font-size:1.2em; padding-left:1em; border-left:4px solid #ccc; OBS: No caso de mensagens de erro ou alerta, utilize o padrão de mensagens Marcadores e Numeração Faça uso de marcadores e numeração quando desejar listar itens de forma ordenada ou indicativa ou quando desejar indicar fases ou etapas de procedimentos. Siga a formatação abaixo especificada: Lista ordenada: ol { list-style: decimal; Lista não ordenada: ul { list-style: square; Itens da lista: li { margin-left: 30px;

14 2.6 Cabeçalho O cabeçalho é composto pelo nome do sistema, opções de ajuda e suporte, imagem de background com a logomarca do TJPE e uma opção de pesquisa indexada. A figura abaixo demonstra a composição do cabeçalho: Especificações: O nome do sistema deve ser o primeiro elemento do cabeçalho. Está alinhado à esquerda com a seguinte formatação: #nome_do_sistema{ color:#666666; float:left; font-size:130%; margin:3px 0 0 5px; As opções de ajuda e sair(logout) estão horizontalmente na mesma linha do nome do sistema, alinhadas à direita. As opções estão inclusas em retângulos com bordas arredondadas na parte superior e com um fundo degradê em cinza-claro (as imagens estão disponíveis no exemplo do modelo). As especificações de fonte e link devem ser consultadas para a disponibilização das opções de ajuda e logout. Na opção de ajuda, deve ser apresentado todo o conteúdo de ajuda do sistema, incluindo manuais de utilização do sistema, vídeos-manuais, exemplos e modelos de documentos utilizados no sistema, perguntas freqüentes (FAQs) e demais opções de ajuda.também é possível dispor de um catálogo de serviço com a listagem dos responsáveis e quaisquer outras informações que possibilite ao usuário reportar erro, fazer sugestões e entrar em contato. A logomarca do sistema e a imagem de fundo (background) foram desenhadas com cores leves e devem ser utilizadas em todos os sistemas web, facilitando ao usuário o estabelecimento da identidade visual dos sistemas web do TJPE. Ao utilizar uma resolução de 800 x 600 pixels, o usuário não visualizará a imagem à esquerda (estátua) que compõe a imagem de fundo.veja o exemplo:

15 Recomenda-se dispor uma opção de pesquisa deve ser habilitada para todos os sistemas web e está indexada ao menu, conteúdo textual do sistema e outras opções definidas pela análise de requisitos. O nome padrão para a opção de pesquisa deve ser atentamente restrito à nomenclatura pesquisa, definido com a formatação do css: #pesquisar{ margin-top:60px; /* necessário para alinhamento vertical na parte inferior */ float:right; /* alinhamento horizontal à esquerda */ margin-right: 10%; color: #666666; font-size: 120%; 2.7 Menu O menu será disposto horizontalmente, uma vez que os usuários já lidam bastante com menus horizontais em softwares desktop. A hierarquização do menu deve ser bastante planejada para que se elimine qualquer confusão em relação à disponibilização das opções do menu. Aconselhase não utilizar mais de 3 níveis de menu. No entanto, o componente utilizado para renderização do menu deve suportar uma quantidade ilimitada de níveis. A fonte do menu deve ser do mesmo tipo e tamanho dos textos em link, com exceção da cor de fundo do menu e da respectiva imagem de background. A altura do menu é padronizada em 22 pixels. Caso sejam utilizadas imagens no menu, as medidas são: #imagens-menu{ width: 16px; height: 16px; O menu utiliza um background em azul para a disposição dos itens do primeiro nível. Este nível deve, também, suportar ícones com a especificação acima. O background em degradê deve ir da cor azul # para a cor azul #76A3F5, gerando a imagem abaixo: Com 22 pixels de altura. Ao passar o cursor sobre o primeiro nível do menu, deve-se alternar a imagem do background que é um degradê de branco #FFFFFF para a cor cinza #CCCCCC, gerando a imagem abaixo:

16 Com 22 pixels de altura. A definição abaixo deve ser seguida: #background-primeironivel{ background: # url(../images/menu_background_over.jpg); #background-primeironivel-over{ background: #FFFFFF url(../images/background_over.jpg); Por questões de acessibilidade, os menus devem ser formatados utilizando as tags de listagem em HTML: ul e li. Neste caso, garantimos que, caso o css não seja carregado, ainda assim, o menu será exibido na forma de lista. Do segundo nível em diante, deve-se usar a cor cinza-claro #F3F3F3 no background. Para o local das imagens, que compreende uma faixa de 25pixels de largura, deve-se usar a cor #E0E0E0. Essa distinção gera o efeito abaixo: 2.8 Breadcrumbs Breadcrumb é uma ajuda de navegação usada na interface de páginas web, dando aos usuários uma forma de guardar a trilha percorrida até a página onde ele se encontra. Com isso é possível voltar a um ponto anterior desejado apenas clicando no link disponível. No padrão do TJPE será usado breadcrumb de caminho, ou seja, indicando o caminho estruturado percorrido até a página onde o usuário se encontra. Há um contêiner padrão para inserção de breadcrumbs disposto logo abaixo do menu. A análise de requisitos deve especificar o nível de abstração e detalhamento utilizado nos links do breadcrumb. Por questões de acessibilidade, os breadcrumbs devem ser formatados utilizando as tags de listagem em HTML: ul e li. Neste caso, garantimos que, caso o css não seja carregado, ainda assim, o menu será exibido na forma de lista. A especificação do css que compõe o contêiner do Breadcrumb segue o padrão: Distância em relação ao menu: margin-top:10px; Contêiner: border:1px solid #D0D0D0; height: 18px; padding: 4px 0 0 8px; background: #F4F4F8; padding:2px 0;

17 2.9 Layout O template deste padrão contempla 4 opções de layout para disponibilização de funções, conteúdo e informações de utilização do sistema. 1ª opção: Conteúdo em única coluna <div class="conteudo"> <!-- CONTEÚDO DA PÁGINA --> </div> 2ª opção: Conteúdo em 2 colunas (menu específico + conteúdo) <div class="conteudo"> <div class="layout_menu_vertical"> <!-- MENU ESPECÍFICO --> </div> <div class="layout_menuvertical_conteudo"> <!-- CONTEÚDO DA PÁGINA --> </div> </div>

18 3ª opção: Conteúdo em 3 colunas (menu específico + conteúdo + informações complementares) <div class="conteudo"> <div class="layout_menu_vertical"> <!-- MENU ESPECÍFICO --> </div> <div class="layout_menuvertical_conteudo_informacoes"> <!-- CONTEÚDO DA PÁGINA --> </div> <div class="layout_informações_complementares"> <!-- INFORMAÇÕES COMPLEMENTARES --> </div> </div> 4ª opção: Conteúdo em 2 colunas (conteúdo + informações complementares) <div class="conteudo"> <div class="layout_conteudo_informacoes"> <!-- CONTEÚDO DA PÁGINA --> </div> <div class="layout_informações_complementares"> <!-- INFORMAÇÕES COMPLEMENTARES --> </div> </div>

19 2.10 Menu específico Alguns sistemas precisam fazer uso de um menu vertical para disponibilizar as opções para uma determinada funcionalidade. Por exemplo, a utilização do menu vertical para as opções de gestão de documentos eletrônicos, caixa de entrada ou saída de e menu com hierarquização de pastas organizacionais. Para tais sistemas, sugere-se a utilização de um menu vertical, que disponha as opções específicas para tais funcionalidades. O menu vertical deve ser disposto à esquerda do conteúdo principal da página, tendo 160px de largura. As categorias de itens do menu, como por exemplo Caixa de Entrada, possuem a imagem abaixo como background: Os itens agrupados nas categorias do menu vertical tem a seguinte cor de background: #F4F4F8..msg_list { width: 160px;.msg_head { padding: 3px 5px; cursor: pointer; background: #CCCCCC url(images/back_bottom.jpg);.msg_body { padding: 5px 10px 10px; background-color:#f4f4f8;

20 O menu, se possível, deve possuir o efeito accordion. Ou seja, é possível clicar, de acordo com o exemplo, na categoria Caixa de Saída para expandir os itens agrupados nesta categoria, obtendo o efeito abaixo: 2.11 Dashboards O termo Dashboard é utilizado para indicar um "painel de indicadores" que dão um overview do atual estado do sistema web, indicando, de forma resumida e gráfica, as principais informações importantes do negócio aos usuários. A maioria dos sistemas não possui informações nem conteúdo na página principal (a primeira tela do sistema após o login). Assim, sugere-se que sejam definidos indicadores com informações visuais e resumidas, relevantes para o sistema. Cabe à análise de requisitos a definição de quais indicadores farão parte da página inicial. A utilização de dashboards na página inicial não é obrigatória, mas recomendada.

21 2.12 Botões Os botões são padronizados em relação às cores, altura e ícones utilizados e devem ser exibidos de acordo com o padrão de nomenclatura descrito neste documento. Os botões devem suportar a exibição com texto e a exibição com ícone e texto. A especificação do css que formata os botões é: a.button, button { padding:2px 10px 2px 10px; border:1px solid #bbb; border-top:1px solid #ddd; border-left:1px solid #ddd; background-color:#e9e9e9; font-size:100%; line-height:100%; text-decoration:none; font-weight:bold; cursor:pointer;

22 Existem três opções para utilização dos botões: padrão, positivo, negativo. A forma padrão formata os botões de acordo com a especificação acima e aplica o seguinte css quando o mouse está sobre o botão: button:hover, a.button:hover{ background-color:#dff4ff; border:1px solid #c2e1ef; color:#336699; a.button:active, button:active{ background-color:#6299c5; border:1px solid #6299c5; color:#fff; Exemplo de botão padrão (sem o mouse sobre ele): Exemplo de botão parão (com o mouse sobre ele): A forma positiva deve ser utilizada quando for necessário identificar uma ação positiva para tal botão, como por exemplo salvar os dados preenchidos em um formulário. Deve-se usar o seguinte css para a forma positiva: body.positive { color:#529214; a.positive:hover, button.positive:hover { background-color:#e6efc2; border:1px solid #C6D880; color:#529214; a.positive:active, button.positive:active { background-color:#529214; border:1px solid #529214; color:#fff; Exemplo de botão com a classe (positive) (sem o mouse sobre ele): Exemplo de botão com a classe (positive) (com o mouse sobre ele):

23 A forma negativa deve ser utilizada quando for necessário identificar uma ação negativa para tal botão, como por exemplo cancelar uma tela de formulário. Deve-se usar o seguinte css para a forma negativa: body.negative { color:#d12f19; a.negative:hover, button.negative:hover { background:#fbe3e4; border:1px solid #fbc2c4; color:#d12f19; a.negative:active, button.negative:active { background-color:#d12f19; border:1px solid #d12f19; color:#fff; Exemplo de botão com a classe (negative) (sem o mouse sobre ele): Exemplo de botão com a classe (negative) (com o mouse sobre ele): 2.13 Tabelas Na utilização de tabelas, deve-se fornecer resumo das tabelas utilizando o atributo summary, caso seja criada uma tabela para dados. Se a tabela for criada para efeito de design, deixar o summary em branco. Em tabelas de dados com dois ou mais níveis lógicos de cabeçalhos, sejam de linha ou coluna, utilizar marcações para associar as células de dados às células de cabeçalho. As tabelas complexas devem ser organizadas de forma a identificar facilmente as divisões. O exemplo abaixo demonstra a correta construção de tabelas. <table border="1" cellpadding="2" cellpadding="3"> <caption>despesas de Viagem (custo atual, real)</caption> <thead> <tr> <th><span id="t-l1">viagem,<br />data</span></th>

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução O Gmail possui duas versões distintas para seu webmail: uma mais recente, que é a versão atual utilizada pelos usuários de Gmail, e

Leia mais

CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13

CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 CSS Sérgio Nunes Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 1 Objetivos Conhecer as origens e os objetivos da linguagem CSS. Conhecer a estrutura base de uma regra CSS. Compreender

Leia mais

CAUETEC INFORMÁTICA Rua Serra Talhada, 153 Vila Diana - 04835-150 São Paulo. Fone: 3441-6836 Site: www.cauetec.com.br E-mail: cauetec@cauetec.com.

CAUETEC INFORMÁTICA Rua Serra Talhada, 153 Vila Diana - 04835-150 São Paulo. Fone: 3441-6836 Site: www.cauetec.com.br E-mail: cauetec@cauetec.com. 3 de 13 Índice 1. Mapa CSS e legenda das principais imagens que compõe as paginas...4 a. Conhecimentos desejáveis:...4 b. Modelos Clássico e Fundo Fixo:...4 c. Para o designer o que muda entre o modelo

Leia mais

Lista e Tabelas. Fundamentos da Linguagem Web

Lista e Tabelas. Fundamentos da Linguagem Web Lista e Tabelas Fundamentos da Linguagem Web Bruno Angelo Medeiros Março de 2015 LISTAS O que são? Tipos Ordenadas Não ordenadas De definição Exemplos Exercícios LISTAS - O QUE SÃO? São uma forma de organização

Leia mais

TABLELESS E PROJETO ESTRUTURAL

TABLELESS E PROJETO ESTRUTURAL Barra Lateral 1 Barra Lateral 2 Barra Lateral 2 Barra Lateral Barra Lateral DISCIPLINA: FUNDAMENTOS E TECNOLOGIA EM WEB Professora: Adriana Silva TABLELESS E PROJETO ESTRUTURAL O termo TABLELESS refere-se

Leia mais

CSS Cascading Style Sheets Folhas de Estilo em Cascata

CSS Cascading Style Sheets Folhas de Estilo em Cascata CSS Cascading Style Sheets Folhas de Estilo em Cascata Conjunto de instruções que controla a aparência de uma página Web 1. Regra CSS seletor { propriedade1: valor; propriedade2: valor; 2. Aplicação 2.1

Leia mais

Aula 5 Cabeçalhos, Imagens e Links

Aula 5 Cabeçalhos, Imagens e Links Roteiro Aula 5 Cabeçalhos, Imagens e Links Efeitos em cabeçalhos Imagens e CSS Links Curso: Técnico em Informática / 2º Módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Efeitos

Leia mais

Observações importantes:

Observações importantes: Fundação CECIERJ - Vice Presidência de Educação Superior a Distância Curso de Tecnologia em Sistemas de Computação Disciplina Criação de Páginas de WEB AD1 1 semestre de 2014. Observações importantes:

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução Nesta útima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes Yahoo! Mail

Leia mais

neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css?

neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css? neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css? O html inclui uma tag para praticamente todos os elementos de design comumente

Leia mais

Aula 7 LISTAS E TABELAS. Curso: Técnico em Informática Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme

Aula 7 LISTAS E TABELAS. Curso: Técnico em Informática Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Aula 7 LISTAS E TABELAS Curso: Técnico em Informática Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Listas Prover mecanismos para listar informações Devem conter um ou mais itens Elementos

Leia mais

SIEP / RENAPI. Dicas HTML e CSS para Desenvolvimento. de um Site/Portal Acessível

SIEP / RENAPI. Dicas HTML e CSS para Desenvolvimento. de um Site/Portal Acessível SIEP / RENAPI Dicas HTML e CSS para Desenvolvimento de um Site/Portal Acessível Setembro de 2009 Dicas HTML e CSS para Desenvolvimento de um Site/Portal Acessível Cuidados em geral Separar adequadamente

Leia mais

Curso de Capacitação em Gerenciador de Conteúdo PLONE

Curso de Capacitação em Gerenciador de Conteúdo PLONE Curso de Capacitação em Gerenciador de Conteúdo PLONE 1 Índice Customização Acionar modo debug 3 Propriedades Básicas 10 Arquivos de Customização 15 2 Customização Intermediário Com a definição do posicionamento

Leia mais

DICAS PARA DESENVOLVER SITE ACESSÍVEL

DICAS PARA DESENVOLVER SITE ACESSÍVEL DICAS PARA DESENVOLVER SITE ACESSÍVEL Este arquivo contém dicas para o desenvolvimento de uma página acessível e de acordo com as normas W3C (World Wide Web). Para uma boa compreensão destas dicas é necessário

Leia mais

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Recursos avançados com CSS Uma vez entendido o uso básico e treinado muito, chegou

Leia mais

CSS -Cascading Style Sheets - Introdução

CSS -Cascading Style Sheets - Introdução CSS -Cascading Style Sheets - Introdução Como surgiu a tecnologia CSS? De início, a linguagem HTML foi criada para a construção de páginas Web, que exibiam apenas documentos científicos. Com a evolução

Leia mais

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS.

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS. UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Programação de Computadores

Leia mais

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Laboratório de Práticas

Leia mais

> Herbet Ferreira Rodrigues > contato@herbetferreira.com

> Herbet Ferreira Rodrigues > contato@herbetferreira.com Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação

Leia mais

Manual do Publicador. Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web

Manual do Publicador. Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web Manual do Publicador Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web Sumário Painel de Administração... 3 1 - Inserção de post... 5 2 Publicação de post com notícia na área headline (galeria de

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Thunderbird e Terra Nesta terceira edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos do webmail

Leia mais

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -INTRODUÇÃO A JQUERY MOBILE. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -INTRODUÇÃO A JQUERY MOBILE. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -INTRODUÇÃO A JQUERY MOBILE Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza ROTEIRO Introdução Principais características Página dentro de página Transições

Leia mais

Acessibilidade na Web Cesár Bomfim Brasília 15 de Março

Acessibilidade na Web Cesár Bomfim Brasília 15 de Março Acessibilidade na Web Cesár Bomfim Brasília 15 de Março Avaliação Passos para Site Acessível -Seguir padrões Web; -Seguir as diretrizes e recomendações de acessibilidade; -Realizar avaliação de acessibilidade.

Leia mais

Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:

Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe: 48 10. CSS 10.1 O que é CSS? CSS é a mesma coisa que Style Sheets e que Folhas de Estilo. Você já deve ter visto esses nomes em vários lugares. CSS é mais uma forma de aperfeiçoar seus documentos, o CSS

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução Nesta sexta e penúltima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes

Leia mais

Excel 2010 Modulo II

Excel 2010 Modulo II Excel 2010 Modulo II Sumário Nomeando intervalos de células... 1 Classificação e filtro de dados... 3 Subtotais... 6 Validação e auditoria de dados... 8 Validação e auditoria de dados... 9 Cenários...

Leia mais

APOSTILA DE PROGRAMAÇÃO WEB

APOSTILA DE PROGRAMAÇÃO WEB Programação Web - CSS 1 PROFESSOR LUIS NÍCOLAS DE AMORIM TRIGO APOSTILA DE PROGRAMAÇÃO WEB CSS CASCADING STYLE SHEETS (FOLHAS DE ESTILO EM CASCATA) Programação Web - CSS 2 INTRODUÇÃO CSS, também conhecido

Leia mais

Compêndio códigos. {css}

Compêndio códigos. {css} Compêndio códigos {css} ADVERTÊNCIA: A que se segue é apenas uma lista com as propriedades de CSS, não pretende de modo algum ser um manual. Pressupõe, portanto, que já se saiba de antemão o signi cado

Leia mais

Anexo III Funcionamento detalhado do Sistema Montador de Autoria

Anexo III Funcionamento detalhado do Sistema Montador de Autoria 1 Sumário Anexo III Funcionamento detalhado do Sistema Montador de Autoria Anexo III Funcionamento detalhado do Sistema Montador de Autoria... 1 1 Sumário... 1 2 Lista de Figuras... 5 3 A Janela principal...

Leia mais

CSS (Style Sheets - Folhas de Estilo)

CSS (Style Sheets - Folhas de Estilo) Anuncie nesse espaço da Aprendendo HomePage, clique aqui e veja como e porque. CSS (Style Sheets - Folhas de Estilo) CSS é a mesma coisa que Style Sheets e que Folhas de Estilo. Vc já deve ter visto esses

Leia mais

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe

Leia mais

Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-1. Desenvolvimento de WEB I HTML Volume 2 Erwin Alexander Uhlmann

Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-1. Desenvolvimento de WEB I HTML Volume 2 Erwin Alexander Uhlmann Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-1 Desenvolvimento de WEB I HTML Volume 2 Erwin Alexander Uhlmann Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-2 Sumário Behaviors

Leia mais

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS é uma linguagem para estilos (formatação) que define o layout de documentos HTML. CSS controla fontes, cores, margens,

Leia mais

MANUAL DE IDENTIDADE VISUAL DOS SITES DO GOVERNO DO ESTADO DA BAHIA

MANUAL DE IDENTIDADE VISUAL DOS SITES DO GOVERNO DO ESTADO DA BAHIA MANUAL DE IDENTIDADE VISUAL DOS SITES DO GOVERNO DO ESTADO DA BAHIA Índice 1. Introdução 03 2. Elementos Padronizados 2.1. Topo 2.2. Rodapé 2.3. Menu 2.4. Cores e Fontes 2.5. Títulos 2.6. Banners 04 04

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução Nesta quinta edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos o estudo do Windows Mail, um cliente

Leia mais

Conceitos Fundamentais de Microsoft Word. Professor Rafael rafampsilva@yahoo.com.br www.facebook.com/rafampsilva

Conceitos Fundamentais de Microsoft Word. Professor Rafael rafampsilva@yahoo.com.br www.facebook.com/rafampsilva Conceitos Fundamentais de Microsoft Word Professor Rafael www.facebook.com/rafampsilva Introdução É um editor de texto ou processador de texto? editores de texto: editam texto (assim como uma máquina de

Leia mais

SisLegis Sistema de Cadastro e Controle de Leis

SisLegis Sistema de Cadastro e Controle de Leis Sistema de Cadastro e Controle de Leis Desenvolvido por Fábrica de Software Coordenação de Tecnologia da Informação Pág 1/22 Módulo: 1 Responsável: Desenvolvimento Ti Data: 01/11/2012 Versão: 1.0 Empresa:

Leia mais

Ele vai localizar este código, substitua então o The Beat Was Goin' Strong pelo nome do seu tumblr.

Ele vai localizar este código, substitua então o The Beat Was Goin' Strong pelo nome do seu tumblr. Então gente, há alguns dias, disponibilizei meu theme antigo, o primeiro feito por mim, e eu não coloquei appearance nele, e quem não tem conhecimento de html fica meio tenso de editar. Então, ao invés

Leia mais

Introdução à Cascading Style Sheets

Introdução à Cascading Style Sheets Estilo e Produtividade para Websites OVERVIEW História e Significado Por que usar? Como usar? Orientações ao Desenvolvedor O que é CSS? O que é CSS? Cascading Style sheets" ou "Folhas de Estilo Encadeadas

Leia mais

Manual de Gerenciamento de Conteúdo

Manual de Gerenciamento de Conteúdo Manual de Gerenciamento de Conteúdo 1 Sumário 1) O que é um Gerenciador de Conteúdo...3 2) Como o Site está Estruturado...3 3) Como Gerenciar o Conteúdo do Site...5 3.1) Adicionar Itens no Menu de Navegação...6

Leia mais

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4 Sumário Todos os direitos reservados e protegidos pela Lei 5.988 de 14/12/73. Nenhuma parte deste livro, sem prévia autorização por escrito de Celta Informática, poderá ser reproduzida total ou parcialmente,

Leia mais

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com. #Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Apresentar os conceitos de utilização do CSS, Sintaxe, Seletores

Leia mais

WebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira

WebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira WebDesign Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Entendendo Alguns Conceitos Antes de prosseguirmos é importante ter em mente o motivo pelo

Leia mais

e-mag Checklist de Acessibilidade Manual para Deficientes Visuais

e-mag Checklist de Acessibilidade Manual para Deficientes Visuais Ministério do Planejamento, Orçamento e Gestão Secretaria de Logística e Tecnologia da Informação Departamento de Governo Eletrônico Ministério da Educação Secretaria de Educação Profissional e Tecnológica

Leia mais

M A N U A L D E I D E N T I D A D E V I S U A L D O S S I T E S D O G O V E R N O D O P A R A N Á

M A N U A L D E I D E N T I D A D E V I S U A L D O S S I T E S D O G O V E R N O D O P A R A N Á M A N U A L D E I D E N T I D A D E V I S U A L D O S S I T E S D O G O V E R N O D O P A R A N Á Índice 1. Introdução 2. Estrutura 2.1. Topo 2.2. Corpo 2.3. Coluna Esquerda 2.4. Coluna Direita 2.5. Rodapé

Leia mais

Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI

Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI Manual do usuário Desenvolvendo páginas em Drupal Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI Conteúdo Primeiro Passo... 3 1.1 Login... 3 1.2 Recuperando a Senha...

Leia mais

Técnicas e processos de produção. Profº Ritielle Souza

Técnicas e processos de produção. Profº Ritielle Souza Técnicas e processos de produção Profº Ritielle Souza Ferramentas Programáveis Mensagem para mais de um destinatário FALE CONOSCO Definindo

Leia mais

Apostila da Ferramenta AdminWEB

Apostila da Ferramenta AdminWEB Apostila da Ferramenta AdminWEB Apostila AdminWEB SUMÁRIO OBJETIVO DO CURSO... 3 CONTEÚDO DO CURSO... 4 COMO ACESSAR O SISTEMA... 5 CONHEÇA OS COMPONENTES DA PÁGINA... 6 COMO EFETUAR O LOGIN... 9 MANTER

Leia mais

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013 Efeito cascata Aula 4 Modelo CSS Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Fontes das folhas de estilo Autor Usuário Agente do usuário

Leia mais

HTML. Conceitos básicos de formatação de páginas WEB

HTML. Conceitos básicos de formatação de páginas WEB HTML Conceitos básicos de formatação de páginas WEB HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto

Leia mais

QUEM FEZ O TRABALHO?

QUEM FEZ O TRABALHO? Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome

Leia mais

Roteiro 2: Conceitos de Tags HTML

Roteiro 2: Conceitos de Tags HTML Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias

Leia mais

Manual do Usuário. Sumário

Manual do Usuário. Sumário Manual do Usuário Sumário Login... 2 Tela inicial (Dashboard)... 3 Modelo Operacional... 4 Agrupamentos de Menus... 6 Conteúdos / Notícias / Eventos... 9 Capas... 14 Repositório de Arquivos... 17 Enquetes...

Leia mais

CSS - Background, Color e Fontes. Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br

CSS - Background, Color e Fontes. Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br Web Introdução Design CSS - Background, Color e Fontes Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br O que veremos... CSS Cores e fundos Fontes Cores e fundos Algumas propriedades

Leia mais

Informática Básica. Microsoft Word XP, 2003 e 2007

Informática Básica. Microsoft Word XP, 2003 e 2007 Informática Básica Microsoft Word XP, 2003 e 2007 Introdução O editor de textos Microsoft Word oferece um conjunto de recursos bastante completo, cobrindo todas as etapas de preparação, formatação e impressão

Leia mais

Introdução à Tecnologia Web

Introdução à Tecnologia Web Introdução à Tecnologia Web HTML HyperText Markup Language XTML extensible HyperText Markup Language Elementos da Seção do Corpo Tabelas Formulários Professor Alan Cleber Borim www.alanborim.com.br Índice.

Leia mais

Request Tracker. Manual de Usuário Versão 1.0

Request Tracker. Manual de Usuário Versão 1.0 Request Tracker Manual de Usuário Versão 1.0 ÍNDICE 1. REQUEST TRACKER...3 2. CONCEITOS NO RT...4 2.1. TÍQUETE E FILA...4 2.2. ESTADOS DO TÍQUETE...5 2.3. PRIORIDADE DO TÍQUETE...5 2.4. PESSOAS...6 2.5.

Leia mais

Web Design Aula 15: Conhecendo CSS

Web Design Aula 15: Conhecendo CSS Web Design Aula 15: Conhecendo CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Agrupando Seletores Herança Comentários Exercício Adicionando Classes Validação Propriedades Agrupando

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Prof. André Yoshimi Kusumoto andrekusumoto.unip@gmail.com http://www.kusumoto.com.br Apresentação Carga horária mensal:

Leia mais

Construindo Sites com. CSS e (X)HTML. sites controlados por folhas de estilo em cascata. Maurício Samy Silva. Novatec

Construindo Sites com. CSS e (X)HTML. sites controlados por folhas de estilo em cascata. Maurício Samy Silva. Novatec Construindo Sites com CSS e (X)HTML sites controlados por folhas de estilo em cascata Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...14 Introdução...16 Para quem foi escrito este

Leia mais

Diveo Exchange OWA 2007

Diveo Exchange OWA 2007 Diveo Exchange OWA 2007 Manual do Usuário v.1.0 Autor: Cícero Renato G. Souza Revisão: Antonio Carlos de Jesus Sistemas & IT Introdução... 4 Introdução ao Outlook Web Access 2007... 4 Quais são as funcionalidades

Leia mais

Guia de criação de layout de Loja Virtual

Guia de criação de layout de Loja Virtual Guia de criação de layout de Loja Virtual Julho / 2013 (51) 3079-4040 contato@ezcommerce.com.br http://www.ezcommerce.com.br Este guia tem o intuito de orientar a criação de layout para a plataforma de

Leia mais

Tutorial Plone 4. Desenvolvimento de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados

Tutorial Plone 4. Desenvolvimento de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados Tutorial Plone 4 Desenvolvimento de Sites Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados Sumário Introdução 1 Como fazer a autenticação do usuário 1.1 Através

Leia mais

1998-2011 Domínio Sistemas Ltda. Todos os direitos reservados.

1998-2011 Domínio Sistemas Ltda. Todos os direitos reservados. Saiba que este documento não poderá ser reproduzido, seja por meio eletrônico ou mecânico, sem a permissão expressa por escrito da Domínio Sistemas Ltda. Nesse caso, somente a Domínio Sistemas poderá ter

Leia mais

02 - Usando o SiteMaster - Informações importantes

02 - Usando o SiteMaster - Informações importantes 01 - Apresentação do SiteMaster - News Edition O SiteMaster foi desenvolvido para ser um sistema simples de gerenciamento de notícias, instalado em seu próprio computador e com configuração simplificada,

Leia mais

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto)

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto) HTML (Hypertext Markup Language Linguagem de Marcação de Hipertexto) CSS - Cascading Style Sheets CSS serve para definir propriedades de apresentação/formatação a aplicar em tags HTML. A sua utilização

Leia mais

Microsoft Excel 2000. Alan Cleber Borim - alan.borim@poli.usp.br. http://www.pcs.usp.br/~alan

Microsoft Excel 2000. Alan Cleber Borim - alan.borim@poli.usp.br. http://www.pcs.usp.br/~alan Microsoft Excel 2000 Alan Cleber Borim - alan.borim@poli.usp.br http://www.pcs.usp.br/~alan Microsoft Índice 1.0 Microsoft Excel 2000 3 1.1 Acessando o Excel 3 1.2 Como sair do Excel 3 1.3 Elementos da

Leia mais

Customização de Interface - Página Inicial

Customização de Interface - Página Inicial Customização de Interface - Página Inicial Sumário 1. Logo... 4 1.1. Edição... 4 2. Inputs - formulários... 4 2.1. Busca... 4 2.2. Novidades... 4 3. Fontes... 5 3.1. Cores (color)... 5 3.2. Tamanho (font-size)...

Leia mais

Interação Humano-Computador Design: estrutura e estética PROFESSORA CINTIA CAETANO

Interação Humano-Computador Design: estrutura e estética PROFESSORA CINTIA CAETANO Interação Humano-Computador Design: estrutura e estética PROFESSORA CINTIA CAETANO Arte X Engenharia Desenvolver Sistema Web é arte? A Web oferece espaço para arte...... mas os usuários também desejam

Leia mais

FACULDADE PARAÍSO DO CEARÁ Jonas Pinto Esteves CRIANDO APLICAÇÕES WEB RESPONSIVAS COM INTERFACE HTML5 VOLTADAS PARA DISPOSITIVOS MOBILE

FACULDADE PARAÍSO DO CEARÁ Jonas Pinto Esteves CRIANDO APLICAÇÕES WEB RESPONSIVAS COM INTERFACE HTML5 VOLTADAS PARA DISPOSITIVOS MOBILE FACULDADE PARAÍSO DO CEARÁ Jonas Pinto Esteves CRIANDO APLICAÇÕES WEB RESPONSIVAS COM INTERFACE HTML5 VOLTADAS PARA DISPOSITIVOS MOBILE Juazeiro do Norte CE 2012 Jonas Pinto Esteves CRIANDO APLICAÇÕES

Leia mais

DIRETRIZES PARA O DESENHO DE INTERFACES PARA OS SÍTIOS WEB DOS ÓRGÃOS INSTITUCIONAIS DO MERCOSUL

DIRETRIZES PARA O DESENHO DE INTERFACES PARA OS SÍTIOS WEB DOS ÓRGÃOS INSTITUCIONAIS DO MERCOSUL MERCOSUL/GMC/RES. Nº 06/08 DIRETRIZES PARA O DESENHO DE INTERFACES PARA OS SÍTIOS WEB DOS ÓRGÃOS INSTITUCIONAIS DO MERCOSUL TENDO EM VISTA: O Tratado de Assunção, o Protocolo de Ouro Preto, as Decisões

Leia mais

DESENVOLVIMENTO DE PÁGINAS PARA INTERNET

DESENVOLVIMENTO DE PÁGINAS PARA INTERNET UNIVERSIDADE ESTADUAL DE MARINGÁ PRÓ-REITORIA DE RECURSOS HUMANOS E ASSUNTOS COMUNITÁRIOS - PRH DIRETORIA DE RECURSOS HUMANOS - DRH DIVISÃO DE TREINAMENTO E DESENVOLVIMENTO TDE DESENVOLVIMENTO DE PÁGINAS

Leia mais

Iniciando o Word 2010. Criar um novo documento. Salvando um Documento. Microsoft Office Word

Iniciando o Word 2010. Criar um novo documento. Salvando um Documento. Microsoft Office Word 1 Iniciando o Word 2010 O Word é um editor de texto que utilizado para criar, formatar e imprimir texto utilizado para criar, formatar e imprimir textos. Devido a grande quantidade de recursos disponíveis

Leia mais

Checklist para ações de email marketing

Checklist para ações de email marketing Checklist para ações de email marketing Publicado em: 15/01/2008 Planejamento Quais os objetivos da campanha (atrair mais visitantes ao site, aumentar as vendas de produtos, conquistar a fidelidade dos

Leia mais

XXIV SEMANA MATEMÁTICA

XXIV SEMANA MATEMÁTICA XXIV SEMANA ACADÊMICA DA MATEMÁTICA Minicurso: Produção de Páginas Web para Professores de Matemática Projeto de Extensão: Uma Articulação entre a Matemática e a Informática como Instrumento para a Cidadania

Leia mais

1. Como criar uma conta

1. Como criar uma conta Tutorial MediaWiki 1. Como criar uma conta Para criar uma conta clique no botão, disponível canto superior direito, "Entrar". Será então mostrada a página de entrada na conta onde terá de introduzir os

Leia mais

Produto IV: ATU SAAP. Manual de Referência

Produto IV: ATU SAAP. Manual de Referência Produto IV: ATU SAAP Manual de Referência Pablo Nogueira Oliveira Termo de Referência nº 129275 Contrato Número 2008/000988 Brasília, 30 de outubro de 2008 1 Sistema de Apoio à Ativideade Parlamentar SAAP

Leia mais

LABORATÓRIO DE INTERNET FRONTPAGE

LABORATÓRIO DE INTERNET FRONTPAGE I LABORATÓRIO DE INTERNET FRONTPAGE Prof. Antonio Geraldo da Rocha Vidal II SUMÁRIO Introdução...3 Construindo um Web Site...4 Iniciando...4 Administrando o Site...5 Navegação...5 Trabalhando com Páginas...6

Leia mais

Por que aprender a fazer tabelas? Tabelas auxiliam na formatação da página, e é por essa razão que eles foram acrescentados à linguagem html

Por que aprender a fazer tabelas? Tabelas auxiliam na formatação da página, e é por essa razão que eles foram acrescentados à linguagem html Por que aprender a fazer tabelas? Tabelas auxiliam na formatação da página, e é por essa razão que eles foram acrescentados à linguagem html Tabela de dados Tabelas para alinhar texto Tabelas para conter

Leia mais

Portal Contador Parceiro

Portal Contador Parceiro Portal Contador Parceiro Manual do Usuário Produzido por: Informática Educativa 1. Portal Contador Parceiro... 03 2. Acesso ao Portal... 04 3. Profissionais...11 4. Restrito...16 4.1 Perfil... 18 4.2 Artigos...

Leia mais

Introdução às Folhas de Estilo

Introdução às Folhas de Estilo Introdução às Folhas de Estilo Folhas de Estilo Cascading Style Sheets (CSS). Separa aparência e estrutura do documento. Permite maior controle sobre a apresentação das páginas Margens Tamanho / tipo de

Leia mais

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML

Leia mais

EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}

EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: Times New Roman, serif;} Fontes A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina

Leia mais

FAQ Perguntas Frequentes

FAQ Perguntas Frequentes FAQ Perguntas Frequentes 1. COMO ACESSO A PLATAFORMA DE ENSINO?... 2 2. NÃO CONSIGO REALIZAR O MEU CADASTRO NO AMBIENTE VIRTUAL DO MMA.... 4 3. FIZ MEU CADASTRO NO SITE E NÃO RECEBI O E-MAIL DE CONFIRMAÇÃO

Leia mais

MÓDULO - I Manual Prático Microsoft Excel 2007

MÓDULO - I Manual Prático Microsoft Excel 2007 MÓDULO - I Manual Prático Microsoft Excel 2007 MÓDULO - I APRESENTAÇÃO... 1 AMBIENTE DE TRABALHO... 2 A folha de cálculo... 2 O ambiente de trabalho do Excel... 3 Faixas de Opções do Excel... 4 - Guia

Leia mais

TECNOLOGIAS WEB AULA 8 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD

TECNOLOGIAS WEB AULA 8 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD TECNOLOGIAS WEB AULA 8 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Apresentar os principais problemas de acessibilidade na Internet. Apresentar as principais deficiências e as tecnologias de apoio.

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

Desenvolvedor Web Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável

Leia mais

Roteiro de Estudos e Atividades Avaliativas HTML

Roteiro de Estudos e Atividades Avaliativas HTML Roteiro de Estudos e Atividades Avaliativas HTML Faça essa atividade de forma individual ou em dupla, faça o máximo de questões que conseguir. Pesquise na Web o significado das tags e utilize-as para alcançar

Leia mais

Apostila CSS - Introdução à folha de estilos

Apostila CSS - Introdução à folha de estilos Apostila CSS - Introdução à folha de estilos Este documento é propriedade intelectual do Núcleo de Educação a distância da NRsystem e distribuído sob os seguintes termos: 1. As apostilas publicadas pelo

Leia mais

Curso de Capacitação em Gerenciador de Conteúdo PLONE

Curso de Capacitação em Gerenciador de Conteúdo PLONE Curso de Capacitação em Gerenciador de Conteúdo PLONE 1 Índice Menus Sobre a Navegação do Plone 3 Configurar Pastas 4 Visualização Padrão de Pastas 13 Conteúdo Dicas para um Conteúdo Claro 17 Ações de

Leia mais

Banco de Dados BrOffice Base

Banco de Dados BrOffice Base Banco de Dados BrOffice Base Autor: Alessandro da Silva Almeida Disponível em: www.apostilando.com 27/02/2011 CURSO TÉCNICO EM SERVIÇO PÚBLICO Apostila de Informática Aplicada - Unidade VI Índice Apresentação...

Leia mais

SUMÁRIO. Cursos STE SUMÁRIO... 1

SUMÁRIO. Cursos STE SUMÁRIO... 1 SUMÁRIO SUMÁRIO... 1 STEGEM - INTERFACE... 2 1 Introdução... 2 2 A interface... 2 2.1 Painel de Navegação... 3 2.2 Barra de Menus em forma de Ribbon... 4 2.3 Painel de Trabalho... 5 2.4 Barra de Status...

Leia mais

www.siteware.com.br Versão 2.6

www.siteware.com.br Versão 2.6 www.siteware.com.br Versão 2.6 Sumário Apresentação... 4 Login no PortalSIM... 4 Manutenção... 5 Unidades... 5 Unidades... 5 Grupos de CCQ... 5 Grupos de unidades... 6 Tipos de unidades... 6 Sistema de

Leia mais

Identidade Digital Padrão de Governo

Identidade Digital Padrão de Governo Identidade Digital Padrão de Governo Participantes do Projeto Presidência da República Secretaria de Comunicação SECOM Diretoria de Tecnologia DITEC Ministério do Planejamento Secretaria de Logística e

Leia mais

Monday, January 23, 12. Introdução sobre Acessibilidade na web

Monday, January 23, 12. Introdução sobre Acessibilidade na web Introdução sobre Acessibilidade na web Acessibilidade na web é o consumo da informação por qualquer pessoa por qualquer tipo de meio de acesso. Para que serve a web? A web serve para compartilhar informação.

Leia mais

Conteúdo Programático do Web Design

Conteúdo Programático do Web Design Conteúdo Programático do Web Design O Ambiente Macromedia Dreamweaver Instalação do Dreamweaver Arquivos Utilizados na Apostila A Inicialização de Dreamweaver Área de Trabalho Dreamweaver Criação de uma

Leia mais

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção

Leia mais

PROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS

PROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS PROGRAMAÇÃO MANUAL DE INSTRUÇÕES Instruções, métodos e recomendações para desenvolvimento de sistemas na UDS. 1 Sumário Apresentação... 3 Estrutura de pastas:...

Leia mais