Projeto de Webdesign. Portal Fiocruz Dezembro de centro de tecnologia de Informação e comunicação (ctic) Seção de Comunicação

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

Download "Projeto de Webdesign. Portal Fiocruz 2012. Dezembro de 2012. centro de tecnologia de Informação e comunicação (ctic) Seção de Comunicação"

Transcrição

1 Projeto de Webdesign Portal Fiocruz 2012 Dezembro de 2012 centro de tecnologia de Informação e comunicação (ctic) Seção de Comunicação

2 Design do Portal Fiocruz SUMÁRIO briefing 1. O briefing de design 1.1 Foco na prestação de serviços à população Flexibilização da estrutura do layout Tornar a navegação e a arquitetura da informação mais horizontais Como acomodar conteúdos com diferentes periodicidades...5 Diretrizes 2. Diretrizes de estrutura 2.1 Grades de diagramação Posicionamento das navegações Distribuição dos tipos de conteúdo pelas áreas das páginas Diretrizes de forma e estilo 3.1 Palheta de Cores Tipografia Iconografia Diretrizes de usabilidade 4.1 Áreas de varredura visual Atendendo o usuário profundo Convenções sobre navegação web...29 Recursos 5. Recursos de estrutura 5.1 Flexibilizando a área das notícias Criando banners mais versáteis Cardápio de templates para as páginas Navegação editorial: explicitando conteúdo institucional O uso flexível da página final Recursos de acessibilidade Recursos de navegação Referência...62 Redação e Capa: Aldo Moura Revisão: Juliana Krapp Diagramação: Luciana Baptista

3 Design do Portal Fiocruz ) O briefing de design Os três aspectos mais importantes na problematização do projeto de webdesign foram: 1.1) Foco na prestação de serviços à população Identificou-se a necessidade de destinar menos espaço para as notícias e mais para conteúdos institucionais dirigidos aos cidadãos. informações com características de serviços precisavam ser explicitadas e navegadas por meio de destaques, preferencialmente da forma mais visual possível. 1.2) Flexibilização da estrutura do layout No projeto anterior, havia um engessamento das possibilidades de apresentação visual das notícias. Eram permitidas apenas imagens pequenas com o formato quadrado de 126 x 126 px (Fig. 1). Fotos muito verticais ou muito horizontais precisavam ser editadas para o tamanho acima, o que gerava mais uma etapa de trabalho dos jornalistas. Além disso, a edição da imagem muitas vezes prejudicava a comunicação, pois o tamanho reduzido e o corte quadrado eliminavam partes importantes das fotos. Por último, as notícias em destaque precisavam obrigatoriamente ter uma imagem vinculada, não era possível somente de texto. 800px Menu Abas de conteúdos por perfil Segundo menu Figura 1: Home do portal antigo

4 Design do Portal Fiocruz Ainda com relação às notícias, entendeu-se que o uso de abas categorizadas por perfis para a navegação apresentava um problema: o conteúdo das abas inativas ficava escondido. As páginas internas (Fig. 2) do projeto anterior também foram identificadas como um ponto a ser melhorado, pois apresentavam o conteúdo de forma árida. Elas se constituíam basicamente de texto, já que o uso de imagens era bem restrito. Mesmo assim, quando usadas, as imagens não potencializavam a comunicação, pois no interior o uso era decorativo. Novos recursos como vídeos e galeria de fotos eram desejados. Figura 2: imagem interna do antigo portal O formato do portal, ainda com a largura de 800 px, encontrava-se desatualizado, pois, com a evolução das telas dos dispositivos, já era possível a ampliação para a largura de 1024 px. Com isso, seria possível expandir consideravelmente o espaço disponível, acomodando mais informações.

5 Design do Portal Fiocruz Na página inicial, identificou-se que os links destacados na parte laranja (fig. 1) competiam com a navegação global, devido a sua forma e ao estilo semelhantes. Por fim, para se inserir um banner no portal anterior, era necessário fazê-lo via FTP, subindo em arquivos SWF (Flash) ou uma imagem. 1.3) Tornar a navegação e a arquitetura de informação mais horizontais Com relação à navegação global, entendeu-se que era necessário economizar itens e espaço. Um menu com menos opções facilitaria para o usuário percorrê-lo com o olhar e memorizá-lo com o uso. Enxugando-se esse menu, seria possível liberar a área vertical ocupada por outros conteúdos. Para a arquitetura de informação, a maior horizontalidade reduziria a profundidade da navegação, reduzindo a quantidade de cliques até os conteúdos finais. 1.4) Como acomodar conteúdos com diferentes periodicidades Uma das limitações do projeto anterior era que não existiam soluções de estrutura/layout para acomodar conteúdos com diferentes tipos de periodicidade, principalmente na página inicial. Por exemplo, algumas informações sobre os concursos realizados para a Fiocruz demandavam uma área disponível por meses na página inicial. O projeto anterior resolvia essa questão através de uma notícia, de um banner ou de um selo. Cada uma dessas alternativas apresentava desvantagens para a demanda em questão. Se mantivéssemos esse conteúdo como notícia, ocuparíamos desnecessariamente o espaço que poderia ser usado para outra matéria. Além disso havia a questão da atualização constante. Como banner, o destaque visual era enorme e nem sempre adequado à ocasião. A solução de selo era a mais adotada, porém, a inserção dinâmica do conteúdo ficava prejudicada, pois dependia do tratamento de uma imagem pelos designers. Além disso, como o selo era constituído de uma imagem, as informações escritas, além de curtas, obrigatoriamente eram aplicadas no formato de imagem. 2) Diretrizes de estrutura 2.1) Grades de diagramação Optou-se por um grid base de cinco colunas (Fig. 3) com espaços internos regulares para arejamento da página. As colunas orientam, principalmente,

6 Design do Portal Fiocruz a ocupação da área intermediária do layout (fundo branco) destinada ao conteúdo específico da página. A maioria dos elementos visuais do cabeçalho e do rodapé também se apoiam no grid, embora alguns elementos da interface, pertencentes a essas áreas, tenham sido posicionados de forma mais flexível. 940 px 18 px 176 px 170 px Figura 3: Grid geral

7 Design do Portal Fiocruz Na página inicial, a ocupação foi planejada (Fig. 4) da seguinte forma: 2/5 do espaço (duas colunas) foram destinados ao conteúdo notícias e 3/5 do espaço (três colunas) foram destinados ao conteúdo chamado de navegação editorial. As páginas secundárias (nível 2), correspondentes ao segundo nível na arquitetura da informação, também seguem essa distribuição. Figura 4: Exemplo de distribuição dos volumes na página principal e nas secundárias

8 Design do Portal Fiocruz Nas páginas finais da arquitetura (Fig. 5), a ocupação do conteúdo específico da página atinge a largura de quatro colunas (4/5). A coluna que resta (1/5) é destinada a links que sugerem navegações adicionais. Figura 5: Página final

9 Design do Portal Fiocruz O projeto tem algumas exceções, por exemplo a página visite a Fiocruz (Fig. 6) que combina o grid anterior com um novo de três colunas. No caso da página Unidades e escritórios (Fig. 7), optou-se por um grid da área de conteúdo com quadro colunas, para melhor acomodar as informações e fotos das unidades. 800px 800px Figura 6: Página visite a Fiocruz

10 Design do Portal Fiocruz Figura 7: Página Unidades e escritórios

11 Design do Portal Fiocruz ) Posicionamento das navegações Adotou-se um esquema de navegação que abrange quase todo o projeto. Há apenas uma exceção de navegação local, nas páginas das Vice-presidências. a) no projeto, em geral (Fig. 8): Navegação global; abas horizontais presentes em todas as páginas sempre no cabeçalho. 2. Navegação local; menu vertical localizado sempre na esquerda abaixo do título da página: presente nas páginas de nível 2 e páginas intermediárias.

12 Design do Portal Fiocruz Navegação por tarefa: sempre presente no lado direito do cabeçalho. 4. Navegação editorial: feita através de módulos na área direita, abaixo do cabeçalho escolhidas pelos gestores de conteúdo. 5. Fiocruz de A a Z: até 40 palavras/expressões, sempre presentes no rodapé, escolhidas pelos gestores de conteúdo. 6. Índice alfabético: link sempre presente no rodapé. 7. Área reservada (Fig. 9) para sugerir links contextuais que direcionam o visitante para outros sítios da Fiocruz. 8. Área reservada para sugerir links contextuais para outros sítios fora da Fiocruz. 9. Navegação contextual dentro do texto. 10. Navegação contextual dentro do Portal Fiocruz.

13 Design do Portal Fiocruz Figura 9: Navegações detalhadas em uma página finalística

14 Design do Portal Fiocruz b) Caso específico: Navegação local nas página das Vice-presidências (Fig. 10) e assessorias, através de abas posicionadas abaixo do título da página e da foto principal; Figura 10: Página das Vice-presidências 2.3) Distribuição dos tipos de conteúdo pelas áreas das páginas Como diretriz para a localização dos conteúdos adotou-se o esquema a seguir. Os textos e imagens (notícias ou conteúdos institucionais), que pertencem a uma página qualquer, foram posicionados nas colunas mais da esquerda do grid (Fig 11), seguindo o sentido da leitura ocidental (esquerda para direita). As navegações editoriais e sugestões de navegação para o próprio portal foram posicionadas nas colunas da direita.

15 Design do Portal Fiocruz Notícias ou conteúdo institucionais Navegação editorial Figura 11: Página inicial com conteúdos Como dito anteriormente, a página inicial começa com a distribuição de duas colunas dedicadas às notícias e três colunas para destaques (Fig. 12) (navegação editorial). Entretanto, na medida que o usuário aprofundase nos níveis da arquitetura, a área da esquerda aumenta e a da direita diminui, até chegar à página final da arquitetura. Nela, a distribuição é a seguinte: quatro colunas para o conteúdo da página e uma para sugestões de navegação no portal.

16 Design do Portal Fiocruz Figura 12: A página final com conteúdos 3) Diretrizes de forma e estilo 3.1) Palheta de Cores A cor laranja foi adotada como principal no projeto. Ela era usada no projeto anterior como cor predominante, e entendeu-se que a continuidade era importante para fortalecer a identidade visual da instituição. A opção remete à cor dos tijolos do Castelo Fiocruz, imagem simbólica da Fundação. Para renovar o uso da marca Fiocruz, optou-se pela aplicação negativa (traços brancos sobre fundo laranja). A distribuição da cor laranja no cabeçalho no rodapé buscou oferecer para o usuário áreas de varredura visual bastante distintas. Assim, na medida em que o internauta percorre a interface, também compreende como ela foi organizada.

17 Design do Portal Fiocruz Figura 13: Palheta de cores Um código de cinco cores foi adotado para explicitar as cinco grandes áreas que compõem a arquitetura da informação do Portal: Página inicial: laranja claro (#FFE9C2) A Fundação: amarelo para o fundo (#FFF5D9) Pesquisa e Ensino: roxo para o fundo (#E1DAFB) Produção e inovação: vinho para o fundo (#FAD7FF) Serviços em Saúde: verde para o fundo (#E1F0ED) Comunicação e informação: vermelho para o fundo (#FFE0E1) A aplicação desse código no projeto foi feita seguindo o critério descrito a seguir. Na página inicial (Fig. 14), partiu-se do raciocínio de cores derivadas do laranja. Aplicou-se uma cor marrom escuro para os textos com a função de link. Em algumas regiões, inseriu-se um fundo com uma cor mais clara derivada do laranja para destacar textos e imagens. Como exemplo, tem-se a área de navegação editorial situada à direita.

18 Design do Portal Fiocruz Figura 14: Links na página inicial O tratamento de cores acima também foi aplicado nas páginas Fale Conosco (Fig. 15), Ouvidoria (Fig. 16), Acessibilidade, Expediente e Índice Alfabético. O entendimento do projeto é que essas páginas podem ser tratadas como a página inicial, já que guardam uma relação geral com a Fiocruz. Ou seja, não pertencem a nenhuma das cinco grandes áreas temáticas exibidas na navegação global.

19 Design do Portal Fiocruz Figura 15 : Links na página Fale Conosco Figura 16 : Links na página Ouvidoria

20 Design do Portal Fiocruz Para cada página secundária (nível 2), uma cor do código foi escolhida. Essa cor foi aplicada na sua intensidade máxima no título da página, no menu da navegação local e nos títulos de destaques (links). Seguindo o mesmo princípio da página inicial, no fundo das áreas de destaque foram aplicadas cores mais suaves, derivadas da cor mais intensa do código.como diretriz, cada página que pertença a uma das grandes cinco áreas herdará o tratamento de cor aplicado na respectiva página secundária que lhe antecede na hierarquia. Padronização de cor para os links de texto Os links sempre devem ser coloridos. Na página inicial, eles recebem a cor marrom (#4f2000) e são aplicados sobre o fundo branco (Fig. 17). No restante do portal os links são coloridos seguindo o código de cores descrito acima, por área. Como cor de mouse over optou-se pelo azul em todo o projeto. Figura 17: Exemplo de aplicação do link

21 Design do Portal Fiocruz Cor nos textos Apesar de não ser um link, o título das páginas exigia destaque. Por isso, foi usada a cor principal da palheta aplicada a cada grande área tematica.nos subtítulos e massa do texto, (Fig. 18) foi usada a cor cinza para diferenciálos dos links coloridos. 3.2) Tipografia Figura 18: Esquema das cinco cores + laranja O projeto adotou como tipografia-base a fonte Trebuchet MS (Fig. 19). Os critérios foram a boa legibilidade e a pouca variação visual na exibição em diferentes sistemas operacionais (Windows, Mac e Linux). Figura 19: Tipografia

22 Design do Portal Fiocruz Padronização dos textos nas artes PSD (Adobe Photoshop) Título de notícia na página principal (marrom #4f2000) Fonte: Trebuchet Bold Corpo: 18pt Entrelinha: 20pt Av: 10 Texto de notícia na página inicial (cinza) Fonte: Trebuchet Regular Corpo: 13pt Entrelinha: 19pt Av: 10 Texto de notícia simples (sem foto) Fonte: Trebuchet Bold Corpo: 14pt Entrelinha: 16pt Av: 10 Massa de texto em destaque na página secundária Fonte: Trebuchet Regular Corpo: 15pt Entrelinha: 21pt Av: 10

23 Design do Portal Fiocruz Título do módulo Fonte: Trebuchet Bold Corpo: 17pt Entrelinha: 17pt Av: 30 Massa de texto dentro do módulo Fonte: Trebuchet Regular Corpo: 12pt Entrelinha: 15pt Av: 10 Link dentro do módulo Fonte: Trebuchet Regular Corpo: 13pt Entrelinha: 17pt Av: 10 Sugestão de navegação Fonte: Trebuchet Bold Corpo: 13pt Entrelinha: 15pt Av: 10 Links de funcionalidades Fonte: Trebuchet Regular Corpo: 13pt Av: 10 Espaço entre notícias: 30px Espaço entre notícias simples listadas só com texto: 20px Espaço entre blocos: 18px

24 Design do Portal Fiocruz ) Iconografia Ícones principais: Para conferir unidade visual, foi desenvolvida uma família principal de ícones, seguindo o estilo abaixo: Figura 20: Ícones Para destacar alguns links especiais de outros links comuns, adotou-se o tratamento visual de ícones em algumas situações. Os casos definidos até o presente momento foram: Fale Conosco, redes sociais e as funcionalidades que ocorrem no final da página de notícias e nas páginas do último nível hierárquico. Ícones auxiliares: Uma solução auxiliar foi aplicada nos ícones de links que enviam para fora dos sítios da Fundação ou para outros sítios da web. Em situações pontuais foram adotados botões: na busca e no link download de arquivos. Figura 21: Ícones para links

25 Design do Portal Fiocruz ) Diretrizes de usabilidade 4.1) Áreas de varredura visual Adotou-se a divisão da página em áreas claramente definidas, pois, segundo Krug (2011), isso permite aos usuários decidirem visualmente a quais áreas da página devem dar atenção e quais podem ser ignoradas sem perdas. Diversos estudos iniciais sobre exames visuais de páginas web sugerem que os usuários decidem muito rapidamente em quais partes da página provavelmente encontrarão informações úteis, e então quase não olham mais as outras partes. A interface possui três áreas principais de varredura visual. De cima para baixo, a primeira corresponde ao cabeçalho. A segunda possui fundo predominantemente branco para receber o conteúdo específico da página. Por fim, o rodapé encerra o layout. O uso da cor laranja no cabeçalho e no rodapé visou, entre outras coisas, a indicar claramente o início e o fim da página para facilitar o processo da rolagem. 1 área Cabeçalho 2 área Conteúdo 3 área Rodapé Figura 22: Página inicial com as três áreas

26 Design do Portal Fiocruz A área do conteúdo pode ser dividida em duas grandes subáreas: uma à esquerda e outra à direita. Na primeira, temos o conteúdo específico da página e a navegação local. Este conteúdo é composto de textos introdutórios, apresentação de serviços e áreas, fotos ilustrativas etc. Sub área 2 Sub área 1 Figura 23: Sub home Na direita, temos uma área de sugestões de navegação relacionadas com o contexto da página em questão. Estas sugestões permitem ao usuário aprofundar-se na arquitetura ou explorar novas áreas do portal.

27 Design do Portal Fiocruz Figura 24: intermediária Seguindo o grid proposto, na página inicial e nas secundárias (nível 2 da arquitetura) a distribuição do espaço segue a seguinte relação: duas colunas para a área da esquerda e três para a da direita. Nos níveis intermediários da arquitetura, cada vez mais espaço é destinado à área da esquerda e menos para a direita. Quando o usuário atinge o último nível de navegação hierárquica, a relação termina da seguinte forma: quatro colunas destinadas ao conteúdo e uma a navegação. Figura 25: Página final de conteúdo

28 Design do Portal Fiocruz ) Atendendo o usuário profundo A nova interface busca receber melhor os usuários que chegam direto nas páginas profundas da arquitetura da informação, oriundos de mecanismos de busca ou de links de outros sítios. Seguindo os conceitos de deep-link users, proposto por Nielsen (2006), e o teste do porta-malas, proposto por Krug (2011), foram criados mecanismos para rapidamente localizar o usuário no contexto do sítio. Em um segundo momento, o objetivo é orientá-lo quanto às possibilidades gerais de navegação a partir daquela página. Como exemplos temos: o retorno para os níveis menos profundos da arquitetura; sugestões de outras áreas cujos temas são relacionados ao conteúdo da página que primeiro recebeu o usuário. Para isso, o layout da página final foi cuidadosamente planejado combinando as principais convenções de navegação com os elementos abaixo: sinalização na aba (navegação global) com código de cor para localizar a grande área da arquitetura; uso da migalha de pão para complementar a localização específica do usuário, através da organização hierárquica do portal; título bem destacado, localizado como primeiro elemento à esquerda.

29 Design do Portal Fiocruz Figura 26: Exemplo de página final com foco na localização 4.3) Convenções sobre navegação web Na solução adotada, seguimos a proposta de navegação estável em todas as páginas, de acordo com as convenções de navegação propostas por Krug (2008) em seu livro Não me faça pensar:

30 Design do Portal Fiocruz id (marca) do site. 2. seções (principais áreas do portal = navegação global). 2.a. link para página inicial 2.b. uso de abas com código de cores 3. utilitários (links para elementos importantes do site que não fazem parte realmente da hierarquia de conteúdo). 4. nome da página. 5. navegação local. 6. migalhas de pão a b Figura 27: Com a identificação de cada elemento da navegação Considerando a variedade de perfis de usuários que o Portal Fiocruz atende, apostamos em um layout de página intensamente apoiado nessas convenções de navegação mais consolidadas na web.

31 Design do Portal Fiocruz ) Recursos de estrutura 5.1) Flexibilizando a área das notícias No atual projeto, é possível aplicar títulos nas notícias que ocupem uma ou duas linhas, considerando a largura da coluna disponível. As fotos também podem apresentar formatos variados. Pode-se, por exemplo, inserir fotos muito horizontais (Fig.28), que ocupem toda a coluna da esquerda (342 x 120 px) existente na página inicial ou na página secundária. Quando é aplicada uma foto horizontal que ocupe toda a largura disponível, o posicionamento do texto automaticamente adapta-se para a parte inferior da imagem. Figura 28: Notícia com destaque horizontal No caso de fotos verticais (Fig. 29), deve-se usar o seguinte formato: 125 x 140 px. O texto se acomodará no espaço resultante da coluna à direita. Na página interna da notícia, o formato da foto é balizado pela largura: 533 px de largura. A altura é flexível, mas o valor sugerido é de cerca de 300 px para facilitar telas de dispositivos menores. A quantidade de notícias com imagens (posicionadas na parte superior da página) pode variar. Existe apenas a recomendação geral de não extrapolar cinco módulos simples de altura (navegação editorial) para evitar rolagens muito longas.

32 Design do Portal Fiocruz Figura 29: Notícia com destaque vertical A área de noticias oferece vários tipos de recursos, que podem ser usados ao mesmo tempo ou por meio de combinações. São eles: Foto no topo da matéria; links no portal; links na Fiocruz; links na web; vídeo; galeria de imagens; olho na matéria; lista e foto dentro da matéria.

33 Design do Portal Fiocruz Exemplos de formatação de notícias: Figura 30: Página de notícia simples

34 Design do Portal Fiocruz Figura 31: Na imagem acima, os recursos que se encontram ativos são: foto de topo, links no Portal e links na Fiocruz

35 Design do Portal Fiocruz Figura 32: Na imagem acima, os recursos que se encontram ativos são: vídeo, galeria de imagens, links no Portal, links na Fiocruz e links na web

36 Design do Portal Fiocruz Figura 33: Na imagem acima, os recursos que se encontram ativos são: foto de topo, olho da matéria e links na Fiocruz

37 Design do Portal Fiocruz ) Criando banners mais versáteis Para exibir informações de grande destaque e geralmente mais sazonais, foi criado um sistema de carrossel de banners na página inicial e nas páginas secundárias (nível 2 da arquitetura). Com relação ao banner, o gerenciador de conteúdo Drupal, CMS do portal neste projeto, oferece ao editor as possibilidades de: a) inserir uma imagem (JPG ou PNG) por banner previamente produzida pelos designers; b) administrar a exibição de até três banners diferentes; c) ordenar a exibição dos banners; d) inserir, em cada banner, um texto principal com corpo de fonte maior (link) e outro complementar, com tamanho menor. Obs1: as imagens dos banners seguem o tamanho padronizado de 365 x 136px. Obs2: toda a extensão das imagens é clicável, porém existe uma exceção: quando são inseridos links na área acima da faixa. Recomenda-se a criação de banners com fundos mais leves, de preferência não preenchendo a área total com cores fortes. O objetivo é se distanciar visualmente das propagandas existentes na internet. O texto na barra será aplicado na cor branca, portanto é necessário usar uma cor escura de fundo na barra, que apresente suficiente contraste. Figura 34: Com esquema do banner

38 Design do Portal Fiocruz ) Cardápio de layout O Drupal, atual gerenciador de conteúdo do Portal Fiocruz, trabalha com o conceito de templates. Um template é uma definição geral de estrutura que organiza os vários elementos de páginas visualmente similares. Essa estrutura constitui-se de áreas pré-definidas (grade) pelas quais o Drupal acomoda os vários elementos da página. A partir de quatro ou cinco templates foram criados: 1) Página inicial

39 Design do Portal Fiocruz ) Página secundária

40 Design do Portal Fiocruz ) Páginas de nível 3 e 4

41 Design do Portal Fiocruz ) Página nível 5: Notícias

42 Design do Portal Fiocruz ) Unidades e escritórios

43 Design do Portal Fiocruz ) Atendimento à população

44 Design do Portal Fiocruz ) Visite a Fiocruz

45 Design do Portal Fiocruz ) Fale Conosco

46 Design do Portal Fiocruz ) Presidência

47 Design do Portal Fiocruz ) Acesso à informação

48 Design do Portal Fiocruz ) Vice-presidências

49 Design do Portal Fiocruz ) Navegação editorial: explicitando conteúdo institucional Os módulos da navegação editorial estão presentes na página inicial, nas páginas secundárias e na maioria das páginas intermediárias da arquitetura da informação. Na página final de conteúdo, eles dão lugar à possibilidade de navegação contextualizada no Portal Fiocruz. Os módulos foram criados usando tamanhos diferentes para permitir várias ocupações da área direta das páginas. Tipos diferentes de ocupação interna de cada módulo são possíveis: fotos com e sem legenda, títulos com duas uma e duas linhas, módulos com listagem de links e etc. A seguir, um cardápio com as diversas combinações possíveis.

50 Design do Portal Fiocruz Cardápio de navegação editorial:

51 Design do Portal Fiocruz

52 Design do Portal Fiocruz

53 Design do Portal Fiocruz

54 Design do Portal Fiocruz

55 Design do Portal Fiocruz

56 Design do Portal Fiocruz ) O uso flexível da página final A estrutura das páginas de conteúdo final (notícias, serviços etc) foi construída para comportar os seguintes recursos: foto ou vídeo principal, massa de texto, galeria de fotos, olho para a matéria, navegação contextualizada e funcionalidades (Facebook, Twitter, imprimir e enviar para um amigo). Esses recursos podem ser administrados pelo gestor de conteúdo. A versão mais simples caracteriza-se por apenas uma área de texto. Sobre essa base podemos acrescentar foto / vídeo, galeria etc. Abaixo, seguem exemplos possíveis de combinação dos recursos. Figura 35: Caso mais simples da página final

57 Design do Portal Fiocruz Figura 36: Caso completo da página final

58 Design do Portal Fiocruz Figura 37: Caso sem galeria de imagens na página final

59 Design do Portal Fiocruz ) Recursos de acessibilidade Além de um link no cabeçalho para uma página exclusiva sobre acessibilidade, os seguintes recursos foram considerados no projeto do Portal Fiocruz: Figura 38: Área e página reservada para Acessibilidade Navegação pelo teclado (foco no deficiente motor e visual) a partir de qualquer página. Usando as teclas Tab e depois Enter, o usuário acessa o atalho Pular para o conteúdo principal. Repetindo a ação, ele acessa o atalho Pular para o menu principal. Figura 39: Navegação pelo teclado utilizando a tecla Tab

60 Design do Portal Fiocruz visualização em alto contraste (foco em pessoas com severas limitações visuais). No canto superior direito da interface, está disponível o link para essa visualização. Ampliação ou redução do tamanho das letras (foco em pessoas com baixas limitações visuais) No canto superior direito da interface, estão disponíveis os links: diminuir fonte do texto; tamanho original da fonte do texto; aumentar fonte do texto. Figura 40: visualização em alto contraste Teclas de atalho (todos): Algumas teclas de atalho foram implementadas para facilitar a navegação. A lista de atalhos encontra-se no link: content/acessibilidade 7) Recursos de Navegação Além da navegação hierárquica e da possibilidade de executar uma busca através de filtros, o projeto contempla outras lógicas de navegação. A primeira é orientada por tarefas, e consiste no item Do que você precisa?. Neste local, são reunidos cerca de 15 das principais tarefas que os usuários procuram no portal. A proposta é que o Fale Conosco indique e monitore os links inseridos neste campo. Figura 41: Navegação por tarefas

61 Design do Portal Fiocruz Uma navegação alfabeticamente organizada também foi implementada no rodapé, o Fiocruz de A a Z. A proposta é destacar cerca de 40 palavras/ expressões que, embora relevantes do ponto de vista dos usuários, nem sempre conseguem ser aplicadas nos rótulos da navegação global ou local. Essa navegação é ampliada pelo Índice alfabético, que oferece uma lista maior de termos. Figura 42: Fiocruz de A a Z

62 Design do Portal Fiocruz ) Referências KRUG, Steve. Não Me Faça Pensar. Rio de Janeiro: Alta Books, NIELSEN, Jakob; LORANGER, Hoa. Prioritizing Web Usability. Berkeley: New Riders, NIELSEN, Jakob; TAHIR, Marie. Homepage: usabilidade. Rio de Janeiro: New Riders, kuniavsky, mike. Observing the User Experience: A Practitioner s Guide to User Research, Saint Louis: Morgan Kaufmann, Sites na internet: Web Content Accessibility Guidelines (WCAG) Overview:

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

Tema UFPel 2.0 WP Institucional Guia de Opções de Personalização

Tema UFPel 2.0 WP Institucional Guia de Opções de Personalização Tema UFPel 2.0 WP Institucional Guia de Opções de Personalização Sumário 1. Configurações Iniciais...2 1.1. Configurando o Menu Personalizado...2 1.2. Configurando os Widgets...3 2. Localize o nome de

Leia mais

ÍNDICE MANUAL SITE ADMINISTRÁVEL TV. 1. Introdução 2. Acessando o site administrável/webtv SITE ADMINISTRÁVEL 3. CONFIGURAÇÕES

ÍNDICE MANUAL SITE ADMINISTRÁVEL TV. 1. Introdução 2. Acessando o site administrável/webtv SITE ADMINISTRÁVEL 3. CONFIGURAÇÕES MANUAL SITE ADMINISTRÁVEL TV ÍNDICE 1. Introdução 2. Acessando o site administrável/webtv SITE ADMINISTRÁVEL 3. CONFIGURAÇÕES 3.1 - Dados Cadastrais 3.2 - Noticias 3.3 Redes Sociais 3.4 - Player 4. DESIGN

Leia mais

IPAHN Novo Portal 4 ª Revisão e Análise do CMS e Novo Portal Dezembro 2014

IPAHN Novo Portal 4 ª Revisão e Análise do CMS e Novo Portal Dezembro 2014 IPAHN Novo Portal 4 ª Revisão e Análise do CMS e Novo Portal Dezembro 2014 Relação de itens verificados e propostas de alteração que consideramos fundamental para a continuidade dos trabalhos de transição

Leia mais

Tutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT.

Tutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT. Tutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT. PÁGINA: 2 de 21 Nenhuma parte deste documento pode ser utilizado ou reproduzido, em qualquer meio

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

Manual do Painel Administrativo

Manual do Painel Administrativo Manual do Painel Administrativo versão 1.0 Autores César A Miggiolaro Marcos J Lazarin Índice Índice... 2 Figuras... 3 Inicio... 5 Funcionalidades... 7 Analytics... 9 Cidades... 9 Conteúdo... 10 Referência...

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

Portal Institucional do IFPB

Portal Institucional do IFPB Capacitação para utilização do Portal Institucional do IFPB Introdução O objetivo dessa treinamento é apresentar o site do IFPB, e capacitar os novos usuários para utilizar suas principais ferramentas

Leia mais

SGCD 2.2. Sistema Gerenciador de Conteúdo Dinâmico

SGCD 2.2. Sistema Gerenciador de Conteúdo Dinâmico Atualizado em 13/AGO/2012 Sistema Gerenciador de Conteúdo Dinâmico No final de 2007, o Serviço Técnico de Informática da UNESP Marília, disponibilizou para a comunidade acadêmica e administrativa o Sistema

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

Sistema de Gerenciamento Missionário SENAMI. Secretaria Nacional de Missões

Sistema de Gerenciamento Missionário SENAMI. Secretaria Nacional de Missões Sistema de Gerenciamento Missionário SENAMI Secretaria Nacional de Missões Manual do Usuário Apresentamos a seguir um guia básico contendo informações gerais para utilização do Sistema de Gerenciamento

Leia mais

Manual do usuário (v 1.2.0) E-commerce

Manual do usuário (v 1.2.0) E-commerce Manual do usuário (v 1.2.0) E-commerce Sumário Acessando o sistema gerencial... 1 Enviando logomarca, banners e destaques... 1 Logomarca... 1 Destaques... 2 Banners... 3 Cadastrando produtos... 4 Embalagem...

Leia mais

SGCD 2.0 Sistema Gerenciador de Conteúdo Dinâmico

SGCD 2.0 Sistema Gerenciador de Conteúdo Dinâmico Sistema Gerenciador de Conteúdo Dinâmico Atualizado em 24/08/2011 No final de 2007, o Serviço Técnico de Informática da UNESP Marília, disponibilizou para a comunidade acadêmica e administrativa o Sistema

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

Guia de Início Rápido

Guia de Início Rápido Guia de Início Rápido O Microsoft Word 2013 parece diferente das versões anteriores, por isso criamos este guia para ajudar você a minimizar a curva de aprendizado. Barra de Ferramentas de Acesso Rápido

Leia mais

3 - Tela Principal. Itens importantes da página

3 - Tela Principal. Itens importantes da página SUMÁRIO 1 1 - Conceitos Gerais O CRQ é um sistema de controle de qualidade utilizado na etapa de recrutamento de estudos de natureza qualitativa. Ele é um banco de dados que tem como principal objetivo

Leia mais

ÍNDICE. Sobre o SabeTelemarketing 03. Contato. Ícones comuns à várias telas de gerenciamento. Verificar registros 09. Tela de relatórios 09

ÍNDICE. Sobre o SabeTelemarketing 03. Contato. Ícones comuns à várias telas de gerenciamento. Verificar registros 09. Tela de relatórios 09 ÍNDICE Sobre o SabeTelemarketing 03 Ícones comuns à várias telas de gerenciamento Contato Verificar registros 09 Telas de cadastro e consultas 03 Menu Atalho Nova pessoa Incluir um novo cliente 06 Novo

Leia mais

[SITE FÁCIL CDL MANUAL DO USUÁRIO]

[SITE FÁCIL CDL MANUAL DO USUÁRIO] Câmara de Dirigentes Lojistas [SITE FÁCIL CDL MANUAL DO USUÁRIO] Sumário 1. Controle de versão... 3 2. Objetivo... 4 3. Site fácil... 4 4. Acessando o sistema de gestão de conteúdo (SGC)... 5 5. Páginas

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

iconnect 3.3 Atualizações Pesquisa Dinâmica

iconnect 3.3 Atualizações Pesquisa Dinâmica iconnect 3.3 Atualizações Pesquisa Dinâmica Conteúdo iconnect 3.3 Atualizações Pesquisa Dinâmica... 3 1. Feedback do Cliente...3 1.1 Feedback do Cliente no Email da Pesquisa Dinâmica... 3 1.2 Página de

Leia mais

PORTAL MODELO. APOSTILA DE ATUALIZAÇÃO CONSELHOS REGIONAIS - CRAs. PASSO A PASSO PARA ATUALIZAÇÕES Conselhos Regionais de Administração

PORTAL MODELO. APOSTILA DE ATUALIZAÇÃO CONSELHOS REGIONAIS - CRAs. PASSO A PASSO PARA ATUALIZAÇÕES Conselhos Regionais de Administração PORTAL MODELO APOSTILA DE ATUALIZAÇÃO CONSELHOS REGIONAIS - CRAs 2015 PASSO A PASSO PARA ATUALIZAÇÕES Conselhos Regionais de Administração projeto portal modelo SUMÁRIO Apresentação Áreas da home 1 Login

Leia mais

SISTEMA PARA PORTAL DE NOTÍCIAS: Jornais, Revistas, Televisão etc

SISTEMA PARA PORTAL DE NOTÍCIAS: Jornais, Revistas, Televisão etc SISTEMA PARA PORTAL DE NOTÍCIAS: Jornais, Revistas, Televisão etc Técnica SEO: Search engine Optimization "INDEXADOR" Web Software para Grandes Portais (Gera todo o conteúdo SEO - Otimizado nas buscas)

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 Estrutura Viewlets 21 Portlets 26 2 Estrutura Intermediário Depois de conhecer a estrutura principal do Plone e realizar as configurações

Leia mais

Manual do Usuário. Manual do Usuário - Versão 1.0. 1

Manual do Usuário. Manual do Usuário - Versão 1.0. 1 Manual do Usuário Manual do Usuário - Versão 1.0. 1 Índice 1. Visão Geral... 3 2. Acessar o sistema... 3 3. Módulo Inicial... 6 3.1. Cabeçalho do sistema... 6 3.2. Fale Conosco... 6 3.3. Meu Cadastro...

Leia mais

Tutorial USERADM. Inserindo conteúdos no site

Tutorial USERADM. Inserindo conteúdos no site Tutorial USERADM Inserindo conteúdos no site Como acessar o Administrador de Conteúdos do site? 1. Primeiramente acesse o site de sua instituição, como exemplo vamos utilizar o site da Prefeitura de Aliança-TO,

Leia mais

Conteúdo. 1 - Procedimentos de Acesso... 3. 2 - Gerenciamento de usuários do sistema e perfis de acesso... 4. 3 - Cadastro de áreas do sítio...

Conteúdo. 1 - Procedimentos de Acesso... 3. 2 - Gerenciamento de usuários do sistema e perfis de acesso... 4. 3 - Cadastro de áreas do sítio... Conteúdo 1 - Procedimentos de Acesso.... 3 2 - Gerenciamento de usuários do sistema e perfis de acesso... 4 3 - Cadastro de áreas do sítio.... 8 3.1 - Conteúdo simples com anexo... 9 3.2 - Página estática...

Leia mais

MICROSOFT WORD 2007. George Gomes Cabral

MICROSOFT WORD 2007. George Gomes Cabral MICROSOFT WORD 2007 George Gomes Cabral AMBIENTE DE TRABALHO 1. Barra de título 2. Aba (agrupa as antigas barras de menus e barra de ferramentas) 3. Botão do Office 4. Botão salvar 5. Botão de acesso à

Leia mais

Portal da Prefeitura de São Paulo SECOM. MANUAL DO WARAM v. 1.5 Secretarias

Portal da Prefeitura de São Paulo SECOM. MANUAL DO WARAM v. 1.5 Secretarias SECOM MANUAL DO WARAM v. 1.5 Secretarias WARAM 1.5 Ferramenta de atualização do Portal da Prefeitura de São Paulo. Use preferencialmente o navegador Internet Explorer superior ou igual a 7.0. No campo

Leia mais

GERENCIAMENTO DO CONTEÚDO INFORMATIVO Utilizando O Sistema Web Contábil IDEAL. Atendimento: Tel : (11) 3857-9007 - e-mail: suporte@webcontabil.

GERENCIAMENTO DO CONTEÚDO INFORMATIVO Utilizando O Sistema Web Contábil IDEAL. Atendimento: Tel : (11) 3857-9007 - e-mail: suporte@webcontabil. GERENCIAMENTO DO CONTEÚDO INFORMATIVO Utilizando O Sistema Web Contábil 2010 IDEAL Última Atualização: 01/2010 Atendimento: Tel : (11) 3857-9007 - e-mail: suporte@webcontabil.com Módulo Calendário.:. Aba

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 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

Manual do Portal OMIR BRASIL

Manual do Portal OMIR BRASIL 2013 Manual do Portal OMIR BRASIL Juliano Frederico Fusco Geração i9 A Web Do Seu Jeito!!! 25/03/2013 1 Sumário Observação:... 2 1. Cadastro de sócios no Portal:... 2 2. Cadastro de Sócios no Clube:...

Leia mais

Proposta Revista MARES DE MINAS

Proposta Revista MARES DE MINAS SATIS 2011 Proposta Revista MARES DE MINAS 21/03/2011 A SATIS Índice 1 A Satis 1 A Proposta 1 Serviços 2 Mapa do Site 2 SEO 3 Sistema de gerenciamento de conteudo 4 Cronograma e Prazos 5 Investimento 6

Leia mais

Capítulo 7 O Gerenciador de Arquivos

Capítulo 7 O Gerenciador de Arquivos Capítulo 7 O Gerenciador de Arquivos Neste capítulo nós iremos examinar as características da interface do gerenciador de arquivos Konqueror. Através dele realizaremos as principais operações com arquivos

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

MANUAL DE INSTRUÇÕES SISTEMA OPERACIONAL MÉTODO QUANTUM 2014

MANUAL DE INSTRUÇÕES SISTEMA OPERACIONAL MÉTODO QUANTUM 2014 MANUAL DE INSTRUÇÕES SISTEMA OPERACIONAL MÉTODO QUANTUM 2014 ÍNDICE Apresentação Principais Botões Login Usúario Resultado Método Quantum Preencher Método Quantum Extrato On-Line Engenharia de Função Grupos

Leia mais

ALUNES MANUAL DO USUÁRIO. Guia rápido Alunes

ALUNES MANUAL DO USUÁRIO. Guia rápido Alunes ALUNES MANUAL DO USUÁRIO Guia rápido Alunes 1 Manual de Instruções Versão 2.0 Alunes Informática 2 Sumário Introdução... 5 Pré-requisitos... 5 Principal/Home... 6 Como editar texto do home... 7 Desvendando

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

Solute Manager Gerenciador de Conteúdo Manual de Utilização

Solute Manager Gerenciador de Conteúdo Manual de Utilização Solute Manager Gerenciador de Conteúdo Manual de Utilização SITE LABORATÓRIO SÃO JOSÉ ÍNDICE INTRODUÇÃO PÁG 03 USUÁRIOS DO SISTEMA PÁG 04 NOTÍCIAS PÁG 06 PÁGINAS INTERNAS PÁG 13 DICAS PÁG 16 BANNERS PÁG

Leia mais

MINISTÉRIO DO DESENVOLVIMENTO AGRÁRIO SUBSECRETARIA DE PLANEJAMENTO, ORÇAMENTO E ADMINISTRAÇÃO COORDENAÇÃO-GERAL DE MODERNIZAÇÃO E INFORMÁTICA

MINISTÉRIO DO DESENVOLVIMENTO AGRÁRIO SUBSECRETARIA DE PLANEJAMENTO, ORÇAMENTO E ADMINISTRAÇÃO COORDENAÇÃO-GERAL DE MODERNIZAÇÃO E INFORMÁTICA MINISTÉRIO DO DESENVOLVIMENTO AGRÁRIO SUBSECRETARIA DE PLANEJAMENTO, ORÇAMENTO E ADMINISTRAÇÃO COORDENAÇÃO-GERAL DE MODERNIZAÇÃO E INFORMÁTICA SACI LIVRE SISTEMA DE ADMINISTRAÇÃO DE CONTEÚDO INSTITUCIONAL

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

A seguir voce vai poder acompanhar, em 10 passos, como gerenciar o conteúdo das páginas pelas quais voce é responsável.

A seguir voce vai poder acompanhar, em 10 passos, como gerenciar o conteúdo das páginas pelas quais voce é responsável. A seguir voce vai poder acompanhar, em 10 passos, como gerenciar o conteúdo das páginas pelas quais voce é responsável. Índice Geral TULogarUT 3 TUConhecer e VisualizarUT 6 TUÁrea de Edição / Blocos e

Leia mais

Manual PAINT.NET de imagens

Manual PAINT.NET de imagens Manual PAINT.NET de imagens 1. Instalação 1.1 - Para instalar o programa paint.net, o primeiro passo é baixá-lo do endereço a seguir e salvá-lo em seu computador. http://ww2.prefeitura.sp.gov.br/paint_net/paint.net.3.36.exe

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

Manual de uso do Gerente

Manual de uso do Gerente Manual de uso do Gerente Manual do Hypnobox: www.hypnobox.com.br/manual Índice Acessar o Hypnobox Endereço o www Login e Senha Tela Principal Perfil de acesso Editar Dados pessoais Fila de corretores Gerenciar

Leia mais

Manual do site do Comitê do Itajaí: como inserir e atualizar

Manual do site do Comitê do Itajaí: como inserir e atualizar Manual do site do Comitê do Itajaí: como inserir e atualizar conteúdo autor: Fábio Roberto Teodoro 25 de março de 2010 Sumário 1 Definições 3 2 Interface Administrativa 4 3 Conteúdo 6 3.1 Notícias............................................

Leia mais

A barra de menu a direita possibilita efetuar login/logout do sistema e também voltar para a página principal.

A barra de menu a direita possibilita efetuar login/logout do sistema e também voltar para a página principal. MANUAL DO SISCOOP Sumário 1 Menu de Navegação... 3 2 Gerenciar País... 5 3- Gerenciamento de Registro... 8 3.1 Adicionar um registro... 8 3.2 Editar um registro... 10 3.3 Excluir um registro... 11 3.4

Leia mais

Índice. Brasil Profissionalizado SIMEC/DTI/MEC 2

Índice. Brasil Profissionalizado SIMEC/DTI/MEC 2 Índice 1. Prefácio... 2 2. Requisitos Mínimos... 3 3. Como acessar o SIMEC... 4 4. Solicitando cadastro... 5 5. A Estrutura do Módulo... 7 6. Instruções Gerais... 8 6.1. Diagnóstico/BRASIL PROFISSIONALIZADO...9

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

Manual do Usuário PORTAL CNI CMS PUBLICA

Manual do Usuário PORTAL CNI CMS PUBLICA Manual do Usuário PORTAL CNI CMS PUBLICA SUMÁRIO 1. CONCEITOS INICIAIS...04 1.1 O que é um CMS?...04 1.2 Especificidades do Publica...04 1.3 O que é uma template?...04 1.4 O que são Páginas...04 1.5 O

Leia mais

ez Flow Guia do Usuário versão 1.0 experts em Gestão de Conteúdo

ez Flow Guia do Usuário versão 1.0 experts em Gestão de Conteúdo ez Flow Guia do Usuário versão 1.0 Conteúdo 1. Introdução... 3 2 1.1 Público alvo... 3 1.2 Convenções... 3 1.3 Mais recursos... 3 1.4. Entrando em contato com a ez... 4 1.5. Direitos autorais e marcas

Leia mais

Construtor de sites SoftPixel GUIA RÁPIDO - 1 -

Construtor de sites SoftPixel GUIA RÁPIDO - 1 - GUIA RÁPIDO - 1 - Sumário Introdução...3 Por que utilizar o Construtor de Sites?...3 Vantagens do Construtor de Sites...3 Conceitos básicos...3 Configuração básica do site...5 Definindo o layout/template

Leia mais

Índice. Manual de uso do Wordpress Produção de conteúdo. 1) Acesso ao Painel de Controle. 2) Ambientação na Ferramenta. 3) Inserir novo Post

Índice. Manual de uso do Wordpress Produção de conteúdo. 1) Acesso ao Painel de Controle. 2) Ambientação na Ferramenta. 3) Inserir novo Post Índice 1) Acesso ao Painel de Controle 2) Ambientação na Ferramenta 2.1) Posts 2.1.1) Adicionar novo post 2.1.2) Editar posts 2.2) Mídia 2.2.1) Tipos de Mídia 2.2.2) Biblioteca 2.2.3) Adicionar novo 3)

Leia mais

O Portal da Prefeitura de Olivedos foi construído levando em conta: Livre acesso sem necessidade de cadastro prévio ou senha.

O Portal da Prefeitura de Olivedos foi construído levando em conta: Livre acesso sem necessidade de cadastro prévio ou senha. Prefeitura Municipal de Olivedos MANUAL PRÁTICO DE NAVEGAÇÃO APRESENTAÇÃO Este é o Manual de Navegação da Prefeitura Municipal da cidade de Olivedos - PB. Tem linguagem simples e é ilustrado para que você,

Leia mais

Design para internet. Resolução. - No Design Gráfico quanto maior o DPI melhor. - Na web não é bem assim.

Design para internet. Resolução. - No Design Gráfico quanto maior o DPI melhor. - Na web não é bem assim. Resolução - No Design Gráfico quanto maior o DPI melhor. - Na web não é bem assim. Resolução Exemplo de imagem com diferentes resoluções de Pontos/Pixels por polegada". Em uma imagem digital quanto mais

Leia mais

MANUAL JOOMLA 2.5 PORTAL INTERNET. Ministério do Esporte

MANUAL JOOMLA 2.5 PORTAL INTERNET. Ministério do Esporte MANUAL JOOMLA 2.5 PORTAL INTERNET Ministério do Esporte SUMÁRIO 1.0 - Módulo Administração... 1 2.0 Banner randômico... 2 2.1 Adicionar novo slide... 2 2.2 Excluir slide... 6 3.0 Artigos... 7 3.1 Adicionar

Leia mais

Treinamento de Drupal para Administradores do Site Bibliotecas UFU

Treinamento de Drupal para Administradores do Site Bibliotecas UFU Treinamento de Drupal para Administradores do Site Bibliotecas UFU 1 1. Como logar no sistema como usuário autenticado Para logar no sistema como usuário autenticado é necessário digitar /user na frente

Leia mais

Apresentação Prática

Apresentação Prática Apresentação Prática Este curso contém exercícios com editor de texto Word e também exemplos de acesso à Internet e deve ser utilizado para a apresentação do Método de ensino a pessoas que já tenham tido

Leia mais

Padrão Visual de Sistemas da Anvisa na Internet

Padrão Visual de Sistemas da Anvisa na Internet Agência Nacional de Vigilância Sanitária Padrão Visual de Sistemas da Anvisa na Internet Gerência-Geral de Tecnologia da Informação Gerência de Sistemas www.anvisa.gov.br Brasília, janeiro de 2007 Agência

Leia mais

Universidade Federal do Mato Grosso - STI-CAE. Índice

Universidade Federal do Mato Grosso - STI-CAE. Índice CAPA Universidade Federal do Mato Grosso - STI-CAE Índice 1. Página da área administrativa... 1.1 Botões e campo iniciais... 2. Explicar como funcionam as seções... 2.1. Seções dinâmicos... 2.1.1 Como

Leia mais

Manual de Publicaça o no Blog da Aça o TRIBOS nas Trilhas da Cidadania

Manual de Publicaça o no Blog da Aça o TRIBOS nas Trilhas da Cidadania Manual de Publicaça o no Blog da Aça o TRIBOS nas Trilhas da Cidadania Sumário Objetivos do Blog... 2 Log-in... 3 Esqueci minha senha... 4 Utilizando o Blog... 5 Encontrando seu Blog... 5 Conhecendo o

Leia mais

PORTAL DE COMPRAS SÃO JOSÉ DO RIO PRETO

PORTAL DE COMPRAS SÃO JOSÉ DO RIO PRETO Compra Direta - Guia do Fornecedor PORTAL DE COMPRAS SÃO JOSÉ DO RIO PRETO Página As informações contidas neste documento, incluindo quaisquer URLs e outras possíveis referências a web sites, estão sujeitas

Leia mais

Presskit Guia Rápido. Release 2.0. Presskit

Presskit Guia Rápido. Release 2.0. Presskit Presskit Guia Rápido Release 2.0 Presskit 06/07/2009 Sumário 1 Login 2 Login e Senha...................................... 2 Esqueci minha senha.................................. 2 Fale Com o Suporte...................................

Leia mais

Navegando no produto e utilizando esse material de apoio, você descobrirá os benefícios do IOB Online Regulatório, pois só ele é:

Navegando no produto e utilizando esse material de apoio, você descobrirá os benefícios do IOB Online Regulatório, pois só ele é: 1. CONCEITO Completo, prático e rápido. Diante do aumento da complexidade da tributação e do risco fiscal, pelos desafios de conhecimento e capacitação e pela velocidade para acompanhar mudanças na legislação,

Leia mais

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

Tutorial Plone 4. Manutenção de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados Tutorial Plone 4 Manutenção 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 do

Leia mais

Pág 31. UC Introdução a Informática Docente: André Luiz Silva de Moraes 1º sem Redes de Computadores. 5 Introdução ao uso do BrOffice Impress

Pág 31. UC Introdução a Informática Docente: André Luiz Silva de Moraes 1º sem Redes de Computadores. 5 Introdução ao uso do BrOffice Impress 5 Introdução ao uso do BrOffice Impress O pacote BrOffice é um pacote de escritório muito similar ao já conhecido Microsoft Office e ao longo do tempo vem evoluindo e cada vez mais ampliando as possibilidades

Leia mais

DICAS IMPORTANTES. Alunos com dificuldades DEVEM procurar o atendimento de suporte Email: evesp@mstech.com.br ou 0800 7745504

DICAS IMPORTANTES. Alunos com dificuldades DEVEM procurar o atendimento de suporte Email: evesp@mstech.com.br ou 0800 7745504 DICAS IMPORTANTES ATENÇÃO Alunos com dificuldades DEVEM procurar o atendimento de suporte Email: evesp@mstech.com.br ou 0800 7745504 Sempre que for publicar alguma dúvida no fórum, por favor, informar:

Leia mais

Mozart de Melo Alves Júnior

Mozart de Melo Alves Júnior Mozart de Melo Alves Júnior WORD 2000 INTRODUÇÃO: O Word é um processador de texto com recursos de acentuação, formatação de parágrafo, estilo de letras diferentes, criação de tabelas, corretor ortográfico,

Leia mais

1 - Corrigir o deslocamento da caixa que contem os itens do Menu principal; está deslocada para baixo em relação ao template do fundo; - OK

1 - Corrigir o deslocamento da caixa que contem os itens do Menu principal; está deslocada para baixo em relação ao template do fundo; - OK IPHAN Novo Portal 4ª Revisão e Análise do CMS e Novo Portal 22/Dez/2014 - Revisão e acréscimo do texto enviado no dia 16/12/2014 Relação de itens verificados e propostas de alteração que consideramos fundamental

Leia mais

1. ACESSO AO SISTEMA. LOGIN E SENHA Para ter acesso ao painel administrativo de seu site, acesse o link: http://atualiza.urldosite.com.

1. ACESSO AO SISTEMA. LOGIN E SENHA Para ter acesso ao painel administrativo de seu site, acesse o link: http://atualiza.urldosite.com. Manual de uso 1. ACESSO AO SISTEMA LOGIN E SENHA Para ter acesso ao painel administrativo de seu site, acesse o link: http://atualiza.urldosite.com.br Após acessar o link acima, favor digitar seu LOGIN

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

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

VPAT (Voluntary Product Accessibility Template, Modelo de Acessibilidade de Produto) do eportfolio da Desire2Learn Maio de 2013 Conteúdo

VPAT (Voluntary Product Accessibility Template, Modelo de Acessibilidade de Produto) do eportfolio da Desire2Learn Maio de 2013 Conteúdo VPAT (Voluntary Product Accessibility Template, Modelo de Acessibilidade de Produto) do eportfolio da Desire2Learn Maio de 2013 Conteúdo Introdução Recursos de acessibilidade principais Navegação usando

Leia mais

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Introdução Aula 03: Pacote Microsoft Office 2007 O Pacote Microsoft Office é um conjunto de aplicativos composto, principalmente, pelos

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

Bem vindo ao ajuda do software QUICKFISH para criação de sites.

Bem vindo ao ajuda do software QUICKFISH para criação de sites. Bem vindo ao ajuda do software QUICKFISH para criação de sites. SUMÁRIO 1 Exemplo de site criado no software QUICKFISH...02 2 Salvando Seu Site...03 3 Publicando Seu Site...03 4 Visão inicial do Software

Leia mais

Avaliação dos Equívocos Descritos por Nielsen em Páginas Web

Avaliação dos Equívocos Descritos por Nielsen em Páginas Web Universidade Federal do Rio Grande do Sul Instituto de Informática Departamento de Informática Aplicada Interação Homem-Computador INF01043 Aluno: Leonardo Garcia Fischer Cartão UFRGS: 116627 Matrícula:

Leia mais

Google Drive. Passos. Configurando o Google Drive

Google Drive. Passos. Configurando o Google Drive Google Drive um sistema de armazenagem de arquivos ligado à sua conta Google e acessível via Internet, desta forma você pode acessar seus arquivos a partir de qualquer dispositivo que tenha acesso à Internet.

Leia mais

NTI Núcleo de Tecnologia de Informação / UNIFAL-MG Drupal Manual do Usuário DRUPAL MANUAL DO USUÁRIO

NTI Núcleo de Tecnologia de Informação / UNIFAL-MG Drupal Manual do Usuário DRUPAL MANUAL DO USUÁRIO DRUPAL MANUAL DO USUÁRIO Primeiros passos para inserir conteúdo no site. 1. Logar-se no site através de seu usuário e senha. 2. Criar um novo menu. 3. Ativar o menu criado, colocando-o em alguma região

Leia mais

SCNES - Sistema de Cadastro Nacional de Estabelecimentos de Saúde

SCNES - Sistema de Cadastro Nacional de Estabelecimentos de Saúde Ministério da Saúde Secretária Executiva Departamento de Informática do SUS SCNES - Sistema de Cadastro Nacional de Estabelecimentos de Saúde Manual de Operação Versão 1.0 M 01 Rio de Janeiro 2006 GARANTIAS

Leia mais

JURÍDICO. Gestão de Escritório de Advocacia Manual do Usuário. versão 1

JURÍDICO. Gestão de Escritório de Advocacia Manual do Usuário. versão 1 JURÍDICO Gestão de Escritório de Advocacia Manual do Usuário versão 1 Sumário Introdução 1 Operação básica do aplicativo 2 Formulários 2 Filtros de busca 2 Telas simples, consultas e relatórios 3 Parametrização

Leia mais

Guia de Uso. O Pro-Treino tem uma divisão clara de funções, apresentada a seguir: E três tipos de usuários que executam as funções descritas acima:

Guia de Uso. O Pro-Treino tem uma divisão clara de funções, apresentada a seguir: E três tipos de usuários que executam as funções descritas acima: Sumário 1. Introdução... 2 2. Conceitos básicos... 2 2.1. Fluxo do sistema... 3 2.2. Acesso ao sistema... 4 2.2.1. Login... 4 2.2.2. Logoff... 4 2.2.3. Esqueci minha senha... 5 2.3. Conhecendo o Sistema...

Leia mais

DWEB. Design para Web. Diagramação Web. Curso Superior de Tecnologia em Design Gráfico

DWEB. Design para Web. Diagramação Web. Curso Superior de Tecnologia em Design Gráfico DWEB Design para Web Curso Superior de Tecnologia em Design Gráfico Diagramação Web Medita estas coisas; ocupate nelas, para que o teu aproveitamento seja manifesto a todos. 1 Timóteo 4:15 Contatos Carlos

Leia mais

PICPICS PASSO A PASSO

PICPICS PASSO A PASSO PICPICS PASSO A PASSO 2. Faça login em sua conta. 1. Crie sua conta no PicPics, informando os seus dados ou dados da sua empresa. Informe também os dados que você usará para acesso ao site. 3. Após fazer

Leia mais

Manual do Usuário Gerenciador de Conteúdo do Site: www.semarh.goias.gov.br/

Manual do Usuário Gerenciador de Conteúdo do Site: www.semarh.goias.gov.br/ 1 Manual do Usuário Gerenciador de Conteúdo do Site: www.semarh.goias.gov.br/ 1) O acesso ao sistema é realizado através do link: http://www.semarhtemplate.go.gov.br/sistema/ obs.: após o lançamento do

Leia mais

SIAP - Sistema de Apoio ao Professor

SIAP - Sistema de Apoio ao Professor Introdução O SIAP, Sistema de Apoio ao Professor, é um programa que vai contribuir, de forma decisiva, com o cotidiano escolar de alunos, professores, gestores e funcionários administrativos. Com a implantação

Leia mais

Avaliação Do Site EducaRede. Introdução

Avaliação Do Site EducaRede. Introdução 1 Ivan Ferrer Maia Pós-Graduação em Multimeios / Unicamp Disciplina Multimeios e Educação Prof. Dr. José Armando Valente Avaliação Do Site EducaRede Introdução A quantidade de Websites encontrada no universo

Leia mais

Manual de Utilização

Manual de Utilização Manual de Utilização Índice 1 Introdução...2 2 Acesso ao Sistema...3 3 Funcionamento Básico do Sistema...3 4 Tela Principal...4 4.1 Menu Atendimento...4 4.2 Menu Cadastros...5 4.2.1 Cadastro de Médicos...5

Leia mais

FTAD Formação Técnica em Administração. Aula 01 Prof. Arlindo Neto

FTAD Formação Técnica em Administração. Aula 01 Prof. Arlindo Neto FTAD Formação Técnica em Administração Aula 01 Prof. Arlindo Neto COMPETÊNCIAS QUE TRABALHAREMOS NESTE MÓDULO Elaborar um documento de texto eletrônico Microsoft Office Word 2007 O Microsoft Office Word

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

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

GERENCIANDO SUA BIBLIOTECA

GERENCIANDO SUA BIBLIOTECA GERENCIANDO SUA BIBLIOTECA ORGANIZANDO SUA BIBLIOTECA Os livros da sua biblioteca são ordenados alfabeticamente pelo título. Clique em ORDENAR POR, na parte superior da página, para alterar a forma como

Leia mais

Centro de Agricultura Alternativa CAA Manual do Usuário do Portal Ypadê Balaio Digital Tecnologia em Gestão Ltda ME. Manual do Usuário Portal Ypadê

Centro de Agricultura Alternativa CAA Manual do Usuário do Portal Ypadê Balaio Digital Tecnologia em Gestão Ltda ME. Manual do Usuário Portal Ypadê Centro de Agricultura Alternativa CAA Manual do Usuário Portal Ypadê Montes Claros, 16 de Julho de 2011 Revisão 3 Sumário 1. Apresentação do portal e escopo deste documento... 2 2. Acessando o Portal Ypadê...

Leia mais

Tutorial Administrativo (Backoffice)

Tutorial Administrativo (Backoffice) Manual - Software ENTRANDO NO SISTEMA BACKOFFICE Para entrar no sitema Backoffice, digite no seu navegador de internet o seguinte endereço: http://pesquisa.webbyapp.com/ Entre com o login e senha. Caso

Leia mais

3.000.000 de registros de candidatos e respondentes de pesquisa, número que continua crescendo.

3.000.000 de registros de candidatos e respondentes de pesquisa, número que continua crescendo. SUMÁRIO 1 1 - Conceitos Gerais O CRQ é um sistema de controle de qualidade utilizado na etapa de recrutamento de estudos de natureza qualitativa. Ele é um banco de dados que tem como principal objetivo

Leia mais

Versão 2.2.0 PIMACO AUTOADESIVOS LTDA. Assistente Pimaco + 2.2.0. Ajuda ao Usuário

Versão 2.2.0 PIMACO AUTOADESIVOS LTDA. Assistente Pimaco + 2.2.0. Ajuda ao Usuário Versão 2.2.0 PIMACO AUTOADESIVOS LTDA. Assistente Pimaco + 2.2.0 Ajuda ao Usuário A S S I S T E N T E P I M A C O + 2.2.0 Ajuda ao usuário Índice 1. BÁSICO 1 1. INICIANDO O APLICATIVO 2 2. O AMBIENTE DE

Leia mais

Documentação do Wordpress - Nova Escola

Documentação do Wordpress - Nova Escola Documentação do Wordpress - Nova Escola Outubro 2012 Página Inicial 2 Menu 3 Área do Aluno 6 Sistema Administrativo 7 Glossário 11 Anexos 17 Página 1 PÁGINA INICIAL Flash TV Educação Infantil Ensino Fundamental

Leia mais

Cetac - Centro de Ensino e Treinamento em Anatomia e Cirurgia Veterinária Manual Técnico do Sistema Administrativo do site Cetacvet.com.

Cetac - Centro de Ensino e Treinamento em Anatomia e Cirurgia Veterinária Manual Técnico do Sistema Administrativo do site Cetacvet.com. Manual Técnico do Sistema Administrativo do site Cetacvet.com.br SÃO PAULO - SP SUMÁRIO Introdução... 3 Autenticação no sistema administrativo... 4 Apresentação do sistema administrativo... 5 Gerenciamento

Leia mais

Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo.

Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo. Manual de Instruções ECO Editor de Conteúdo Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo. O ECO é um sistema amigável e intui?vo, mas abaixo você pode?rar eventuais dúvidas e aproveitar

Leia mais