João Sá Marta 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

João Sá Marta 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”)

João Sá Marta 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

João Sá Marta 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

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

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

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

João Sá Marta 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: 700x x145 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

João Sá Marta Novo layout – metadados associados Exemplo em : 1/ano_2011/novo_layout 1/ano_2011/novo_layout Definidos em : Properties -> Settings Definição da cor base do subsite – cabeçalhos Link para outro idioma (i18n URL)

João Sá Marta Novo layout – cabeçalhos e parágrafos

João Sá Marta Novo layout – Banners Exemplo em : /novo_layout /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

João Sá Marta 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

João Sá Marta 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”)

João Sá Marta 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

João Sá Marta 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

João Sá Marta Mapas do google External Source (ES) ”Code Source Google Maps iframe” Para fazer um mapa personalizado é necessário possuir uma conta 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 Nova versão do Google Maps sem algumas das funcionalidades da versão anterior (info. em out/2013)

João Sá Marta Regras De Usabilidade Das cerca de 200 orientações ou regras de usabilidade identificadas no documento “Usabilidade_Checklist_ ”, destacamos um conjunto de 20:Usabilidade_Checklist_ 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