joão sá marta1 30-07-2015 silva ii - programa descrição do novo layout metadados associados...

João Sá Marta 227-04-23

SILVA II - Programa

Descrição do novo LayoutMetadados associadosCabeçalhos e parágrafos

NotíciasES Galeria de imagensMapas do maps.google.com


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


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


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


Elementos da página principal

Aparecerão, da esquerda para a direita, consoante o

nº de ordem da posição (15,16,17)


Elementos da página principal - Slideshow

Imagem tamanho máx:340x220

Título

TextoLink

Imagem original (600x450)


Elementos da página principal - Slideshow

Vídeo YouTube 420x260

Código do vídeo do YouTube

Silva Media Content, contendo um Silva Embed


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


Novo layout – metadados associados Exemplo em :

http://www.uc.pt/ciuc/formacao_silva/accoes_formacao01/ano_2011/novo_layout

Definidos em : Properties -> Settings

Definição da cor base do subsite – cabeçalhos

Link para outro idioma (i18n URL)


Novo layout – cabeçalhos e parágrafos


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


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


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


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


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


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)


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

joão sá marta1 30-07-2015 silva ii - programa descrição do novo layout metadados associados...

Documents