João Sá Marta1 30-07-2015 SILVA II - Programa Descrição do novo Layout Metadados associados Cabeçalhos e parágrafos Notícias ES Galeria de imagens Mapas.

Apresentação em tema: "João Sá Marta1 30-07-2015 SILVA II - Programa Descrição do novo Layout Metadados associados Cabeçalhos e parágrafos Notícias ES Galeria de imagens Mapas."— Transcrição da apresentação:

1

2 João Sá Marta1 30-07-2015 SILVA II - Programa Descrição do novo Layout Metadados associados Cabeçalhos e parágrafos Notícias ES Galeria de imagens Mapas do maps.google.com

3 João Sá Marta2 30-07-2015 Layout de um site tipo – com o marcador UCPA subsite Homepage View Cabeçalho-Apresenta a identidade da UC – Não é possível alteração via CMS Fim da listagem de conteúdos,copyright, links úteis e gerais Menu que reflecte a estrutura do site Barra de navegação Área de conteúdos, editável pelos editores. (Silva Document com o identificador “index_middle”) Slideshow. Podem ser vídeos ou imagens que incluem texto e link para mais informação (Silva Publication com o identificador “slideshow”, cujo conteúdo são “Media content”) Área de notícias (mostra todos os “viewers”)

4 João Sá Marta3 30-07-2015 Layout de um site tipo – sem o marcador UCPA subsite Homepage View Banner: Banners diferentes por subsite e por directoria Área editável pelos editores

5 João Sá Marta4 30-07-2015 Elementos da página principal Index: serve para definir o título do subsite Silva publication para conter o slide show Silva document com o conteúdo central 3 “viewers” de notícias que irão aparecer no final da página

6 João Sá Marta5 30-07-2015 Elementos da página principal Aparecerão, da esquerda para a direita, consoante o nº de ordem da posição (15,16,17)

7 João Sá Marta6 30-07-2015 Elementos da página principal - Slideshow Imagem tamanho máx:340x220 Título Texto Link Imagem original (600x450)

8 João Sá Marta7 30-07-2015 Elementos da página principal - Slideshow Vídeo YouTube 420x260 Código do vídeo do YouTube Silva Media Content, contendo um Silva Embed

9 João Sá Marta8 30-07-2015 Novo layout – tamanhos das imagens as imagens são automaticamente ajustadas consoante o tamanho da janela do browser do visitante Banners  Tamanho dos banners no layout em 24_JAN_2014, para aparecerem sem ser cortados:  Tamanho máximo: 870x145  Tamanhos possíveis: 700x145 538x145 Miniaturas das notícias  A primeira imagem de cada notícia é redimensionada para 120x80. Assim para as miniaturas aparecerem proporcionais à imagem original, esta última deve ter uma ter a largura igual a 1,5 vezes a altura. Slideshow  tamanho máximo 340x220, para um browser com a janela a ocupar o écran inteiro

10 João Sá Marta9 30-07-2015 Novo layout – metadados associados Exemplo em : http://www.uc.pt/ciuc/formacao_silva/accoes_formacao0 1/ano_2011/novo_layout http://www.uc.pt/ciuc/formacao_silva/accoes_formacao0 1/ano_2011/novo_layout Definidos em : Properties -> Settings Definição da cor base do subsite – cabeçalhos Link para outro idioma (i18n URL)

11 João Sá Marta10 30-07-2015 Novo layout – cabeçalhos e parágrafos

12 João Sá Marta11 30-07-2015 Novo layout – Banners Exemplo em : http://www.uc.pt/ciuc/formacao_silva/accoes_formacao01/ano_2011 /novo_layout http://www.uc.pt/ciuc/formacao_silva/accoes_formacao01/ano_2011 /novo_layout “Silva Image” com identificador começado por banner_ Podem ser utilizados banners diferentes em directorias e subsites diferentes As dimensões são 870x145px Podem ser usados vários banners na mesma directoria ou subsite, que irão ser apresentados de forma alternada

13 João Sá Marta12 30-07-2015 Notícias Criar uma “Silva News Publication” por cada grupo de notícias Criar notícias (Silva Article) dentro das “Silva News Publication” Definir um filtro (Silva News Filter) por cada grupo de notícias, ou agregando vários grupos de notícias Definir um “Silva News Viewer” associado a cada filtro, ou agregando vários filtros

14 João Sá Marta13 30-07-2015 Notícias – Silva Article Semelhante a uma página (Silva Document), mas com mais alguns atributos Na visualização, na página inicial, os “Silva Articles”, aparecem, da esquerda para a direita, e de cima para baixo, por ordem decrescente do parâmetro “Display Date”. O mais recente aparece à esquerda, na fila de cima. É feita uma miniatura (120x80) da primeira imagem de cada “Silva Article” Na visualização são mostradas as 6 notícias mais recentes (ordem da “Display Date”)

15 João Sá Marta14 30-07-2015 Notícias – Silva Article É possível esconder o artigo da listagem inicial a partir de uma data definida pelo editor, ficando o artigo sempre disponível no arquivo. Possível definir um link externo para o artigo, que poderá ser aberto numa nova janela do navegador (“browser”) do cliente Possível forçar a presença de um artigo (parâmetro “sticky”), independentemente de haverem artigos mais recentes

16 João Sá Marta15 30-07-2015 Galeria de imagens External Source (ES) "Image Gallery" As imagens têm que estar todas na mesma directoria da página onde é inserida a ES A apresentação do título das imagens é configurável Apresentação das imagens é muito mais rápida do que a versão anterior

17 João Sá Marta16 30-07-2015 Mapas do google External Source (ES) ”Code Source Google Maps iframe” Para fazer um mapa personalizado é necessário possuir uma conta em @gmail.com Os mapas podem ser públicos ou “não listados” (ver Ajuda do maps google) Ajuda do maps google Fotografias e “labels”, no mapa global, estão sujeitos a aprovação Ícones para os mapas http://mapicons.nicolasmollet.com/ http://mapicons.nicolasmollet.com/ Nova versão do Google Maps sem algumas das funcionalidades da versão anterior (info. em out/2013)

18 João Sá Marta17 30-07-2015 20 Regras De Usabilidade Das cerca de 200 orientações ou regras de usabilidade identificadas no documento “Usabilidade_Checklist_20070703”, destacamos um conjunto de 20:Usabilidade_Checklist_20070703 A disposição de conteúdos começa no topo superior esquerdo do ecrã. A disposição de informação é feita de forma lógica com títulos descritivos que descrevem claramente cada grupo A navegação até aos níveis terminais do site faz-se com 3 cliques Longas cadeias de caracteres ou números devem ser quebradas em pequenos pedaços Não é necessário fazer scroll horizontal Não é necessário percorrer a pagina todas para determinar os seus conteúdos. É possível ao utilizador "varrer" o ecrã e identificar e compreender as mensagens/temas principais Não existe uma proliferação exagerada de banners e outros elementos promocionais desajustados O conteúdo da página está dividido em blocos O nível de detalhe de conteúdos é progressivo O número de opções em listas, menus, etc. são entre 5 a 9 itens (número "mágico" de 7) O texto é conciso, simples (sem adjectivos) e legível Opções e áreas de informação não aparecem como imagens que são confundidas com publicidade Os estilos e tamanhos de letra numa página são consistentes com a importância relativa de cada elemento Os links ancorados em elementos gráficos (ícones, imagens, gráficos) tem uma componente de texto e a tag "alt" preenchida Os links Internet estão a azul Os títulos das páginas Web, conforme aparecem na barra do browser, dão indicação do conteúdo e da área onde o utilizador se encontra Os títulos de campos de páginas e secções são breves (e descritivos do respectivo conteúdo) Os títulos dos links indicam claramente os seu propósitos ou destinos Usam-se apenas até 4 cores (exceptuando-se cores adicionais de uso esporádico) Usar apenas até 4 tamanhos de fontes/letterings