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
05-11-2015
João Sá Marta
1
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
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”)
Barra de navegação
Área de conteúdos, editável pelos editores. (Silva
Document com o identificador “index_middle”)
Menu que
reflecte a
estrutura
do site
Área de notícias (mostra todos os “viewers”)
Fim da listagem de
conteúdos,copyright, links úteis e
gerais
05-11-2015
João Sá Marta
2
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
05-11-2015
João Sá Marta
3
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
05-11-2015
João Sá Marta
4
Elementos da página principal
Aparecerão, da esquerda para a
direita, consoante o nº de
ordem da posição (15,16,17)
05-11-2015
João Sá Marta
5
Elementos da página principal - Slideshow
Título
Texto
Link
Imagem tamanho máx:340x220
Imagem original
(600x450)
05-11-2015
João Sá Marta
6
Elementos da página principal - Slideshow
Vídeo YouTube 420x260
Silva Media Content,
contendo um Silva Embed
Código do vídeo do YouTube
05-11-2015
João Sá Marta
7
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
05-11-2015
João Sá Marta
8
Novo layout – metadados associados
 Exemplo em :
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)
05-11-2015
João Sá Marta
9
Novo layout – cabeçalhos e parágrafos
05-11-2015
João Sá Marta
10
Novo layout – Banners
 Exemplo em :
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
05-11-2015
João Sá Marta
11
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
05-11-2015
João Sá Marta
12
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”)
05-11-2015
João Sá Marta
13
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
05-11-2015
João Sá Marta
14
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
05-11-2015
João Sá Marta
15
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)
 Fotografias e “labels”, no mapa global, estão sujeitos a
aprovação
 Ícones para os mapas http://mapicons.nicolasmollet.com/
 Nova versão do Google Maps sem algumas das funcionalidades da
versão anterior (info. em out/2013)
05-11-2015
João Sá Marta
16
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:

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
05-11-2015
João Sá Marta
17