GUIA DE DESENHO GRÁFICO ABCD-SITE

Tamanho: px
Começar a partir da página:

Download "GUIA DE DESENHO GRÁFICO ABCD-SITE"

Transcrição

1 Versão Sumário Introdução...2 Arquitetura do ABCD-site...2 Web Standards...3 Acessibilidade da interface...4 Tipo I ou Portal ABCD...4 Tipo II ou Portal de Coleção ou Galeria...5 Tipo III ou Página de Resultados...5 Instruções para personalização (básico)...6 Estrutura dos arquivos e pastas no servidor...6 Estrutura das folhas de estilo...7 Troca do Logo...8 Carga (upload) da imagem...8 Troca da imagem no ADMIN...8 Troca do Banner...9 Carga (upload) da imagem...9 Configuração na CSS Alteração no título Configurando a CSS Instituições Alterando as Instituições Configurando a CSS Configurações de fontes e cores Configurações do rodapé Estrutura Configurando a CSS Anexo I (Avançado) Layout Fluído e Layout Fechado Configuração de Colunas

2 Introdução ABCD-Site funciona como um módulo do ABCD que combina a idéia de portal para unir os usuários recursos com as informações relevantes dos sistemas parceiros juntos em uma rede de fontes de informações o próprio OPAC para recuperação de informação no seio do próprio sistema, mas também a outras bases de dados semelhantes, e com fornecedores de informação (a biblioteca) através das "comunicações" (por exemplo, anúncios, artigos) Este manual está dividido em 3 (três) capítulos, dois dos quais dedicados aos conceitos e normas utilizadas e outro referente as possíveis customizações a nível básico. O anexo I contém tópicos avanzados em termos de customização e configuração. A informação, neste documento, foi escrita como um guia genérico para auxiliar os usuários no processo de customização de layout e estilos de forma a cumprir os requisitos de uma instância do ABCD. Não se pretende que seja um manual passo a passo e presume-se que o usuário tenha conhecimento prévio básico em XHTML e CSS, bem como habilidades avançadas em web design e layout. O guia tem o propósito de orientar o processo de desenho gráfico de sites do Sistema de Automação de Bibliotecas e Centros de Documentação ABCD utilizando-se a ferramenta BVS-Site v4.0 da BIREME.A adoção do modelo gráfico descrito no guia para a operação das interfaces nos portais e sítios do ABCD é recomendado considerando os seguinte aspectos: O modelo de interface e navegação proposto está fundamentado nos "Critérios Ergonômicos para Avaliação de Interfaces Humano-Computador" 1 e estão implementados de modo a facilitar e aumentar a eficiência da operação o ABCD; Uma interface padronizada potencializa o cumprimento das tarefas típicas de localização de informação, particularmente em ambiente de rede de fontes de informação como é o caso do ABCD; Arquitetura do ABCD-site ABCD-Site é uma versão simplificada e personalizada do BVS-Site v.4.0 da BIREME. Você pode acessar a versão completa em A arquitetura de processamento de dados e informação do ABCD está estruturada em 3 camadas independentes e interoperativas. Na primeira camada estão os arquivos de dados 1 Bastien JMC; Scapin D. Ergonomic Criteria for the Evaluation of Human-Computer interfaces. Institut National de recherche en informatique et en automatique, France,

3 correspondentes aos diferentes tipos de fontes de informação de uma Biblioteca Virtual. Sobre essa camada, estão os índices de acesso que são gerados pelas aplicações do ABCD e por outros serviços de indexação como, por exemplo, o ISIS, Collexis, Google, OAI, Yahoo, etc. Na última camada, estão as interfaces de acesso à informação. Cada uma das camadas é operada no ABCD de maneira a compor a Rede de Fontes de Informação, a Rede de Índices e a Rede de Interfaces. A separação em camadas permite a possibilidade quase infinita de produzir interfaces de acesso ao conteúdo e à disponibilidade de conteúdos em formatos que sejam adequados a diferentes idiomas, serviços, meios de comunicação e acesso a diferentes dispositivos como computadores, monitores, impressoras, dispositivos de áudio, PDAs, telefones celulares, etc. Figura 1 - Arquitetura de processamento do ABCD site Com a operação da Rede de Interfaces espera-se estimular a criação de uma rede de colaboração no modelo de software livre que poderá explorar e compartilhar novas interfaces de acesso aos conteúdos da BVS. Deste modo, facilita-se o uso das fontes de informação em inumeráveis serviços. Web Standards O ABCD opera utilizando Web Standards 2 e código XHTML 3 estruturado em tableless (sem o uso de tabelas como recurso de layout), fator fundamental que possibilitou a separação das camadas de conteúdo, índices e apresentação. Esses standards, estabelecidos pelo World Wide Web Consortium - W3C e outras entidades reguladoras, são um conjunto de normas e padrões para criar e interpretar conteúdo na web. A utilização desses padrões resulta na criação de sites mais acessíveis, para um maior número de pessoas e para uma diversidade de dispositivos de acesso, uma vez que o código XHTML está baseado no "markup" do conteúdo, o que possibilita a associação de semântica ao código. 2 Web Standards Project 3 Extensible Hypertext Markup Language 3

4 Além disso, seu uso facilita a criação e integração de Web Services, que compõe um conjunto de padrões e protocolos abertos usados para a troca de dados e informações entre aplicações, sistemas e serviços. Acessibilidade da interface Acessibilidade na web significa que pessoas portadoras de deficiências físicas, sensoriais ou cognitivas poderão perceber, entender, navegar e interagir com a web da mesma forma que contribuir. As implementações na interface do ABCD atingem o padrão de Conformidade AA (Web Content Accessibility Guidelines 1.0, WAI - Web Accessibility Initiative, W3C) 4, o que representa que todos os requisitos essenciais bem como os que deveriam ser cumpridos estão atendidos. A navegação no ABCD é baseada em três tipos genéricos de páginas web Tipo I ou Portal ABCD Página web que opera o acesso a coleções de fontes de informação de dois ou mais tipos. Identidade Visual, cores e design Componente da pesquisa Coluna 1 Redes e ABCD Iniciativas Coluna 3 Destaques Noticias Rodapé: Informações Institucionais e Localização Coluna2 Redes de Fontes de Informação e Serviços Figura 2 Página inicial do portal ABCD No portal ABCD a página inicial de Tipo I é constituída por um conjunto de informações de componentes gerados dinamicamente de acordo a organização do conteúdo ou através de Web Services. Em páginas do Tipo I, os componentes estão distribuídos nas colunas da interface de acordo com a seguinte organização: Coluna 1 Redes: acesso às redes BVS e SciELO, e às iniciativas do ABCD organizadas por país. Coluna 2 Fontes de Informação: esta coluna organiza o acesso aos diferentes tipos de fontes de informação. Coluna 3 Áreas temáticas: esta coluna organizada o acesso por área temática e assunto, com uso privilegiado dos thesaurus Descritores em Ciências da Saúde (DeCS) 4 WAI 4

5 Coluna 4 Destaques e Notícias: coluna destinada à comunicação de destaques e noticias, privilegiando os conteúdos gerados no âmbito da "Rede de Notícias do ABCD" Tipo II ou Portal de Coleção ou Galeria Página que opera uma fonte de informação isolada ou uma coleção de fontes de informação do mesmo tipo. Por exemplo, bases de dados bibliográficas, diretório de eventos, etc. Tipo III ou Página de Resultados Página que opera a apresentação e a navegação nos resultados de operação sobre uma ou mais fontes de informação. A seguir, estão descritos os procedimentos para personalização de um site utilizando-se o sistema ABCD-Site v

6 Instruções para personalização (básico) A Interface do ABCD Site foi desenvolvida propiciando uma personalização fácil e rápida. Para tanto são necessários alguns conhecimentos básicos de CSS (Cascadind Style Sheets), linguagem de estilo utilizada pela Interface do ABCD Site. Também é aconselhável a utilização Programa para editar e tratar imagem, Editor de HTML e CSS Programa FTP cliente, para envio de imagens e arquivos para o servidor 5. Estrutura dos arquivos e pastas no servidor O Sistema ABCD Site utiliza uma estrutura de pastas para alocar os arquivos que utiliza, é necessário um breve conhecimento dessa estrutura para a personalização da interface. Figura 3 - Estrutura de Diretórios do ABCD-Site O diretório "bases", não será trabalhado neste Manual, pois é um diretório específico do sistema que não interfere na personalização da Interface, o diretório a ser trabalhado será o "htdocs" que contém dois diretórios específicos para personalização o "CSS" e o "image". 5 Recomendamos, como exemplo, alguns programas gratuitos 1. FileZilla FTP cliente 2. IrfanView 4.25 Editor de imagem 6

7 Figura 4 Diretórios a serem trabalhados O diretório "css" contém as folhas de estilo do ABCD Site. Para customizar a Interface será necessário fazer as alterações nas folhas de estilo do diretório common (figura 02), nela estão hospedados quatro arquivos de CSS que serão detalhados no tópico a seguir. O diretório image contém todas as imagens do ABCD Site, as imagens do diretório public/skins/classic são as que aparecem no ABCD Site que chamamos de públicas e está dividido em 5 subdiretórios: common: contém as imagens comuns em qualquer idioma do ABCD Site, são imagens que não são identificáveis em um único idioma. Exemplo: banner e fundos; en: contém os arquivos específicos do idioma inglês. Exemplo: logotipo do ABCD-site, títulos do site (quando produzidos como imagens), etc.; es: contém os arquivos específicos do idioma espanhol. Exemplo: Idem; fr: contém os arquivos específicos do idioma frances. Exemplo: Idem; pt: contém os arquivos específicos do idioma português. Exemplo: Idem; Estrutura das folhas de estilo As folhas de estilo do ABCD Site são divididas em 4 arquivos diferentes no diretório htdocs/site/css/public/skins/classic/common são eles: general.css nessa CSS estão os atributos gerais do site, como cor e tipo de fonte padrão utilizada no site. layout.css em layout definem-se os tamanhos, posições dos elementos, margens, etc. styles.css nessa CSS estão as definições de estilo do ABCD Site, cores dos elementos, imagem do banner, estilos tipográficos, bordas, etc. components.css - definições dos componentes do ABCD Site. Nesse arquivo pode se efetuar alterações em componentes específicos da Interface. Exemplo: mudar cor de um único componente como a "search box". As folhas de estilo são carregadas pelo sistema conforme a ordem apresentada anteriormente. Portanto uma alteração na última CSS a components subscreverá o elemento definido nas CSS s anteriores. É por isso que a components é a CSS que abriga as definições de elementos específicos. 7

8 Troca do Logo A Interface do BVS Site, quando instalada já vem com os logos do ABCD em seus respectivos diretórios, mas dependendo do layout será necessário produzi-los novamente. Recomenda-se usar logotipo no formato GIF que suporta transparência. Note que o logotipo deve estar disponível em todos os diferentes idiomas do seu site. Carga (upload) da imagem As imagens do logo deverão ser enviadas via transferência de arquivos para o diretório específico de cada idioma. Supondo que existe um logo geral do ABCD Site (independente do idioma), logoabcd.gif, então você deve carregá-lo em : /site/image/common/logoabcd.gif Porém, se o logo depende do idioma ( conta com texto) você deve desenvolver um para cada idioma: logoabcd_es.gif, logoabcd_pt.gif, etc. Estes arquivos devem ser enviados aos seus diretórios respectivos. File Directory logoabcd_en.gif htdocs/images/public/skins/classic/en/ logoabcd_es.gif htdocs/images/public/skins/classic/es/ logoabcd_pt.gif htdocs/images/public/skins/classic/pt/ logoabcd_fr.gif htdocs/images/public/skins/classic/fr/ Tabela 1 Upload dos logos. Troca da imagem no ADMIN Após o upload das imagens do logo o passo seguinte é efetivamente providenciar a substituição do logo na interface. Essa substituição é feita pelo Sistema de Administração do Site que está disponível através do endereço base do ABCD Site, acrescido de /admin. Portanto se a Interface estiver com o seguinte endereço " " o Sistema de Administração estará em " ". O Sistema pedirá um usuário e uma senha. Para a troca do logotipo deve-se acessar o link ABCD-Site logotipo" na área de estrutura do sistema de Administração do ABCD-Site e logo a seguir clicar e modificar o item que já estará habilitado no ABCD-Site. Figura 5 Etapas para a troca do Logotipo 8

9 A troca do logotipo é efetuada na janela a seguir: Rótulo: identifica o logotipo. Figura 6 Troca do logotipo Imagem: Imagem que será carregada no logotipo; Link: link que terá o logotipo. Após as configurações necessárias para efetuar as alterações é necessário confirmar as mesmas clicando em Modifica e efetuando a gravação de todas as etapas anteriores.! A troca do logotipo deverá ser efetuada em todos os idiomas habilitados no ABCD Site. A Sintaxe %SKIN_IMAGE_DIR% deve preceder o nome do arquivo do logotipo, esta sintaxe garante que o logotipo utilizado será o carregado pela skin criada. Troca do Banner No ABCD Site o banner é um dos elementos gráficos principais, é ele o responsável pela representação artística do conteúdo da Interface e pela correlação dos elementos, garantindo uma consistência do desenho com o conteúdo. O banner deverá conter apenas as imagens que serão inseridas em uma área comum e servirá como um elemento gráfico para todos os idiomas. A medida do banner é de 760 pixels de largura por 110 pixels de altura. Carga (upload) da imagem A imagem do banner deverá ser enviada via transferência de arquivos para o diretório de imagens common. 9

10 Configuração na CSS O banner está identificado no código XHTML no <div class="top"> Figura 7 - Localização do título no código XHTML As propriedades e configurações do banner estão descritas no arquivo styles.css sendo estas: Figura 8 Substituição do banner na CSS Para substituir o banner edite a propriedade background no seletor (.top) substituindo a imagem desejada e quando necessário fazendo os ajustes de cor. Alteração no título O título do ABCD Site é alterado pelo Sistema de Administração do Site que está disponível através do endereço base do ABCD Site, acrescido de /admin. Portanto se a Interface estive com o seguinte endereço "http://abcd_site.org " o Sistema de Administração estará em "http://abcd_site.org/admin ". O Sistema pedirá um usuário e uma senha. Para efetuar a troca do título da Interface é necessário clicar na opção "Identificação" presente na área de estrutura do sistema. O próximo passo é selecionar o título e clicar em modificar na janela que se abre a seguir. 10

11 Figura 9 Etapas a seguir para a alteração do título da Interface Após clicar em modificar o sistema abrirá uma janela onde se deve inserir o título do BVS Site ou uma imagem correspondente ao mesmo. Rótulo: Título do ABCD Site Figura 10 Inserindo um título ao ABCD Site Imagem: Imagem que represente o título do ABCD Site (casos especiais) Após as configurações necessárias para efetuar as alterações é necessário confirmar as mesmas clicando em Modifica e efetuando a gravação de todas as etapas anteriores.! A alteração do título do ABCD Site deverá ser efetuada em todos os idiomas habilitados no sistema. A alteração em um único idioma não altera os demais. 11

12 Configurando a CSS O título está identificado no código XHTML no <div id="identification"> Figura 11 - Localização do título no código XHTML Após a substituição do título no sistema de administração do ABCD Site, abaixo segue uma lista das alterações possíveis para o título do ABCD Site. Na CSS styles é possível mudar a cor e/ou tamanho do título no seletor.top #identification H1" alterando a propriedade color para mudar as cores e a propriedade font-size para alterar o tamanho do Título. Figura 12 Mudança de cor do título na CSS styles. Na CSS layout é possível alterar a posição e/ou o tamanho da área destinada ao título no seletor ".top #identification". Alterando o width é possível mudar o tamanho da largura da área destinada ao título e em height o tamanho da altura da área destinada ao título. Na mesma CSS é possível alterar as margens do título no seletor ".top #identification H1". Alterando as definições das margens na propriedade margin. Figura 13 - Exemplo de alterações de margens no título Instituições O campo instituições é o campo responsável por apresentar os nomes, logos e links (quando disponível) das instituições responsáveis pelo ABCD Site. 12

13 Quando a instituição for representada pelo seu logo se deve ter um cuidado em preparar a imagem, pois ela deve ser em formato GIF, pois esse formato suporta transparência. O tamanho definido na configuração padrão do ABCD Site é de 55 pixels de altura. Alterando as Instituições O campo instituições é alterado pelo Sistema de Administração do Site que está disponível através do endereço base do BVS Site, acrescido de /admin. Portanto se a Interface estive com o seguinte endereço "http://abcd_site.org " o Sistema de Administração estará em "http://abcd_site.org/admin ". O Sistema pedirá um usuário e uma senha. Para efetuar a substituição das instituições é necessário clicar na opção "Instituições" presente na área de estrutura do sistema. O próximo passo é selecionar a instituição e clicar em "modifica" na janela que se abre a seguir. Para inserir uma nova instituição é necessário clicar no campo "adiciona" na mesma janela Figura 14 Modificando as Instituições Após clicar em adiciona o sistema abrirá uma janela onde se deve inserir o título da instituição ou seu logo e o hiperlink. Figura 15 Caixa de inclusão ou alteração das instituições Nome: Nome da Instituição Imagem: Logo da Instituição (o uso de uma imagem suprime o nome da instituição) Link: Endereço eletrônico da instituição. 13

14 Após as configurações necessárias para efetuar as alterações é necessário confirmar as mesmas clicando em Modifica e efetuando a gravação de todas as etapas anteriores.! A Configurando a CSS inserção/alteração das instituições deverá ser efetuada em todos os idiomas habilitados no ABCD Site. A Sintaxe %SKIN_IMAGE_DIR% deve preceder o nome do arquivo do logotipo, esta sintaxe garante que o logotipo utilizado será o carregado pela skin criada. O campo instituições está identificado no código XHTML no <div id="institutionlist"> Figura 16 Localização do campo Instituições no código-fonte. Após a configuração do campo "instituições", alguns ajustes na CSS podem ser necessários. As definições das instituições são encontradas no seletor ".top #institutionlist" presentes nas CSS s styles e layout. Na CSS style estão definidas as cores e tamanhos conforme abaixo: Figura 17 Exemplo de ajustes de cores e fontes das instituições text-align define o alinhamento do texto dentro da área destinada às instituições; list-style definida como none por se tratar de uma lista é comum o uso de bullets, mas como essa lista é disposta em linha esses bullets foram retirados; font-size: Define o tamanho da fonte; text-decoration: aqui pode-se definir se o texto será sublinhado ou não; color: define a cor da fonte das instituições. (não se aplica aos logos). 14

15 Configurações de fontes e cores As famílias de fontes tipográficas utilizada na interface do site são Trebuchet MS e Verdana, pois de acordo com recomendações habituais feitas, possibilitam uma excelente legibilidade nos tamanhos habitualmente utilizados na Web. São fontes "sem serifa" e, portanto, altamente recomendada para leitura em telas de computador, e já vem instaladas na maioria dos sistemas operacionais. Utiliza-se, alternativamente, a família Arial que possui as mesmas características básicas. Através de CSS é possível redefinir as famílias tipográficas. As definições genéricas das fontes encontram-se no arquivo general.css, como mostra a figura a seguir: Figura 18 Seletores responsáveis pelas fontes na CSS. Para modificar a fonte, redefina a propriedade font-family dos seletores BODY, INPUT, TEXTAREA, SELECT e H1, H2, H3 como mostrado na imagem. As configurações do tamanho das fontes encontram-se no mesmo arquivo e estão definidas no atributo font-size. Na instalação padrão do ABCD-Site as cores das fontes não estão definidas na css. Para isso, é necessário criar dentro dos seletores o campo color. Seguem abaixo, exemplos para definição das cores nos seletores. Figura 19 Exemplos de definições de cores nos seletores Note que nos dois primeiros seletores não há definição de cores para os elementos ali descritos, assumindo a cor preta para todos os elementos tipográficos do site. 15

16 Abaixo, um exemplo da definição de cores e o resultado no site. Figura 20 Definições de cores na CSS e resultado no site. Configurações do rodapé Na instalação padrão do ABCD-Site 4.0.2, o rodapé contém as informações institucionais, localização e formas de contato. Para alterar essas informações, é necessário entrar na área de administração do site. A área de administração está disponível através do endereço base do seu ABCD, acrescido de "admin ". Portanto, se o endereço for bastando acrescentar "admin ao final da URL para entrar na área de administração do ABCD, por exemplo: "http://abcd_site.org/admin. Estrutura Aplica-se ao gerenciamento de dados informativos sobre a BVS (nomenclatura, rótulos, idiomas) bem como a organização dos componentes (fontes de informação, temas e comunidades) etc. Para a alteração do conteúdo do rodapé clique em instituição responsável, como mostra a figura abaixo: Figura 21 Etapa para a alteração do rodapé 16

17 Em seguida selecione a instituição responsável e clique em modifica Figura 22 Selecionando a instituição responsável Em seguida, será aberta uma janela contendo as informações do rodapé. Para facilitar as edições do texto selecione o editor de XHMTL (clique aqui para usar o editor XHTML), conforme exemplifica a imagem abaixo: Figura 23 Editando as informações do Rodapé Feito isso, é possível modificar as informações em um editor de texto onde estão disponíveis diversas ferramentas de formatação semelhantes ao Word. 17

18 Configurando a CSS Figura 24 Editando as informações em um editor de texto As configurações do rodapé encontram-se no código XHTML <div id= footnotes > Figura 25 Localização da estrutura do rodapé no código fonte. As configurações de cores de fundo, cor e tamanho da fonte estão definidas no arquivo styles.css, nos seguintes seletores: 18

19 Figura 26 Localização da estrutura do rodapé no código fonte. Anexo I (Avançado) Layout Fluído e Layout Fechado Chamaremos layout fluído (fluid layout) a imagem do site ocupa 100% da área de trabalho, incluindo a redefinição da janela, a apresentação e o tamanho se adaptam ao novo formato. Layout fechado (closed layout) é a que ocupa uma parte da área, uma área fixa, que independe do tamanho da área de trabalho. Figura 27 Layout fluído e layout fechado Na instalação do ABCD site, o layout inicial é o fluído. A CSS que define as configurações da página está no arquivo \ABCD\www\htdocs\site\css\public\skins\classic\common\layout.css, na linha.container 19

20 Figura 28 Modelo de layout fluído No código acima não temos definido a largura do container, o que caracteriza o layout fluído (fluid layout) a imagem do site ocupa 100% da área de trabalho, incluindo a redefinição da janela, a apresentação e o tamanho se adaptam ao novo formato. Layout fechado (closed layout) é a que ocupa uma parte da área, uma área fixa, independente do tamanho da área de trabalho. Abaixo, um exemplo da definição da largura do.container e do layout da página resultante. Figura 29 Modelo de layout fechado Para definição da cor de fundo do site, modifique o arquivo \ABCD\www\htdocs\site\css\public\skins\classic\common\general.css na linha BODY -> backgorund pela cor que deseja. A seguir um exemplo de definição de cor de fundo (backgorund) no corpo (body) e seu visual no site web. 20

21 Figura 30 Modelo de layout fechado com aplicação de cor de fundo cinza Configuração de Colunas As estruturas das colunas estão idenficadas no código XHTML como firstcolumn, secondcolumn e thirdcolumn. Figura 31 Colunas As propriedades de configuração do tamanho das colunas estão definidas no arquivo layout.css, como: Figura 32 Configuração das colunas 21

22 Para aumentar ou diminuir a largura das colunas modifique o campo width em cada um dos seletores (.middle.firstcolumn,.middle.secondcolumn,.middle.thirdcolumn) para os valores desejados.a imagem abaixo mostra a redefinição dos valores: Figura 33 Exemplo de redefinição de largura das colunas No arquivo styles.css também pode se mudar a cor de fundo (background) das colunas, cores e tamanho das bordas (border-top, border-left ) e tamanho da fonte(font-size). Para alterar, editar o seletor:.firstcolumn DIV,.secondColumn.centerLeftColumn DIV,.secondColumn.centerRightColumn DIV,.thirdColumn DIV, #search, #searchconcepts,.level2.middle DIV. Figura 34 Trocando as cores das colunas na CSS 22

23 A seguir exemplo de alteração dos seletores mencionados acima Figura 35 Demonstração de troca de cores das colunas na CSS 23

BIREME / OPAS / OMS. Centro Latino-Americano e do Caribe de Informação em Ciências da Saúde. Metodologias da BVS. Guia de Desenho Gráfico da BVS

BIREME / OPAS / OMS. Centro Latino-Americano e do Caribe de Informação em Ciências da Saúde. Metodologias da BVS. Guia de Desenho Gráfico da BVS BIREME / OPAS / OMS Centro Latino-Americano e do Caribe de Informação em Ciências da Saúde Metodologias da BVS Guia de Desenho Gráfico da BVS Versão 4.0 Sao Paulo - Março 2008 Copyright Março 2008 - BIREME

Leia mais

Interface BVS-Site. Arquiteturta e Personalização da Interface

Interface BVS-Site. Arquiteturta e Personalização da Interface Interface BVS-Site Arquiteturta e Personalização da Interface Julio Takayama takayama@bireme.ops-oms.org Desenho Gráfico e Interfaces DGI-GA BIREME/PAHO/WHO Tópicos Arquitetura da BVS Modelo de Interfaces

Leia mais

Manual de Administração ABCD-Site. Versão 4.0.2

Manual de Administração ABCD-Site. Versão 4.0.2 [Digite texto] Manual de Administração ABCD-Site Versão 4.0.2 Sumário Objetivos do Capítulo...Erro! Indicador não definido. Introdução... 3 Características gerais do sistema... 3 Acesso... Erro! Indicador

Leia mais

BVS Site. Aplicativo para geração de portais BVS. Cláudia Guzzo Patrícia Gaião

BVS Site. Aplicativo para geração de portais BVS. Cláudia Guzzo Patrícia Gaião BVS Site Aplicativo para geração de portais BVS Cláudia Guzzo Patrícia Gaião Gerência de Produção de Fontes de Informação / Projetos e Instâncias da BVS BIREME/OPAS/OMS Biblioteca Virtual em Saúde (BVS)

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com No início A Web é criada em 1989, para ser um padrão de publicação e distribuição de textos científicos e acadêmicos.

Leia mais

Avaliação da BVS Homeopatia

Avaliação da BVS Homeopatia Centro Latino-Americano e do Caribe de Informação em Ciências da Saúde Organização Pan-Americana da Saúde Organização Mundial da Saúde Documento Base de Avaliação de Instância da BVS São Paulo - Dezembro

Leia mais

> Herbet Ferreira Rodrigues > contato@herbetferreira.com

> Herbet Ferreira Rodrigues > contato@herbetferreira.com Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação

Leia mais

MANUAL JOOMLA 2.5 PORTAL INTERNET. Ministério do Esporte

MANUAL JOOMLA 2.5 PORTAL INTERNET. Ministério do Esporte MANUAL JOOMLA 2.5 PORTAL INTERNET Ministério do Esporte SUMÁRIO 1.0 - Módulo Administração... 1 2.0 Banner randômico... 2 2.1 Adicionar novo slide... 2 2.2 Excluir slide... 6 3.0 Artigos... 7 3.1 Adicionar

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

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

Esse manual é um conjunto de perguntas e respostas para usuários(as) do Joomla! 1.5.

Esse manual é um conjunto de perguntas e respostas para usuários(as) do Joomla! 1.5. Esse manual é um conjunto de perguntas e respostas para usuários(as) do Joomla! 1.5. Ele considera que você já tem o Joomla! instalado no seu computador. Caso você queira utilizá lo em um servidor na web,

Leia mais

Aula 1 Desenvolvimento Web. Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme

Aula 1 Desenvolvimento Web. Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Aula 1 Desenvolvimento Web Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Plano de Aula Ementa Avaliação Ementa Noções sobre Internet. HTML

Leia mais

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe

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

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

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Sumário HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Linguagem HTML HTML é a abreviação de HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação de Hipertexto. Não é uma linguagem

Leia mais

QUEM FEZ O TRABALHO?

QUEM FEZ O TRABALHO? Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome

Leia mais

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br Desenvolvimento Web Saymon Yury C. Silva Analista de Sistemas http://www.saymonyury.com.br Vantagens Informação em qualquer hora e lugar; Rápidos resultados; Portabilidade absoluta; Manutenção facilitada

Leia mais

Aplicativos para Internet Aula 01

Aplicativos para Internet Aula 01 Aplicativos para Internet Aula 01 Arquitetura cliente/servidor Introdução ao HTML, CSS e JavaScript Prof. Erika Miranda Universidade de Mogi das Cruzes Uso da Internet http://www.ibope.com.br/pt-br/noticias/paginas/world-wide-web-ou-www-completa-22-anos-nesta-terca-feira.aspx

Leia mais

PRnet/2013. Linguagem de Programação Web

PRnet/2013. Linguagem de Programação Web Linguagem de Programação Web Linguagem de Programação Web Prnet/2013 Linguagem de Programação Web» Programas navegadores» Tipos de URL» Protocolos: HTTP, TCP/IP» Hipertextos (páginas WEB)» HTML, XHTML»

Leia mais

Curso de Desenvolvimento Web com HTML5, CSS3 e jquery

Curso de Desenvolvimento Web com HTML5, CSS3 e jquery Curso de Desenvolvimento Web com HTML5, CSS3 e jquery Professor: Marcelo Ricardo Minholi CH: 32 horas anuais (4 dias de 8 horas) Umuarama - 2012 Fundamentação Teórica: HTML (acrônimo para a expressão inglesa

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

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 Customização Acionar modo debug 3 Propriedades Básicas 10 Arquivos de Customização 15 2 Customização Intermediário Com a definição do posicionamento

Leia mais

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS é uma linguagem para estilos (formatação) que define o layout de documentos HTML. CSS controla fontes, cores, margens,

Leia mais

Adaptação de materiais digitais. Manuela Francisco manuela.amado@gmail.com

Adaptação de materiais digitais. Manuela Francisco manuela.amado@gmail.com Adaptação de materiais digitais Manuela Francisco manuela.amado@gmail.com Plano da sessão Tópicos Duração Documentos acessíveis: porquê e para quem. Diretrizes de acessibilidade Navegabilidade, legibilidade

Leia mais

WWW - World Wide Web

WWW - World Wide Web WWW World Wide Web WWW Cap. 9.1 WWW - World Wide Web Idéia básica do WWW: Estratégia de acesso a uma teia (WEB) de documentos referenciados (linked) em computadores na Internet (ou Rede TCP/IP privada)

Leia mais

Passo-a-Passo Curso do Sistema Eletrônico de Editoração de Revistas para Editor-Gerente

Passo-a-Passo Curso do Sistema Eletrônico de Editoração de Revistas para Editor-Gerente Passo-a-Passo Curso do Sistema Eletrônico de Editoração de Revistas para Editor-Gerente Versão do OJS/SEER 2.3.4 Universidade Federal de Goiás Sistema de Bibliotecas da UFG (SiBi) Gerência de Informação

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

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

EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}

EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: Times New Roman, serif;} Fontes A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina

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

Templates. Existem vários frameworks e softwares para criação de templates, sendo os mais conhecidos: Gantry, T3 e Artisteer.

Templates. Existem vários frameworks e softwares para criação de templates, sendo os mais conhecidos: Gantry, T3 e Artisteer. Templates Template ou tema, é a camada de visão de qualquer programa orientado a objetos, isto mesmo, template não é uma exclusividade do Joomla! Fim manter um padrão de nomenclatura, irei utilizar o termo

Leia mais

Microsoft Internet Explorer. Browser/navegador/paginador

Microsoft Internet Explorer. Browser/navegador/paginador Microsoft Internet Explorer Browser/navegador/paginador Browser (Navegador) É um programa que habilita seus usuários a interagir com documentos HTML hospedados em um servidor web. São programas para navegar.

Leia mais

Linux. Educacional. Tutorial Buzzword

Linux. Educacional. Tutorial Buzzword Linux Educacional Tutorial Buzzword Para trabalhar com o programa Buzzword online, é necessário que crie uma conta no site. Para isso acesse o endereço - https://buzzword.acrobat.com/ Para criar uma conta

Leia mais

Scientific Electronic Library Online Sistema SciELO de Publicação Guia do usuário

Scientific Electronic Library Online Sistema SciELO de Publicação Guia do usuário Scientific Electronic Library Online Sistema SciELO de Publicação Guia do usuário São Paulo, junho de 2007 1º Versão SUMÁRIO 1 Introdução... 3 2 Autor... 5 2.1 Cadastro no sistema (http://submission.scielo.br),

Leia mais

Manual WordPress. Conteúdo Índice. Capítulo 1 Introdução. Capítulo 2 Conceitos básicos do Painel. Capítulo 3 Gerenciamento de Posts ( Artigos)

Manual WordPress. Conteúdo Índice. Capítulo 1 Introdução. Capítulo 2 Conceitos básicos do Painel. Capítulo 3 Gerenciamento de Posts ( Artigos) Manual WordPress Conteúdo Índice Capítulo 1 Introdução Sobre o WordPress Características principais Capítulo 2 Conceitos básicos do Painel Logando no Painel de Controle Alterando Usuário e Senha Painel

Leia mais

CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13

CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 CSS Sérgio Nunes Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 1 Objetivos Conhecer as origens e os objetivos da linguagem CSS. Conhecer a estrutura base de uma regra CSS. Compreender

Leia mais

Web design & HTML. avançado

Web design & HTML. avançado Web design & HTML avançado Helder da Rocha Rev.: WDHT-03-2000/04 A4 (ASIT) Copyright 1998, 1999, 2000 por Helder Lima Santos da Rocha. Todos os direitos reservados. Os direitos do autor sobre esta obra

Leia mais

UM NOVO CONCEITO EM AUTOMAÇÃO. Série Ponto

UM NOVO CONCEITO EM AUTOMAÇÃO. Série Ponto UM NOVO CONCEITO EM AUTOMAÇÃO Série Ponto POR QUE NOVO CONCEITO? O que é um WEBPLC? Um CP na WEB Por que usar INTERNET? Controle do processo de qualquer lugar WEBGATE = conexão INTERNET/ALNETII WEBPLC

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Prof. André Yoshimi Kusumoto andrekusumoto.unip@gmail.com http://www.kusumoto.com.br Apresentação Carga horária mensal:

Leia mais

Web Design. Prof. Felippe

Web Design. Prof. Felippe Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre

Leia mais

Construindo Sites com. CSS e (X)HTML. sites controlados por folhas de estilo em cascata. Maurício Samy Silva. Novatec

Construindo Sites com. CSS e (X)HTML. sites controlados por folhas de estilo em cascata. Maurício Samy Silva. Novatec Construindo Sites com CSS e (X)HTML sites controlados por folhas de estilo em cascata Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...14 Introdução...16 Para quem foi escrito este

Leia mais

02 - Usando o SiteMaster - Informações importantes

02 - Usando o SiteMaster - Informações importantes 01 - Apresentação do SiteMaster - News Edition O SiteMaster foi desenvolvido para ser um sistema simples de gerenciamento de notícias, instalado em seu próprio computador e com configuração simplificada,

Leia mais

Roteiro 2: Conceitos de Tags HTML

Roteiro 2: Conceitos de Tags HTML Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias

Leia mais

Programação para Internet

Programação para Internet Programação para Internet Aula 07 Os direitos desta obra foram cedidos à Universidade Nove de Julho Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos

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

Autoria Web Apresentação e Visão Geral sobre a Web

Autoria Web Apresentação e Visão Geral sobre a Web Apresentação e Visão Geral sobre a Web Apresentação Thiago Miranda Email: mirandathiago@gmail.com Site: www.thiagomiranda.net Objetivos da Disciplina Conhecer os limites de atuação profissional em Web

Leia mais

Introdução à Informática

Introdução à Informática Introdução à Informática Aula 23 http://www.ic.uff.br/~bianca/introinfo/ Aula 23-07/12/2007 1 Histórico da Internet Início dos anos 60 Um professor do MIT (J.C.R. Licklider) propõe a idéia de uma Rede

Leia mais

Unidade: O que é CSS? HTML e CSS? Boa aula!!!

Unidade: O que é CSS? HTML e CSS? Boa aula!!! Unidade: O que é CSS? HTML e CSS? Boa aula!!! Objetivo Construir: Padrões Web, Tableless e outros Como inserir o CSS nas páginas Sintaxe de utilização do CSS Tag DIV e tag SPAN Orientações Durante a explanação

Leia mais

Facilidade e flexibilidade na web

Facilidade e flexibilidade na web Facilidade e flexibilidade na web palavras-chave: acessibilidade, usabilidade, web 2.0 Tersis Zonato www.tersis.com.br Web 2.0 o termo de marketing x a nova forma de conhecimento Web 2.0 O conceito começou

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

FACULDADE PARAÍSO DO CEARÁ Jonas Pinto Esteves CRIANDO APLICAÇÕES WEB RESPONSIVAS COM INTERFACE HTML5 VOLTADAS PARA DISPOSITIVOS MOBILE

FACULDADE PARAÍSO DO CEARÁ Jonas Pinto Esteves CRIANDO APLICAÇÕES WEB RESPONSIVAS COM INTERFACE HTML5 VOLTADAS PARA DISPOSITIVOS MOBILE FACULDADE PARAÍSO DO CEARÁ Jonas Pinto Esteves CRIANDO APLICAÇÕES WEB RESPONSIVAS COM INTERFACE HTML5 VOLTADAS PARA DISPOSITIVOS MOBILE Juazeiro do Norte CE 2012 Jonas Pinto Esteves CRIANDO APLICAÇÕES

Leia mais

Sumário. Os Créditos que Faltavam Introdução

Sumário. Os Créditos que Faltavam Introdução Sumário Os Créditos que Faltavam Introdução Parte Um: Bem-vindo à Web Capítulo 1: Preparação para a web 9 Apresentação da World Wide Web 9 Navegadores 10 Servidores web 14 Planejamento de um website 15

Leia mais

XHTML 1.0 DTDs e Validação

XHTML 1.0 DTDs e Validação XHTML 1.0 DTDs e Validação PRnet/2012 Ferramentas para Web Design 1 HTML 4.0 X XHTML 1.0 Quais são os três principais componentes ou instrumentos mais utilizados na internet? PRnet/2012 Ferramentas para

Leia mais

Monday, January 23, 12. Introdução sobre Acessibilidade na web

Monday, January 23, 12. Introdução sobre Acessibilidade na web Introdução sobre Acessibilidade na web Acessibilidade na web é o consumo da informação por qualquer pessoa por qualquer tipo de meio de acesso. Para que serve a web? A web serve para compartilhar informação.

Leia mais

REITORA Ulrika Arns. VICE-REITOR Almir Barros da Silva Santos Neto. DIRETOR DO NTIC Leonardo Bidese de Pinho

REITORA Ulrika Arns. VICE-REITOR Almir Barros da Silva Santos Neto. DIRETOR DO NTIC Leonardo Bidese de Pinho REITORA Ulrika Arns VICE-REITOR Almir Barros da Silva Santos Neto DIRETOR DO NTIC Leonardo Bidese de Pinho COORDENAÇÃO DE APOIO AO USUÁRIO Pierre Correa Martin 1 UNIVERSIDADE FEDERAL DO PAMPA NTIC NÚCLEO

Leia mais

1 2 3 W O R K S H O P 4 5 6 W O R K S H O P 7 W O R K S H O P 8 9 10 Instruções gerais para a realização das Propostas de Actividades Para conhecer em pormenor o INTERFACE DO FRONTPAGE clique aqui 11 CONSTRUÇÃO

Leia mais

Módulo 11 A Web e seus aplicativos

Módulo 11 A Web e seus aplicativos Módulo 11 A Web e seus aplicativos Até a década de 90, a internet era utilizada por acadêmicos, pesquisadores e estudantes universitários para a transferência de arquivos e o envio de correios eletrônicos.

Leia mais

Sistema Eletrônico de Editoração de RevistasSEER

Sistema Eletrônico de Editoração de RevistasSEER Sistema Eletrônico de Editoração de RevistasSEER O SEER foi traduzido e customizado pelo Instituto Brasileiro de Informação em Ciência e Tecnologia (IBICT) baseado no software desenvolvido pelo Public

Leia mais

MANUAL. Perfil de Professor

MANUAL. Perfil de Professor MANUAL Perfil de Professor Índice 1. Acesso 1.1. Acessando o Canal do Norte... 03 2. Disciplinas 2.1. Acessando Disciplinas... 07 3. Recursos 3.1. Adicionando Recursos... 10 3.2. Página de texto simples...

Leia mais

REITORA Ulrika Arns. VICE-REITOR Almir Barros da Silva Santos Neto. DIRETOR DO NTIC Leonardo Bidese de Pinho

REITORA Ulrika Arns. VICE-REITOR Almir Barros da Silva Santos Neto. DIRETOR DO NTIC Leonardo Bidese de Pinho REITORA Ulrika Arns VICE-REITOR Almir Barros da Silva Santos Neto DIRETOR DO NTIC Leonardo Bidese de Pinho COORDENAÇÃO DE APOIO AO USUÁRIO Sandro da Silva Camargo UNIVERSIDADE FEDERAL DO PAMPA NTIC - NÚCLEO

Leia mais

O que torna a Web interessante?? Web Design: Visão Geral e Diretrizes. O que torna a Web interessante?? Qual o desafio?? Usuários detestam...

O que torna a Web interessante?? Web Design: Visão Geral e Diretrizes. O que torna a Web interessante?? Qual o desafio?? Usuários detestam... O que torna a Web interessante?? Web Design: Visão Geral e Diretrizes??? Interação Usuário-Computador (SCE-224) Prof. Rudinei Goularte O que torna a Web interessante?? Informação não-linear Textos + Gráficos

Leia mais

Plano de Trabalho Docente 2014. Ensino Técnico

Plano de Trabalho Docente 2014. Ensino Técnico Plano de Trabalho Docente 2014 Ensino Técnico ETEC PROF. MASSUYUKI KAWANO Código: 136 Município: TUPÃ Eixo Tecnológico: INFORMAÇÃO E COMUNICAÇÃO Habilitação Profissional: TÉCNICA DE NÍVEL MÉDIO DE TÉCNICO

Leia mais

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

Manual de utilização do Portal Entrelace.org.br. William Oyama www.evisionbrasil.com.br

Manual de utilização do Portal Entrelace.org.br. William Oyama www.evisionbrasil.com.br Manual de utilização do Portal Entrelace.org.br William Oyama www.evisionbrasil.com.br Índice do tutorial 1 Portal entrelace.obr.br 2- Painel Administrativo 3- Informações Restritas 4- Acervo 5- Notícias

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 Thunderbird e Terra Nesta terceira edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos do webmail

Leia mais

Observações importantes:

Observações importantes: Fundação CECIERJ - Vice Presidência de Educação Superior a Distância Curso de Tecnologia em Sistemas de Computação Disciplina Criação de Páginas de WEB AD1 1 semestre de 2014. Observações importantes:

Leia mais

Introdução à Cascading Style Sheets

Introdução à Cascading Style Sheets Estilo e Produtividade para Websites OVERVIEW História e Significado Por que usar? Como usar? Orientações ao Desenvolvedor O que é CSS? O que é CSS? Cascading Style sheets" ou "Folhas de Estilo Encadeadas

Leia mais

LABORATÓRIO DE INTERNET FRONTPAGE

LABORATÓRIO DE INTERNET FRONTPAGE I LABORATÓRIO DE INTERNET FRONTPAGE Prof. Antonio Geraldo da Rocha Vidal II SUMÁRIO Introdução...3 Construindo um Web Site...4 Iniciando...4 Administrando o Site...5 Navegação...5 Trabalhando com Páginas...6

Leia mais

Tiago/Costa/ Web & Graphic Designer

Tiago/Costa/ Web & Graphic Designer Tiago/Costa/ Web & Graphic Designer Proposta comercial de 2 sites dinâmicos com painel de controle para: CDV Indíce Premissa Front-end Back-end Metodologia Manutenção preventiva Cronograma Investimento

Leia mais

JOOMLA V3.2 PARA INICIANTES

JOOMLA V3.2 PARA INICIANTES JOOMLA V3.2 PARA INICIANTES Material desenvolvido para uso no ensino da plataforma Joomla para alunos de graduação do Instituto de Arquitetura e Urbanismo de São Carlos Autor: Daniel Picon Versão 1.1 -

Leia mais

Anexo III Funcionamento detalhado do Sistema Montador de Autoria

Anexo III Funcionamento detalhado do Sistema Montador de Autoria 1 Sumário Anexo III Funcionamento detalhado do Sistema Montador de Autoria Anexo III Funcionamento detalhado do Sistema Montador de Autoria... 1 1 Sumário... 1 2 Lista de Figuras... 5 3 A Janela principal...

Leia mais

M a n u a l d o R e c u r s o Q m o n i t o r

M a n u a l d o R e c u r s o Q m o n i t o r M a n u a l d o R e c u r s o Q m o n i t o r i t i l advanced Todos os direitos reservados à Constat. Uso autorizado mediante licenciamento Qualitor Porto Alegre RS Av. Ceará, 1652 São João 90240-512

Leia mais

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com. #Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Apresentar os conceitos de utilização do CSS, Sintaxe, Seletores

Leia mais

Editor HTML. Composer

Editor HTML. Composer 6 Editor HTML 6 Composer Onde criar Páginas Web no Netscape Communicator? 142 A estrutura visual do Composer 143 Os ecrãs de apoio 144 Configurando o Composer 146 A edição de Páginas 148 Publicando a sua

Leia mais

Unidade 4 Concepção de WEBSITES. Fundamentos do planeamento de um website 1.1. Regras para um website eficaz 1.1.1.

Unidade 4 Concepção de WEBSITES. Fundamentos do planeamento de um website 1.1. Regras para um website eficaz 1.1.1. Unidade 4 Concepção de WEBSITES Fundamentos do planeamento de um website 1.1. Regras para um website eficaz 1.1.1. Sobre o conteúdo 1 Regras para um website eficaz sobre o conteúdo Um website é composto

Leia mais

Acessar a aplicação... 2. Permissões de Acesso... 3

Acessar a aplicação... 2. Permissões de Acesso... 3 Sumário Acessar a aplicação... 2 Permissões de Acesso... 3 Seu Perfil... 3 Criar Conteúdo... 3 Alterar Conteúdo... 5 Administrar artigos... 5 Enviar Arquivo (jpg, gif, doc, pdf)... 6 Manual... 8 Ferramentas

Leia mais

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Mini-curso de PHP Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Aula 1 Breve introdução de HTML, Conceitos básicos de PHP, Sintaxe, Separador de instruções e Comentários (Cap 1

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

Google Docs EDITOR DE TEXTOS

Google Docs EDITOR DE TEXTOS Google Docs Um destes serviços oferecidos é o Google Docs, uma espécie de suíte de aplicativos online, bastante semelhante ao Microsoft Office e ao OpenOffice.org/BrOffice.org. O serviço da Google possui

Leia mais

Acessibilidade no SIEP (Sistema de Informações da Educação Profissional e Tecnológica) Módulo de Acessibilidade Virtual CEFET Bento Gonçalves RS Maio 2008 ACESSIBILIDADE À WEB De acordo com Cifuentes (2000),

Leia mais

Programação para Internet

Programação para Internet Programação para Internet Aula 09 Os direitos desta obra foram cedidos à Universidade Nove de Julho Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos

Leia mais

Apresentação Prática

Apresentação Prática Apresentação Prática Este curso contém exercícios com editor de texto Word e também exemplos de acesso à Internet e deve ser utilizado para a apresentação do Método de ensino a pessoas que já tenham tido

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

Utilizamos um tema no Mais Fórmula 1 que possui algumas peculiaridades. Irei explicar passo-a-passo cada uma delas.

Utilizamos um tema no Mais Fórmula 1 que possui algumas peculiaridades. Irei explicar passo-a-passo cada uma delas. Mais Fórmula 1 Instruções de postagem no Mais Fórmula 1. O Mais Fórmula 1 está hospedado na UOL HOST e é gerenciado pelo Wordpress. O Wordpress é um dos melhores sistemas de gerenciamento de conteúdo do

Leia mais

Aula 5 Cabeçalhos, Imagens e Links

Aula 5 Cabeçalhos, Imagens e Links Roteiro Aula 5 Cabeçalhos, Imagens e Links Efeitos em cabeçalhos Imagens e CSS Links Curso: Técnico em Informática / 2º Módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Efeitos

Leia mais

Manual do Usuário Publicador

Manual do Usuário Publicador Manual do Usuário Publicador Portal STN SERPRO Superintendência de Desenvolvimento SUPDE Setor de Desenvolvimento de Sítios e Portais DEDS2 Versão 1.1 Fevereiro 2014 Sumário Sobre o Manual... 3 Objetivo...

Leia mais

Tecnologias da Informação e Comunicação 10.º ano. Criação de Páginas da Teia Mundial

Tecnologias da Informação e Comunicação 10.º ano. Criação de Páginas da Teia Mundial Criação de Páginas da Teia Mundial Manual do NVU Data desta versão: 2006/05/04 Autores: S. Alves, J. Borges, M. Gaspar, R. Vaz Supervisão: S. Ramos Escola Secundária c/ 3.º C.E.B. Dr. Mário Sacramento,

Leia mais

MINISTÉRIO DA EDUCAÇÃO SECRETARIA DE EDUCAÇÃO PROFISSIONAL E TECNOLÓGICA INSTITUTO FEDERAL DO PARANÁ CÂMPUS IRATI PROJETO DO CURSO DE PROGRAMADOR WEB

MINISTÉRIO DA EDUCAÇÃO SECRETARIA DE EDUCAÇÃO PROFISSIONAL E TECNOLÓGICA INSTITUTO FEDERAL DO PARANÁ CÂMPUS IRATI PROJETO DO CURSO DE PROGRAMADOR WEB MINISTÉRIO DA EDUCAÇÃO SECRETARIA DE EDUCAÇÃO PROFISSIONAL E TECNOLÓGICA INSTITUTO FEDERAL DO PARANÁ CÂMPUS IRATI PROJETO DO CURSO DE PROGRAMADOR WEB IRATI 2012 SUMÁRIO 1 - IDENTIFICAÇÃO DO PROJETO...

Leia mais

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Imagens

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Imagens IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage SeçãodoCorpo Imagens ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger SeçãodoCorpo Imagens Índice

Leia mais

Páginas... 31 Pasta / Menu... 33 Coleção... 34 Como tornar uma página o conteúdo principal de um menu ou pasta... 37 IV. Produtos adicionais...

Páginas... 31 Pasta / Menu... 33 Coleção... 34 Como tornar uma página o conteúdo principal de um menu ou pasta... 37 IV. Produtos adicionais... Índice I. Introdução... 4 Puxa que bom, mas o que é um CMS?... 5 O Plone... 6 Usabilidade... 6 Acessibilidade... 6 Padrões... 6 Segurança... 6 Open Source... 6 Sobre este manual... 7 Requisitos... 7 Importante...

Leia mais

CSS. Oficina de CSS Aula 10. Cascading Style Sheets. Cascading Style Sheets Roteiro. Cascading Style Sheets. Cascading Style Sheets W3C

CSS. Oficina de CSS Aula 10. Cascading Style Sheets. Cascading Style Sheets Roteiro. Cascading Style Sheets. Cascading Style Sheets W3C Roteiro Oficina de Aula 10 s Selos de conformidade Prof. Vinícius Costa de Souza www.inf inf.unisinos..unisinos.br/~vinicius outubro de 2006 W3C São um conjunto de normas, diretrizes, recomendações, notas

Leia mais

Acessibilidade na Web

Acessibilidade na Web Acessibilidade na Web Departamento de Computação - UFS Tópicos Especiais em Sistemas de Informação Lucas Augusto Carvalho lucasamcc@dcomp.ufs.br Prof. Rogério Vídeo Custo ou Benefício? http://acessodigital.net/video.html

Leia mais

História e Evolução da Web. Aécio Costa

História e Evolução da Web. Aécio Costa Aécio Costa A História da Web O que estamos estudando? Período em anos que a tecnologia demorou para atingir 50 milhões de usuários 3 As dez tecnologias mais promissoras 4 A evolução da Web Web 1.0- Passado

Leia mais

28 de dezembro de 2003

28 de dezembro de 2003 Padrões Web e Tableless Marcelo Toledo 28 de dezembro de 2003 O HTML, HyperText Markup Language ou Linguagem de Marcação HiperTexto, foi criado para marcar um texto através

Leia mais

Home Page da Estação Automática do IF-SC

Home Page da Estação Automática do IF-SC Home Page da Estação Automática do IF-SC Ana Paula Jorge Fraga Email: anaa_fraga@hotmail.com Artur da Silva Querino E-mail: arturquerino@gmail.com Kathilça Lopes de Souza E-mail: kathii16@hotmail.com Rayana

Leia mais

Conceitos Fundamentais de Microsoft Word. Professor Rafael rafampsilva@yahoo.com.br www.facebook.com/rafampsilva

Conceitos Fundamentais de Microsoft Word. Professor Rafael rafampsilva@yahoo.com.br www.facebook.com/rafampsilva Conceitos Fundamentais de Microsoft Word Professor Rafael www.facebook.com/rafampsilva Introdução É um editor de texto ou processador de texto? editores de texto: editam texto (assim como uma máquina de

Leia mais

Conteúdo Programático do Web Design

Conteúdo Programático do Web Design Conteúdo Programático do Web Design O Ambiente Macromedia Dreamweaver Instalação do Dreamweaver Arquivos Utilizados na Apostila A Inicialização de Dreamweaver Área de Trabalho Dreamweaver Criação de uma

Leia mais

Manual pra quê? O que move uma marca? Ela é movida pela CONFIANÇA E PERCEPÇÃO DE VALOR POR SEUS CONSUMIDORES.

Manual pra quê? O que move uma marca? Ela é movida pela CONFIANÇA E PERCEPÇÃO DE VALOR POR SEUS CONSUMIDORES. Manual pra quê? O que move uma marca? Ela é movida pela CONFIANÇA E PERCEPÇÃO DE VALOR POR SEUS CONSUMIDORES. E a marca HEAVYLOAD transmite essa confiança e, também, cria essa percepção! Em cada momento

Leia mais