Planejamento e Criação de Sites

Slides:



Advertisements
Apresentações semelhantes
A Imagem (Parte II) Prof. AMOUSSOU DOROTHÉE
Advertisements

Fundamentos da Representação de Informações em Computadores
BITS ++ E A CORREÇÃO GAMA
Exemplos Imagens em formato Gif JPEG.
Tecnologia Hipermídia e Multimídia Prof. Rudson Faculdade de Excelência Educacional do Rio Grande do Norte CURSO DE GRADUAÇÃO TECNOLÓGICA EM DESENVOLVIMENTO.
CSS ( Folhas de Estilo).
Formação da imagem digital
Iana Alexandra Alves Rufino
Prof. Carlos H. Marcondes
ESCOLA DE CIÊNCIA DA INFORMAÇÃO CURSO DE BIBLIOTECONOMIA
1 Universidade Federal de Minas Gerais JPEG Alessandra e Aline.
Wagner Santos C. de Jesus Roberto Cordeiro Walts
Design Leis do design Impressão e mídia digital
Cor Sensações da cores Tipos de cores Alguns termos técnicos
Criação Gráfica Sistema de Cores.
7 - Criação de Páginas Web
Introdução É simples colocar a cor em projetos? Porque? - Complexidade.
OSA - Operação de Software e Aplicativos
Estamos em Obras!! Construindo o conceito de web 2.0.
Teoria da Cor.
Camadas/ modos.
Imagem: Cores.
Formatos de Imagem - PNG
Lafayette B. Melo – CEFET-PB - COINFO Para entender o design como uma atividade profissional que contribui no estudo de Interfaces Web é preciso entender.
HTML Técnicas em Programação para Internet
Aulas ministradas por:
Aula02 TAGS Estrutura de uma página html Como salvar página web
HTML Construindo páginas.
Edição de imagens em formato digital
Introdução à Tecnologia Apresentação 5 Componentes Aditiva e Subtractiva da Imagem.
Layout.
Visite nosso site ! - Soluções em Geoprocessamento Distribuidor autorizado da MicroImages.
1ª Aula de Html Íria Albuquerque.
Exemplos Imagens em formato Gif JPEG
Ferramentas de Multimídia e Internet
Visite nosso site ! - Soluções em Geoprocessamento Distribuidor autorizado da MicroImages.
Guilherme Defreitas Juraszek
2.3 COR NO DESIGN A cor não tem existência material e é considerada muitas vezes como apenas um fenômeno da luz Os seus estudos passaram pela filosofia,
HTML HyperText Markup Language Uma linguagem de marcação.
Multimédia Imagem digital
A COR “O olho é a janela do corpo humano pela qual ele abre os caminhos e se deleita com a beleza do mundo.” (Leonardo da Vinci ) A cor expressa.
Prof. Dejair Priebe Ferreira da Silva. Webdesign aula 2 Webdesign x Design Impresso O que diferencia um do outro?
MICROSOFT Windows XP.
07/04/2017 Linux Ubuntu 2.
TEC. DESENVOLVIMENTO WEB Prof.: Jean Carlo Mendes
HTML 1ª aula.
Escola de Engenharia de Piracicaba Sistemas de Apoio a Decisão
 A tag define o elemento da raiz do documento.  É aquele que tem toda a informação da página.  Diz ao browser para iniciar um novo documento (página.
Carlos Alves 12ºB Maio/2013. O mundo da geração e captura de imagens divide as imagens em dois grandes grupos: As imagens baseadas num mapa de bits e.
A Imagem (Parte I) Prof. AMOUSSOU DOROTHÉE
WIC’ 2015-I WorkShop para o Ingressante em Ciência da Computação Curso de Desenvolvimento para WEB – HTML5.
Clicando com o mouse, você verá o passo a passo
Síntese aditiva Baseia-se na adição de luz, por forma a obter cores cada vez mais claras até se atingir o branco. É o sistema utilizado em espetáculos,
TECNOLOGIA WEB XHTML Aula 5 Profa. Rosemary Melo.
Navegação Poder ir para qualquer lugar e sempre voltar a home. Repetição e consistência dos elementos de navegação. Onde você está? Mais de uma maneira.
IMAGENS As imagens devem ser escaneadas (digitalizadas) com resolução de 300 DPI. Abaixo disso são reproduzidas com baixa qualidade. Acima disso o jornal.
Abrindo um projeto Clique em Arquivo → Salvar como Não esqueça de modificar o nome, colocando um nome que identifique o projeto. Salve seu projeto em mais.
O que é CSS? O CSS (Cascading Style Sheets) ou Folhas de Estilo em Cascatas é uma documentação que define as regras de formatação que serão aplicadas aos.
MENU ARQUIVO Comando Imprimir Imprimi o documento atual # Impressora
Trabalho de informática
Links, Textos e Ancoras Profª Kelly E. Medeiros.
Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 30/5/ :10 1 Listas Numeradas As listas numeradas funcionam da mesma forma que as listas.
Capítulo 14 Camada 6 A Camada de Apresentação. Sumário A Camada de Apresentação.
Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 30/5/ :57 1 ATRIBUTOS DE Através de atributos de, podemos definir cores para os textos,
A COR.  Cor é a impressão que a luz reflectida ou absorvida pelos corpos produz nos olhos. A cor branca representa as sete cores do espectro: vermelho,
TV de Bolso TV de Bolso apresenta Tutorial: editando seu vídeo no Movie Maker.
1 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/ :38 Prof. João Ricardo Anrêo O TAG - que será usado dentro dos tags, e servirá apenas.
Photoshop Básico - Aula 3: Salvando a imagem Por Oswaldo Hernandez e Douglas Ribeiro Lemos.
Aplicações Informáticas A 11º Ano Unidade 3 – Utilização do Sistema Multimédia.
Noções de cores Cor é como o olho dos seres vivos animais interpreta a reemissão da luz vinda de um objeto que foi emitida por uma fonte luminosa por meio.
Transcrição da apresentação:

Planejamento e Criação de Sites Sistema de Cores

Sistema de Cores RGB RGB é a abreviatura do sistema de cores aditivas formado por Vermelho (Red), Azul (Blue) e Verde (Green). É utilizado em meios que têm fundo escuro, como o monitor e a televisão. As cores são as complementares do sistema CMYK e a sua mistura forma a cor branca.

Tabela de Cores RGB O código RGB (Red - Green - Blue) informa a quantidade de luz vermelha, verde e azul que compõe a cor, respectivamente. Este valor é representado em número hexadecimal, onde os bytes que variam de 00 (ausência da cor) a FF (maior intensidade da cor), estão divididos em três grupos. Cada grupo pode variar até 256 tons da cor que ele representa. Os tons podem ser misturados com os tons de outras cores e o total de combinações possíveis é de 256 x 256 x 256 = 16.777.216. Exemplo: #FF0000 é vermelho #00FF00 é verde #0000FF é azul #000000 é preto (ausência das cores) #FFFFFF é branco (a soma de todas elas)

Sistema de Cores CMYK CMYK é a abreviatura do sistema de cores subtrativas formado por Ciano (Cyan), Amarelo (Yellow), Magenta (Magenta), e Preto (blacK). É utilizado em meios que têm fundo branco, como as impressões em papel. CMY é a mesma coisa, porém sem a cor preta. O resultado da sobreposição das três cores, na impressão gráfica, é uma cor intermediária entre o cinza e o marrom; por isso mesmo considera-se o preto a quarta cor primária.

Observação Importante A exibição correta das cores depende da capacidade do vídeo onde serão vistas. Poucos sistemas têm capacidade de mostrar mais que 65.536 cores simultâneas. Se seu browser não suporta algumas cores, você não poderá ver a amostra da cor perfeitamente. Por este motivo, as cores exibidas podem variar de sistema para sistema, dependendo de diversos fatores de software e hardware.

Exemplo: Imagem com 24bits = 24 bits por pixel de imagem 1 bit = 2 cores (ex.preto e branco) 8 bit = 256 cores (ex.tons de cinza) 16 bit = 65.536 cores 24 bit = 16.777.216 cores

Sintaxe HTML Além do código RGB, as cores também podem ser configuradas através dos nomes padrão da paleta VGA conforme o modelo abaixo: FORMATO SINTAXE RESULTADO #RRGGBB <FONT COLOR=#AA77CC>TEXTO</FONT> TEXTO OU VGA <FONT COLOR=yellow>TEXTO</FONT> TEXTO

Cores Combináveis: Importante Dicas de Sites: http://www.geocities.com/ensinandohtml/cores_html.htm http://www1.uol.com.br/images/coresrgb.htm http://www.ufpa.br/dicas/html-cor.htm http://www.cultura.ufpa.br/dicas/htm/htm-cor1.htm Cores Combináveis: Importante http://www.pypbr.com/html/cores_combinam.asp

Paleta VGA red ff0000 maroon 800000 lime 00ff00 green 008000 blue NOME PADRÃO CÓDIGO  red ff0000 maroon 800000  lime 00ff00  green 008000  blue 0000ff  navy 000080  yellow ffff00  olive 808000  aqua 00ffff  teal 008080  fuchsia ff00ff  purple 800080  white ffffff  silver c0c0c0  black 000000  gray 808080

Formato de Imagens JPEG O formato JPEG, é um dos mais populares, principalmente para fotos na Web. Ele tem duas características importantes: * A primeira é que o JPEG utiliza um esquema de compressão que sofre uma perda de qualidade ajustável, muita compressão, muita perda, pouca compressão, pouca perda. * Um detalhe importante é que se uma foto em JPEG for aberta e depois salva novamente, cada vez que é salva torna a ser comprimida, o que gera mais perda. Portanto, a perda de qualidade é acumulativa. Uma recomendação quando se trabalha com imagens em JPEG é salvar um original em TIFF, e somente no momento de disponibilizá-la para WEB gravar a imagem em JPEG.

Novos Formatos O formato de imagem JPEG pouco tem mudado desde que surgiu. Contudo, recentemente se trabalhou num novo projeto de formato JPEG pelo Digital Imaging Group (DIG).O novo formato JPEG tem 20% a mais de compressão com menos perda de qualidade, ou seja, ficou ainda melhor. Contudo, ainda não está sendo utilizado pelos softwares mais importantes. Sua extensão pode ser J2K ou JP2

Formato de Imagens TIFF O formato TIFF (Tag Image File Format), foi originalmente desenvolvido para salvar imagens capturadas por scanners e para uso em programas editores de imagens. Este formato, sem compressão e sem perda de qualidade, é largamente aceito e praticamente reconhecido por qualquer software e sistema operacional, impressoras, etc. Além disso, é o formato preferido para aplicações em editoração eletrônica.

Formato de Imagens 2kb GIF O formato GIF é amplamente usado na Internet, mas principalmente para artes e desenhos, não para fotografias. Este formato armazena apenas 256 cores numa tabela chamada “palette”. Contudo, em termos de fotografia, podemos deixá-lo de lado a não ser que se pretenda exibir uma animação. Outra característica importante é que o fundo pode ser transparente, para isso é preciso especificar que cor da tabela será assim considerada; quando o browser abrir a imagem, substituirá a cor selecionada como transparente pelo que estiver sendo apresentado na janela do browser sob a imagem. Quanto à animação, uma imagem em GIF consegue simular um pequeno filme, o que pode tornar interessante para uso com fotos. Só que a resolução tem que ser baixíssima, e a qualidade muito ruim, já que apenas 256 cores serão apresentadas (ou até menos). Caso contrário, será muito demorado de carregar a imagem e o visitante pode se desinteressar

Flash ou html? Como decidir qual o melhor formato para um site pessoal ou para uma empresa? O que você quer com o seu site? Antes de escolher a tecnologia que vai aplicar no site devemos ter em mente o porque de estar construindo uma marca na internet de tal maneira.

Exemplos de sites HTML

Exemplo de sites em Flash Esses exemplos nos fazem entender como a Proposta de um site influencia na escolha da tecnologia: na hora de escolher que caminho seguir na construção do seu site, estude os propósitos do seu site.

Integração Flash e HTML A maioria dos portais hoje em dia utilizam a integração entre as duas tecnologias: banners supersofisticados feitos em tecnologia Flash são inseridos nos sites feitos na tradicional linguagem HTML. Relação peso x resultado Outro fator importante deve ser o peso do arquivo final: o site HTML mesmo programado na maioria das vezes é mais leve que um site todo feito em Flash. Nesse ponto, um site HTML leva uma relativa vantagem. O seu peso tem que se adequar as necessidades do usuário.

Definições: A tecnologia Flash nos dá imensas possibilidades multimídia mas em casos onde a informação é mais importante elas de nada seriam úteis. No html podemos dispor as informações de forma fácil e descomplicada Muitas vezes é mais importante a organização das informações do que a “casca” do site