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

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

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

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

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

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

GUIA DE USO FRAMEWORK APLANAR Versão 0.1 21/07/2014 Cópia distribuída e controlada

GUIA DE USO FRAMEWORK APLANAR Versão 0.1 21/07/2014 Cópia distribuída e controlada GUIA DE USO SUMÁRIO 1. Utilizando o FrameWork Aplanar... 2 1.1 GRID... 2 1.1.1 Barra de menus:... 2 1.1.2 Barra de ferramentas:... 3 1.1.3 Barra de pesquisa:... 3 1.2 MENU ADMINISTRATIVO... 4 1.2.1 Usuário:...

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

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

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

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

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

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

Construtor Iron Web. Manual do Usuário. Iron Web Todos os direitos reservados

Construtor Iron Web. Manual do Usuário. Iron Web Todos os direitos reservados Construtor Iron Web Manual do Usuário Iron Web Todos os direitos reservados A distribuição ou cópia deste documento, ou trabalho derivado deste é proibida, requerendo, para isso, autorização por escrito

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

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

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 Dicas iniciais O que é o Plone? 3 Formulário de Solicitação 6 Acesso ao Plone 6 Configurações do Site 14 Inserindo Conteúdo Inserir Pastas

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

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

Í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

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

23 LOCAIS ESTRATÉGICOS PARA INSERIR O OPT-IN DO EMAIL MARKETING

23 LOCAIS ESTRATÉGICOS PARA INSERIR O OPT-IN DO EMAIL MARKETING WHITEPAPER 23 LOCAIS ESTRATÉGICOS PARA INSERIR O OPT-IN DO EMAIL MARKETING Por Juliana Padron CEO da Templateria INFO@TEMPLATERIA.COM WHITEPAPER 23 LOCAIS ESTRATÉGICOS PARA INSERIR O OPT-IN DO EMAIL MARKETING

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

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

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

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

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

Manual do Usuário Novembro/2012

Manual do Usuário Novembro/2012 Manual do Usuário Novembro/2012 Sumário 1. Objetivos...3 2. Informações Operacionais...4 3. Configurações Recomendadas...7 4. Preparação do Sistema...8 4.1 Solicitando acesso ao Sisu...8 4.2 Autorização

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 Diretrizes. Identidade Padrão de Comunicação Digital do Poder Executivo Federal. versão 3.4 12/2014

Manual de Diretrizes. Identidade Padrão de Comunicação Digital do Poder Executivo Federal. versão 3.4 12/2014 Identidade Padrão de Comunicação Digital do Poder Executivo Federal versão 3.4 12/2014 Edição versão data Descrição da mudança 1.0 Setembro de 2013 Criação do manual 2.0 Outubro de 2013 Atualização do

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

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

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

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

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

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

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

TUTORIAL SCRIBUS 1.4.2

TUTORIAL SCRIBUS 1.4.2 1 TUTORIAL SCRIBUS 1.4.2 Marinez Siveris asiveris@via-rs.net O que é o Scribus? O Scribus é um excelente programa livre para a produção de revistas, propagandas, jornais, enfim, qualquer documento que

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

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

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

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

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

Superprovas Versão 9

Superprovas Versão 9 Superprovas Versão 9 1. Introdução...2 2. Novos Recursos Adicionados...4 3. Janela Principal...7 4. Janela de Questões...11 5. Janela de Desempenho...12 6. Barras de Ferramentas...13 7. Teclas de Atalho...14

Leia mais

ADOBE MUSE. Criando seu primeiro site

ADOBE MUSE. Criando seu primeiro site ADOBE MUSE Criando seu primeiro site Sumário Capítulo 1 Instalar o software e configurar o projeto de amostra Criar um mapa do site Editar a página A-mestre Definir a paleta de cores e renomear amostras

Leia mais

Manual de Uso. Intranet

Manual de Uso. Intranet Manual de Uso Intranet última atualização: setembro de 2013 1 2 Sumário 1- Acesso 04 2- Gerenciamento de páginas 04 3- Gerenciamento de layout e aparência das páginas 3.1- Layout 3.3- Aparência 07 07 08

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

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

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

[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

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

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

Unidade 1: O Painel de Controle do Excel *

Unidade 1: O Painel de Controle do Excel * Unidade 1: O Painel de Controle do Excel * material do 2010* 1.0 Introdução O Excel nos ajuda a compreender melhor os dados graças à sua organização em células (organizadas em linhas e colunas) e ao uso

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

UNIVERSIDADE ESTÁCIO DE SÁ CURSO DE DESENHO INDUSTRIAL WEBDESIGN CAMPUS PRAÇA XI - NOITE VICTOR YAMAMOTO DE SOUZA 200901191267

UNIVERSIDADE ESTÁCIO DE SÁ CURSO DE DESENHO INDUSTRIAL WEBDESIGN CAMPUS PRAÇA XI - NOITE VICTOR YAMAMOTO DE SOUZA 200901191267 UNIVERSIDADE ESTÁCIO DE SÁ CURSO DE DESENHO INDUSTRIAL WEBDESIGN CAMPUS PRAÇA XI - NOITE VICTOR YAMAMOTO DE SOUZA 200901191267 Rio de Janeiro 2013 INTRODUÇÃO O presente projeto visa o desenvolvimento de

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

MANUAL DE FUNCIONALIDADES AVANÇADAS PARA PORTAIS - CMS PLONE

MANUAL DE FUNCIONALIDADES AVANÇADAS PARA PORTAIS - CMS PLONE MANUAL DE FUNCIONALIDADES AVANÇADAS PARA PORTAIS - CMS PLONE IDENTIDADE PADRÃO DE COMUNICAÇÃO DIGITAL DO PODER EXECUTIVO FEDERAL versão 1.2 12/2014 Secretaria de Comunicação Social Sumário Funcionalidades

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

Sistema operacional Windows 7, Windows Live Mail e Adobe Reader. Sistemas operacionais em concursos públicos

Sistema operacional Windows 7, Windows Live Mail e Adobe Reader. Sistemas operacionais em concursos públicos Sistema operacional Windows 7, Windows Live Mail e Adobe Reader Sistemas operacionais em concursos públicos Antes de tudo é importante relembrarmos que o sistema operacional é um tipo de software com a

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

EDITOR DE TEXTO BROFFICE WRITER

EDITOR DE TEXTO BROFFICE WRITER 1 1 Editor de Texto BrOffice Writer O Writer é o editor de texto do pacote OpenOffice, que corresponde ao Microsoft Word. Um editor de texto é um programa com recursos para formatação de texto que poderá

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

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

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

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

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

Ano III - Número 16. Versão 4.6.4

Ano III - Número 16. Versão 4.6.4 Versão 4.6.4 Sexta-feira, 08 de fevereiro de 2008 ÍNDICE 3 4 EDITORIAL NOVAS FUNCIONALIDADES 4 12 13 14 15 16 Novo Cronograma 4 5 5 6 7 8 8 9 9 10 10 Edição Rápida do Cronograma Recurso de Arrastar e Soltar

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

ANÁLISE DAS MUDANÇAS NA PÁGINA DO SITE PORTAL COMUNITÁRIO

ANÁLISE DAS MUDANÇAS NA PÁGINA DO SITE PORTAL COMUNITÁRIO 11. CONEX Apresentação Oral Resumo Expandido 1 ÁREA TEMÁTICA: ( X ) COMUNICAÇÃO ( ) CULTURA ( ) DIREITOS HUMANOS E JUSTIÇA ( ) EDUCAÇÃO ( ) MEIO AMBIENTE ( ) SAÚDE ( ) TRABALHO ( ) TECNOLOGIA ANÁLISE DAS

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

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

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

Ambiente Virtual de Aprendizagem C.S.G. M anual do Professor

Ambiente Virtual de Aprendizagem C.S.G. M anual do Professor Ambiente Virtual de Aprendizagem C.S.G. M anual do Professor Sumário Pré-requisitos para o Moodle... Entrar no Ambiente... Usuário ou senha esquecidos?... Meus cursos... Calendário... Atividades recentes...

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

CAPÍTULO IV Sistema Operacional Microsoft Windows XP

CAPÍTULO IV Sistema Operacional Microsoft Windows XP CAPÍTULO IV Sistema Operacional Microsoft Windows XP Sistemas Operacionais Sistemas Operacionais são programas que como o próprio nome diz tem a função de colocar o computador em operação. O sistema Operacional

Leia mais

Sumário. Ambiente de Trabalho... Erro! Indicador não definido.

Sumário. Ambiente de Trabalho... Erro! Indicador não definido. Sumário Ambiente de Trabalho... Erro! Indicador não definido. Introdução ao Project Um projeto é uma seqüência bem definida de eventos, com um início e um final identificável. O foco de um projeto é obter

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

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

Joomla - Instituto Psicologia. Agenda. 1. Apresentação do Joomla

Joomla - Instituto Psicologia. Agenda. 1. Apresentação do Joomla Agenda 1. Apresentação do Joomla 2. Organização Interna do Joomla 3. Organização do Portal do IP 4. Política Interna de Gerenciamento do Portal 5. Acesso ao Sistema de Gerenciamento do Portal 6. Acesso

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

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

Portal da Imprensa Regional. Actualizações e Correcções

Portal da Imprensa Regional. Actualizações e Correcções Portal da Imprensa Regional Actualizações e Correcções Índice Versão: 3.1.3... 3... 3 BackOffice... 3 Versão: 3.0.1... 3... 3 BackOffice... 3 Versão: 3.0.0... 4... 4 BackOffice... 4 Histórico de Versões...

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

Material desenvolvido por Melissa Lima da Fonseca. melissa.mlf@gmail.com.br - (031) 9401-4041. www.melissalima.com.br Página 1

Material desenvolvido por Melissa Lima da Fonseca. melissa.mlf@gmail.com.br - (031) 9401-4041. www.melissalima.com.br Página 1 EXCEL BÁSICO Material desenvolvido por Melissa Lima da Fonseca melissa.mlf@gmail.com.br - (031) 9401-4041 www.melissalima.com.br Página 1 Índice Introdução ao Excel... 3 Conceitos Básicos do Excel... 6

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

8/9/2010 WINDOWS. Breve Histórico. Profa. Leda G. F. Bueno. Seu desenvolvimento iniciou-se em 1981

8/9/2010 WINDOWS. Breve Histórico. Profa. Leda G. F. Bueno. Seu desenvolvimento iniciou-se em 1981 Conceitos Básicos e Gerenciamento de Arquivos WINDOWS EXPLORER Profa. Leda G. F. Bueno WINDOWS Sistema operacional criado pela Microsoft Corporation Característica Principal características o uso de janelas

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

Microsoft Power Point 2007

Microsoft Power Point 2007 Microsoft Power Point 2007 Sumário Layout e Design 4 Formatação de Textos 8 Salvando um arquivo do PowerPoint 15 Plano de Fundo 16 Marcadores 18 Réguas e grade 19 Tabelas 20 Gráficos 21 Imagens 22 Smart

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

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

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

Microsoft Power Point - Manual de Apoio

Microsoft Power Point - Manual de Apoio Microsoft Power Point - Manual de Apoio Pág. 1 de 26 Apresentação e introdução O ambiente de trabalho do Power Point. Abrir, guardar e iniciar apresentações. Obter ajuda enquanto trabalha. Principais barras

Leia mais

Manual do Plone (novo portal do IFCE)

Manual do Plone (novo portal do IFCE) Manual do Plone (novo portal do IFCE) Dezembro/2015 Índice Como criar submenus... 3 Como criar banner rotativo... 4 Como remover um banner... 5 Como criar uma notícia... 6 Como inserir imagem na notícia...

Leia mais

Manual do Usuário Publicador

Manual do Usuário Publicador Manual do Usuário Publicador Portal das Cidades Versão 1.2.1 Abril 2014 SERPRO Superintendência de Desenvolvimento SUPDE Setor de Desenvolvimento de Sítios e Portais DEDS2 Setor de Desenvolvimento Ciclo

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

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

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

Manual JNoivos. Conteúdo Índice. 01)Acessando a parte administrativa do Site. 02)Alterando o texto do menu História. 03) Alterando Texto Pagina Home.

Manual JNoivos. Conteúdo Índice. 01)Acessando a parte administrativa do Site. 02)Alterando o texto do menu História. 03) Alterando Texto Pagina Home. Manual JNoivos Conteúdo Índice 01)Acessando a parte administrativa do Site. 02)Alterando o texto do menu História. 03) Alterando Texto Pagina Home. 04)Alterando texto e imagem do Slide Show. 05) Alterando

Leia mais