Professional Documents
Culture Documents
Brasil
rede
E Ferramentas de pintura
Pincel (B) Lpis (B) Substituio de cor (B) Pincel Misturador (B) Pincel do Histrico (Y) Pincel HIstria da Arte (Y) Gradiente (G) Lata de tinta (G)
A B C
E D
C
C Ferramentas de medio
Conta-gotas (I) Classicador de cores (I) Rgua (I) Observao (I) Contagem (I)
D Ferramentas de retoque
Pincel de recuperao para manchas (J) Pincel de recuperao (J) Correo (J) Olhos vermelhos (J) Carimbo (S) Carimbo de padro (S) Borracha (E) Borracha de plano de fundo (E) Borracha mgica (E) Desfoque Nitidez Borrar Subexposio (O) Superexposio (O) Esponja (O)
G Ferramentas de navegao
e 3D
Girar objeto 3D (K) Rolar objeto 3D (K) Deslocar objeto 3D (K) Deslizar objeto 3D (K) Escalar objeto 3D (K) Girar cmera 3D (N) Rolar cmera 3D (N) Deslocar cmera 3D (N) Mover cmera 3D (N) Aplicar zoom na cmera 3D (N) Mo (H) Girar visualizao (R) Zoom (Z) Somente Extended
e-Tec
Brasil
rede
Manaus - AM 2012
Centro de Educao Tecnolgica do Amazonas Este Caderno foi elaborado em parceria entre o Centro de Educao Tecnolgica do Amazonas e a Universidade Federal de Santa Catarina para a Rede e-Tec Brasil.
Equipe de Elaborao Centro de Educao Tecnolgica do Amazonas CETAM Coordenao Institucional Adriana Lisboa Rosa/CETAM Laura Vicua Velasquez/CETAM Coordenao do Curso Helder Cmara Viana/CETAM Professor-autor Carlos Fbio Rocha Marinho/CETAM Comisso de Acompanhamento e Validao Universidade Federal de Santa Catarina UFSC Coordenao Institucional Araci Hack Catapan/UFSC Coordenao do Projeto Silvia Modesto Nassar/UFSC Coordenao de Design Instrucional Beatriz Helena Dal Molin/UNIOESTE e UFSC
Coordenao de Design Grfico Andr Rodrigues/UFSC Design Instrucional Juliana Leonardi/UFSC Web Master Rafaela Lunardi Comarella/UFSC Web Design Beatriz Wilges/UFSC Mnica Nassar Machuca/UFSC Diagramao Brbara Zardo/UFSC Juliana Tonietto/UFSC Marlia C. Hermoso/UFSC Nathalia Takeuchi/UFSC Reviso Jlio Csar Ramos/UFSC Projeto Grfico e-Tec/MEC
Catalogao na fonte elaborada pela DECTI da Biblioteca Central da Universidade Federal de Santa Catarina
M338f Marinho, Carlos Fbio Rocha Fundamentos de Web Design e formatao de imagem / Carlos Fbio Rocha Marinho. Manaus : CETAM, 2012. 62 p. : il. tabs. Inclui bibliografia ISBN: 978-85-63576-38-5 1.Sites da Web Projetos. 2. Computao grfica. 3. Animao por computador. I. Ttulo. CDU: 681.31:62(084) 681.31.066.1
e-Tec Brasil
Indicao de cones
Os cones so elementos grficos utilizados para ampliar as formas de linguagem e facilitar a organizao e a leitura hipertextual. Ateno: indica pontos de maior relevncia no texto.
Saiba mais: oferece novas informaes que enriquecem o assunto ou curiosidades e notcias recentes relacionadas ao tema estudado. Glossrio: indica a definio de um termo, palavra ou expresso utilizada no texto. Mdias integradas: sempre que se desejar que os estudantes desenvolvam atividades empregando diferentes mdias: vdeos, filmes, jornais, ambiente AVEA e outras. Atividades de aprendizagem: apresenta atividades em diferentes nveis de aprendizagem para que o estudante possa realiz-las e conferir o seu domnio do tema estudado.
e-Tec Brasil
Sumrio
Palavra do professor-autor Apresentao da disciplina Projeto instrucional Aula 1 Internet e web design 1.1 A internet 1.2 O que e para que serve um website 1.3 Servio de web design 1.4 Orientaes para fazer um site 1.5 Briefing para desenvolvimento de websites 1.6 O que arquitetura de informao em websites? 1.7 Diviso e alocao de contedo Aula 2 Edio e publicao de sites 2.1 Um esqueleto chamado HTML 2.2 Entendendo o que CSS 2.3 Editores de HTML 2.4 Gerando uma pequena pgina HTML 2.5 Publicar uma pgina na web 2.6 Protocolo de FTP 2.7 Cliente de FTP Aula 3 A imagem 3.1 Fotografia digital 3.2 Gerao da imagem digital 3.3 Tipos de compactao 9 11 13 15 15 16 18 19 21 24 24 27 27 28 32 34 35 36 37 41 41 41 46
e-Tec Brasil
Aula 4 Edio e tratamento de imagens 4.1 Editor de imagens 4.2 Como instalar o Adobe Photoshop 4.3 rea de trabalho do Photoshop 4.4 Caixa de ferramentas 4.5 Ferramentas de seleo 4.6 Ferramentas medidas, comentrios e transformao 4.7 Ferramentas de pintura 4.8 Ferramentas de texto e desenho 4.9 Ferramentas de correes e retoques 4.10 Trabalhando com camadas 4.11 Estilos efeitos de camada 4.12 Filtros Referncias Currculo do professor-autor
49 49 50 53 55 56 56 57 57 58 58 59 59 60 62
e-Tec Brasil
Palavra do professor-autor
Caro aluno! O objetivo deste caderno apresentar conceitos bsicos e auxili-lo da melhor maneira a compreender: o que web design, para que servem, quais so os recursos necessrios e algumas tcnicas para confeccionar websites. Aprender propriedades, caractersticas e recursos de manipulao de imagens digitais para publicao na web. Por meio deste estudo, voc poder absorver e aumentar seu conhecimento atravs de pesquisas, leitura, prticas e discusses. No desenvolvimento desta disciplina, sero propostas vrias atividades relacionadas ao contedo de cada aula estudada. Busque participar ativamente e sempre envie suas dvidas ao tutor. As atividades sero realizadas tanto neste caderno impresso como no Ambiente Virtual de Ensino-aprendizagem (AVEA). Essas atividades sero de grande importncia na construo dos conceitos que sero apresentados para que voc possa ser capaz de constru-los juntando a teoria com a prtica. Minha participao ser de orient-lo, apoi-lo e acompanh-lo em seu processo de aprendizagem, orientando-o em suas necessidades e dvidas. Bom estudo e muito sucesso! Professor Carlos Fbio Rocha Marinho
e-Tec Brasil
Apresentao da disciplina
O advento da internet trouxe-nos a realidade de novas profisses, nunca antes imaginadas. O web design uma das reas que mais tem se desenvolvido atualmente entre as reas profissionais da web, pois atravs dela que so construdas as pginas que divertem, ensinam, informam, denunciam, vendem, enfim, compem e promovem a dinmica da internet. Dominar os conceitos apresentados neste curso oferecer ao aluno possibilidades de manipular recursos que lhe permitiro utilizar a internet como meio de comunicao e ampliar sua capacidade tcnica, dentro se sua rea de atuao. O conhecimento sobre imagens permitir ao aluno entender as possibilidades do que se pode realizar, com base em conceitos que usurios comuns no possuem, capacitando-o manipulao adequada dessas imagens para fins especficos de utilizao para web. Portanto, esta disciplina tem como objetivo principal introduzir o aluno aos conceitos bsicos de web design e formatao de imagens estudando algumas das suas principais funcionalidades.
11
e-Tec Brasil
Projeto instrucional
Disciplina: Fundamentos de Web Design e Formatao de Imagens (carga horria: 60 h). Ementa: Breve histrico sobre a origem da internet, apresentar e definir tipos de websites, conhecer o mtodo de entrevista para definio de contedo e tipo de website. Arquitetura da informao para alocao de contedo e otimizao da navegao. Apresentao do cdigo HTML, conhecimento do ambiente de um editor HTML, entender a formatao com CSS, apresentar o processo de publicao de uma pgina web. Conhecer processo de transferncia de arquivos e apresentar o ambiente de um cliente de FTP. Conceitos sobre imagem e fotografia digital, resoluo, profundidade de bits, tipos de imagem e modos de compactao de arquivos. Instalao e apresentao do ambiente de um editor de imagens, ferramentas de seleo, medidas, comentrios, transformao, pintura, texto, desenho, correo e retoques. Apresentar o recurso de camadas e de efeitos de camadas. Apresentao dos filtros predefinidos para alterao imediata de imagens.
OBJETIVOS DE APRENDIZAGEM
CARGA HORRIA (horas)
AULA
MATERIAIS
Hiperdocumento apresentando uma breve histria da internet e o protocolo TCP/IP.
Aprender conceitos bsicos sobre internet website e web design. Aprender os elementos que compem um projeto de web design.
Vdeo apresentando a profisso web design e a arquitetura da informao. Apresentao de hiperligaes para outros sites na internet sobre o tema.
10
Conhecer conceitos bsicos sobre as linguagens de marcao e formatao de pginas web. Aprender o processo de publicao de pginas web.
Hiperdocumento apresentando as linguagens HTML e CSS; Vdeos apresentando editores HTML, tutoriais de instalao e conceitos sobre domnio hospedagem e acesso via FTP. 20
13
e-Tec Brasil
AULA
OBJETIVOS DE APRENDIZAGEM
Aprender conceitos sobre imagem digital e suas caractersticas.
MATERIAIS
10
Compreender as principais funcionalidades e opes de edio e tratamento de imagens de um aplicativo de edio de imagens.
Hiperdocumento apresentando o painel de ferramentas de um editor de imagens. Vdeos apresentando as ferramentas seleo e retoque e os recursos de camadas e filtros de um editor de imagens. 20
e-Tec Brasil
14
1.1 A internet
Segundo a Wikipdia (HISTRIA..., 2011), a internet um conglomerado de redes em escala mundial de milhes de computadores interligados pelo TCP/IP que permite o acesso a informaes e todo tipo de transferncia de dados. Ela carrega uma ampla variedade de recursos e servios, incluindo os documentos interligados por meio de hiperligaes da World Wide Web, e a infraestrutura para suportar correio eletrnico e servios como comunicao instantnea e compartilhamento de arquivos.
15
e-Tec Brasil
ou menos anrquica. basicamente isto que consiste a internet, que no tem um dono especfico, ou seja, de domnio pblico. Em 1992 Cientista Tim Berners-Lee, do CERN, criou o termo World Wide Web para definir a rede mundial de computadores.
Aprenda um pouco mais sobre a histria da internet. Acesse o vdeo didtico disponvel no endereo: http://www.youtube. com/watch?v=yyY_392Tn7Q O protocolo TCP/IP o responsvel pela troca de informaes entre os computadores que se interligam atravs da internet. Para entender o funcionamento desse sistema de comunicao, acesse o endereo: http://www. clubedohardware.com.br/ artigos/1351
e-Tec Brasil
16
contexto deixava claro que se estava falando da web, dizia-se apenas: site. J na lngua portuguesa, esse qualificativo no necessrio em momento algum, pois a palavra site um anglicismo novo em nosso vocabulrio e tem o nico e mesmo significado de website, embora a grafia induza a erro, pois pronuncia-se: saite. Os sites da internet, em geral, podem ter os seguintes propsitos: a) Institucional muitas empresas usam seus sites como ponto de contato entre uma instituio e seus clientes, fornecedores, etc. No caso de instituies comerciais, usam-se sites tambm para comrcio eletrnico, recrutamento de funcionrios etc. Instituies sem fins lucrativos tambm usam seus sites para divulgar seus trabalhos, informar a respeito de eventos etc. H tambm o caso dos sites mantidos por profissionais liberais, para publicarem seus trabalhos. b) Informaes veculos de comunicao como jornais, revistas e agncias de notcias utilizam a internet para veicular notcias, por meio de seus sites. Jornalistas freelancer e indivduos comuns tambm publicam informaes na internet, por meio de blogs e podcasts. c) Aplicaes existem sites cujo contedo consiste de ferramentas de automatizao, produtividade e compartilhamento, substituindo aplicaes de desktop. Podem ser processadores de texto, planilhas eletrnicas, editores de imagem, softwares de correio eletrnico, agendas, etc. d) Armazenagem de informaes alguns sites funcionam como bancos de dados, que catalogam registros e permitem efetuar buscas, podendo incluir udio, vdeo, imagens, softwares, mercadorias, ou mesmo outros sites. Alguns exemplos so os sites de busca, os catlogos na internet e os Wikis, que aceitam tanto leitura quanto escrita. e) Comunitrio so os sites que servem para a comunicao de usurios com outros usurios da rede. Nesta categoria se encontram os chats, fruns e sites de relacionamento. f) Portais so chamados de portais os sites que congregam contedos de diversos tipos entre os demais tipos, geralmente fornecidos por uma mesma empresa. Recebem esse nome por congregarem a grande maioria dos servios da internet num mesmo local.
17
e-Tec Brasil
e-Tec Brasil
18
Se considerarmos que a internet um meio de comunicao, a coisa complica um pouco mais, porque teremos que considerar quem visitar, como essas pessoas sero atradas para visitar o site e qual o contedo ideal para exibio no site que est sendo desenvolvido. A captao de servio tambm outro assunto importante sobre o qual ainda no falamos. E para essa atividade seria necessrio que o desenvolvedor tivesse tambm um perfil para a rea de vendas, para entrevistar o cliente e traduzir essas informaes em um layout funcional, leve e agradvel. Administrar todas essas informaes e ainda desenvolver o site propriamente dito torna a atividade de desenvolvimento de website muito trabalhosa e multidisciplinar para ser realizada por uma pessoa somente. Atualmente existem muitas empresas atuando no ramo de web design, pois esta uma rea promissora e que, se bem aproveitada, gera resultados fabulosos. Para formar uma equipe de desenvolvimento de web design, precisaramos de profissionais para desenvolver as seguintes reas: 1. 2. 3. 4. 5. 6. 7. 8. 9. Publicidade Direo de arte Designer para criao Designer para animao e multimdia Redao e reviso Programao Marketing digital Atendimento Prospeco e vendas
Algumas empresas que no possuem todos esses profissionais em seu quadro funcional optam por contratar freelancers para suprir essa necessidade temporria, dependendo do tamanho e do valor de cada projeto de websdesign.
Freelance trabalho avulso realizado por profissional autnomo, geralmente para empresa jornalstica, agncia de publicidade, editora, entre outros; Freelancer o profissional que realiza freelance.
19
e-Tec Brasil
a) Seja simples manter a simplicidade no significa ter um site feio, significa reduzir ao mximo a quantidade de informaes visuais desnecessrias, para que o site seja fcil de usar e prenda o interesse do visitante. b) Uma imagem vale mais do que mil palavras essa frase tambm verdadeira para a criao de um site. Sempre que possvel, use imagens, pois ningum quer investir muito tempo para ler textos interminveis. c) Evite informao em excesso pginas com muita informao prejudicam a visualizao, pois tendem a sobrecarregar e confundir o leitor. Isso tambm verdadeiro para imagens. Muitas imagens fazem os olhos dos visitantes perderem o foco. Faa sempre o teste de funcionalidade: olhe para a sua pgina e veja se consegue, de forma rpida, obter a informao que precisa. d) Em construo? Jamais! nunca coloque links no seu site que levem o visitante a pginas que ainda no foram feitas e que esto em construo. Nada pior do que frustrar o visitante vido por informaes. e) Mantenha o seu site atualizado modifique periodicamente o contedo do site, para que as pessoas voltem a visit-lo. Um site que no atualizado deixar de ser visitado por no ter o que apresentar de novo. f) Utilize um boletim de notcias crie uma lista na qual os visitantes possam subscrever e receber boletins de notcias do seu site. Nada melhor do que manter o contato com aqueles que tm interesse no seu produto ou servio. g) No utilize bonequinhos rebolando, bolinhas saltando, cones voando pela pgina nunca use esse tipo de recurso para decorar o seu site. Websites com esses efeitos passam uma imagem de amadorismo e o visitante no ter confiana em realizar operaes comerciais ou contratar servios. h) Evite Java e Flash no os utilize como elementos principais de um site. Se o site depender desses elementos no conseguir ser classificado, de forma adequada, nos motores de busca e isso poder levar o utilizador a desistir de entrar, pois so elementos que podem causar o bloqueio de computadores ou a lentido excessiva no carregamento da pgina.
e-Tec Brasil
20
i) Seu site deve carregar rpido pesquisas mostram que se um site no apresentar alguma informao para prender a ateno do visitante num perodo de 15 a 30 segundos, o visitante cancela o carregamento e vai para outro endereo. Por isso importante que o seu site carregue o mais rpido possvel. j) Facilite a comunicao lembre-se sempre de que a funo principal de todo o material que um designer cria, seja para a web ou no, comunicar. Para haver comunicao, trs coisas principais precisam ocorrer: 1) todas as letras precisam ser lidas e compreendidas; 2) os textos precisam ser claros e objetivos; 3) os desenhos (imagens, cones, ilustraes e grafismos) precisam ser vistos claramente e os seus propsitos percebidos. Se esse mnimo no for atingido, a comunicao falhou.
21
e-Tec Brasil
e-Tec Brasil
22
b) Briefing complementar serve para detalhar tudo o que foi aprendido por voc sobre o negcio, produto ou empresa de seu cliente. As perguntas que formam essa segunda parte da entrevista lhe fornecero informaes mais completas e confiveis. importante deixar claro, desde o incio, que vocs precisaro de um tempo maior para esse segundo encontro; certamente a pessoa ficar satisfeita com sua sinceridade e feliz por poder fornecer mais informaes que, consequentemente, faro com que o resultado final do projeto seja melhor. As perguntas desse briefing podem ser divididas da seguinte maneira: estratgia; informaes gerais; pblico-alvo; contedo; aparncia (design); outras informaes.
23
e-Tec Brasil
Assista ao vdeo sobre arquitetura da informao para web design, acessando o endereo: http://www.youtube. com/watch?v=5ha3B25LRXg Para entender sistema de navegao, acesse o endereo: http://www.timaster.com.br/ revista/artigos/main_artigo. asp?codigo=1229&pag=2
e-Tec Brasil
24
b) O produtor de contedo deve com eficincia transmitir a mensagem em uma linguagem simples, porm respeitando todos os conceitos gramaticais. c) O processo de produo de contedo deve estar de acordo com a mdia web de comunicao a que se destina. Veja algumas caractersticas importantes no desenvolvimento do seu website, extradas da pgina Projetos de aplicaes web (2002): a) Objetividade Desenvolva resumos, em linguagem simples, para cada item na estrutura. Desenvolva textos completos para o assunto, quando necessrio. Textos mais extensos, que tratem de assuntos especficos, devem ser disponibilizados no formato PDF para que o usurio possa baixar e/ou ler em modo off-line. Aplique o recurso do hipertexto sem exageros nos links que possam comprometer o entendimento e acesso informao. b) Legibilidade (ler) Legibilidade deficiente: segundo pesquisa do Instituto Nielsen, ler na Web 25% mais difcil em comparao leitura no papel, por causa da resoluo da tela. Textos on-line so mais bem lidos com sentenas curtas e estrutura gramatical simples, satisfazendo rapidamente o visitante. Sugira atalhos que permitam a expedio exploratria, se assim o visitante desejar. Os links devem ter relacionamentos coerentes entre si, para no confundir o leitor. c) Visibilidade (ver) Dar visibilidade a informaes importantes no contexto da aplicao fundamental para estabelecer a comunicao. Cada elemento deve ser construdo respeitando as regras de simetria e ordem de importncia de leitura para uma melhor seleo visual. No d para mostrar tudo na pgina principal; por isso, essa pgina deve exibir aquilo que de maior relevncia e que no pode deixar de ser visto.
Website wireframe facilita muito a criao de layouts para pginas web. Entenda este recurso, acessando o endereo: http://pt.wikipedia.org/wiki/ Website_wireframe
25
e-Tec Brasil
d) Navegabilidade (o que? onde?) Planejar fundamental para no criar verdadeiros becos sem sada. Evite que o acesso entre uma seo e outra passe pela pgina principal. Evite navegao que force o visitante a passar por vrias pginas at chegar informao desejada. Planejar a navegao de um site fundamental para que o visitante visualize com facilidade todo o contedo disponvel na aplicao web. O ideal o que o leitor no precise dar mais de trs cliques para obter a informao que deseja, segundo Bill Skeet, projetista norte-americano na rea de novas mdias.
Resumo
Nesta aula voc pde conhecer a origem da internet, conceitos de web design, dicas sobre construo de sites e tipos de site. Aprendeu tcnicas de coleta de informaes para determinar a funcionalidade do site, gerar contedo para aliment-lo e organizar a informao para ter um site com bom visual e boa leitura.
Atividade de aprendizagem
1. Responda o que se pede. Ao finalizar a atividade, poste no AVEA. a) Qual a importncia da internet atualmente como meio de comunicao na vida pessoal e profissional das pessoas? b) Baseado nos conhecimentos que adquiriu, escreva com suas prprias palavras qual a funo de um site na web? c) Qual a importncia de um briefing para o projeto de um site? d) Por que a arquitetura da informao importante na construo de sites? e) O que e para que serve um wireframe na construo de um website? Defina tambm navegao global e navegao local. 2. Faca uma pesquisa na internet e escreva sobre os protocolos HTTP e FTP. Elabore um texto com definies, caractersticas e funes desses protocolos. Ao finalizar a atividade, poste no AVEA.
e-Tec Brasil
26
Isso necessrio porque as etiquetas servem para definir a formatao de uma poro do documento, e assim marcamos onde comea e termina o texto com a formatao especificada por ela. Uma etiqueta formada por comandos, atributos e valores. Os atributos modificam os resultados padres dos comandos e os valores definem caractersticas dessa mudana. Exemplo:
27
e-Tec Brasil
onde: HR = [comando] desenha uma barra horizontal color = [atributo] especifica que a barra ter uma cor red = [valor do atributo] define qual ser a cor atribuda barra, no caso vermelha. Cada etiqueta (TAG) um comando que pode receber atributos possveis e seus valores correspondentes. Um exemplo o atributo SIZE que pode ser usado com o comando FONT, com o HR, mas que no pode ser usado com o comando BODY. Isso quer dizer que devemos saber quais so os atributos e valores possveis para cada comando para poder utiliz-los corretamente. Uma propriedade importante dos documentos HTML a possibilidade de fazer hiperligaes. Para isso usa-se a etiqueta <a> (do ingls, anchor). Esta tem os atributos: href que define o alvo da hiperligao (que pode ser um endereo da web, um link para baixar um arquivo ou um endereo de e-mail para envio de mensagens) ou name (que exibe uma parte da mesma pgina que est sendo acessada), como mostram os exemplos a seguir:
XHTML (eXtensible Hypertext Markup Language) dever ser o sucessor do HTML. uma reformulao da linguagem de marcao HTML, que combina as tags de marcao HTML com regras da XML. Esse processo de padronizao tem o objetivo de permitir a exibio de pginas web em diversos dispositivos como: televiso, palm, celular, entre outros, para ampliar a acessibilidade. Para aprender mais sobre essa linguagem, acesse: http://maujor.com/ tutorial/xhtml.php
A linguagem de marcao HTML um poderoso recurso de formatao, sendo muito simples e acessvel em sua utilizao, voltada para a produo e compartilhamento de documentos e imagens atravs da internet.
e-Tec Brasil
28
Como voc pode notar, os cdigos HTML e CSS so mais ou menos parecidos. O exemplo acima serve tambm para demonstrar o fundamento do modelo CSS. Um conjunto de regras CSS forma uma Folha de Estilos. Uma regra CSS, na sua forma mais elementar, compe-se de trs partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme o exemplo a seguir:
Para inserir o CSS a um documento HTML, temos trs maneiras distintas. O mtodo mais utilizado atualmente, pela praticidade e pela eficincia, o terceiro mtodo, ou seja o mtodo externo.
29
e-Tec Brasil
a) Mtodo 1: In-line (o atributo style) Uma maneira de aplicar CSS pelo uso do atributo style do HTML. Tomando como base o exemplo mostrado anteriormente, a cor vermelha para o fundo da pgina pode ser aplicada conforme mostrado a seguir:
b) Mtodo 2: Interno (a tag <style>) Uma outra maneira de aplicar CSS pelo uso da tag <style> do HTML. Esta tag deve ser posicionada dentro do comando <head>, conforme mostrado abaixo:
c) Mtodo 3: Externo (link para uma folha de estilos) Neste mtodo, uma instruo no cdigo HTML chama um arquivo externo que contm todas as regras CSS de formatao. Este mtodo mais recomendado, porque permite separar o arquivo de formatao do arquivo HTML; desse modo, ele pode ser utilizado para vrias pginas ao mesmo tempo, facilitando a manuteno das pginas se for necessrio. Uma folha de estilos externa um simples arquivo de texto com a extenso .CSS. Ilustrando para melhor entender, vamos considerar que sua folha de estilos tenha sido nomeada como STYLES.CSS e est localizada no diretrio STYLE.
e-Tec Brasil
30
Precisaremos apenas inserir uma instruo no arquivo externo para lig-lo ao arquivo da pgina que precisamos que seja formatada, com o seguinte cdigo HTML:
importante perceber que o caminho para a folha de estilos deve ser indicado corretamente no atributo HREF; caso contrrio, no ir funcionar. Essa inscrio deve ser inserida entre as tags <HEADER> </HEADER> do documento HTML, para que funcione, conforme mostrado a seguir:
A CSS uma linguagem que supre uma deficincia do HTML em trabalhar com elementos grficos, imagens, dimensionamento e posicionamento preciso. Acesse o endereo a seguir e conhea mais sobre CSS: http://www. youtube.com/watch?v=_ wDcu1ZuqL8&feature=related
Este link informa ao navegador para usar o arquivo CSS na renderizao e apresentao do layout do documento HTML. Tal como qualquer outro tipo de arquivo, voc pode colocar uma folha de estilos tanto no servidor como no disco rgido.
style.css
31
e-Tec Brasil
Essa tcnica pode economizar uma grande quantidade de trabalho. Se, por exemplo, voc quiser trocar a cor do fundo de um site com 100 pginas, a folha de estilos evita que voc edite manualmente uma a uma as pginas para fazer a mudana nos 100 documentos HTML. Usando CSS, a mudana se far em poucos segundos trocando-se a cor em uma folha de estilos central.
O NotePad++ possui um recurso de sinalizao para incio e fim de TAG que facilita construo e alterao de cdigos HTML e CSS. Acesse o endereo a seguir e aprenda a instalar o NotePad++ : http://vimeo. com/27332335
e-Tec Brasil
32
O Notepad++ tambm possibilita a personalizao pelo usurio, que pode definir suas prprias linguagens na opo User Language Define System e ainda adicionando muitos outros recursos, atravs de plugins especficos disponveis na internet.
2.3.2 Dreamweaver
O software Dreamweaver, da fabricante Macromedia, a ferramenta de desenho de pginas web mais conhecida e utilizada entre os desenvolvedores de pginas web. Esse sucesso se deu por sua extrema facilidade de manuseio e suas ferramentas de interao que facilitam diversas atividades do processo de criao. Mesmo que seja experiente, um desenvolvedor web sempre encontrar nesse programa razes para utiliz-lo, sobretudo no que se refere produtividade. O software cumpre perfeitamente o objetivo de desenhar pginas com aspecto profissional e suporta grande quantidade de tecnologias. Entre as funes aceitas para manipulao no programa, destaca-se a edio de diversos cdigos como: folhas de estilo e camadas (CSS); JavaScript para criar efeitos e interatividades; insero de arquivos multimdia; manipulao de cdigo PHP, XML, ASP e HTML. Por ser um programa com muitos recursos, pode no ser to simples seu manuseio para pessoas menos experientes no desenho de web, que no estejam acostumadas com a metodologia de trabalho do programa. O Dreamweaver evoluiu muito em sua verso MX 2004, que recebeu um ambiente de design baseado em CSS, um editor de cdigo e editor visual integrados, um editor de imagem baseado na tecnologia do Macromedia Fireworks e uma ferramenta FTP segura e muito prtica para transferncia de trabalhos concludos para publicao na web.
O Dreamweaver , atualmente, o programa mais usado em todo o mundo para fazer pginas para a internet. fcil perceber por que. Ele um programa WYSIWYG (what you see is what you get), com uma interface grfica intuitiva; por isso, ganha mais adeptos a cada dia. Acesse o endereo a seguir e assista ao vdeo sobre a interface do Dreamweaver: http://www.youtube.com/ watch?v=9I3nucN4Idc
33
e-Tec Brasil
Agora salve este arquivo com extenso .html ou .htm em seu disco rgido. Para isso, acessamos no menu Arquivo e selecionamos a opo Salvar como. Na janela, escolhemos o diretrio onde desejamos salvar e nomearemos o arquivo, como por exemplo: minha_pgina.html. Com o documento HTML criado, podemos ver o resultado obtido atravs de um navegador. Chegado a esse ponto, conveniente, insistir no fato de que nem todos os navegadores so idnticos. Infelizmente, os resultados de nosso cdigo podem mudar de um para outro, sendo por isso aconselhvel visualizar a pgina em vrios navegadores. Geralmente usam-se o Internet Explorer, Mozila Firefox e o Chrome da Google como referncias, j que so os mais difundidos e utilizados atualmente.
e-Tec Brasil
34
35
e-Tec Brasil
Assista a um vdeo para entender um pouco mais sobre domnio e hospedagem no endereo a seguir: http://www.youtube. com/watch?v=vkhWXz0I7pY
d) Domnio o nome que compe o endereo do site. Voc precisa registrar um domnio pelo perodo mnimo de um ano. Aps esse perodo, sua anuidade deve ser renovada; caso contrrio, o domnio ficar disponvel para outra pessoa ou empresa registrar. Tambm possvel contar com a opo de registrar ou renovar o domnio a cada dois anos ou mais. e) Registro de domnio para adquirir um domnio voc deve possuir um CNPJ (empresa) ou CPF (pessoa fsica) e efetuar a compra pelo site registro.br ou atravs do seu provedor. REGISTRO.BR, cujo rgo brasileiro responsvel por todos os domnios com terminao (.BR) a Fundao de Amparo Pesquisa do Estado de So Paulo,. Para domnios internacionais, voc no precisa de nenhum documento. Procure no site de busca de sua preferncia por registro de domnio ou informe-se com seus amigos sobre quais empresas de registro de domnios internacionais eles recomendam. INTERNIC o rgo americano responsvel pelos domnios internacionais (.COM, .NET, .ORG, .BIZ, etc.)
36
O servidor de FTP possibilita acessos simultneos para mltiplos clientes. O servidor aguarda as conexes TCP, e para cada conexo cria um processo cativo para trat-la. Diferentemente de muitos servidores, o processo cativo FTP no executa todo o processamento necessrio para cada conexo. A comunicao FTP utiliza uma conexo para o controle e outra (ou vrias) para transferncia de arquivos. A primeira conexo (chamada de conexo de controle FTP-control) utilizada para autenticao e comandos; j a segunda (chamada de conexo de dados FTP-data), utilizada para a transferncia de informaes e arquivos em questo.
Os sites so acessados usando o protocolo HTTP, com a ajuda dos navegadores. FTP, como o nome indica, usada para transferncia de arquivos de um computador para outro. um protocolo menos popular devido ao pequeno nmero de pessoas que o utilizam. Assista a um vdeo para entender um pouco mais sobre FTP no endereo a seguir: http://www.youtube. com/watch?v=hVPy-3NVFdQ
1
Interpretador de Protocolo do Servidor Processo de Transferncia de Dados do Servidor Servidor FTP
Fonte: http://pt.kioskea.net/faq/1983-o-que-e-ftp
2
Conexo de Controle
4
Sistema de Arquivos
3
Conexo de Dados
Um cliente de FTP muito conhecido e gratuito o FlieZila da Mozila. Assista a um vdeo para aprender a baixar, instalar e configurara esse software no endereo a seguir: http://www. weeby.com.br/2010/08/15/ saiba-como-baixar-instalar-ecomecar-a-usar-o-cliente-deftp-filezilla/
Sistema de Arquivos
O protocolo de FTP exige comandos para que as operaes de gravao, deleo, cpia e movimentao de arquivos sejam realizadas. Os programas ou clientes de FTP realizam automaticamente esses comandos a cada ao do usurio, tornando a tarefa mais rpida e segura.
37
e-Tec Brasil
Resumo
Nesta aula voc aprendeu a linguagem de marcao HTML e sua evoluo para XHTML. Aprendeu o CSS, que uma linguagem complementar ao HTML e que oferece grandes possibilidades de manipulao e personalizao de pginas web. Aprendeu tambm os softwares que possibilitam a construo da pgina e sua publicao na internet.
Atividade de aprendizagem
1. Execute o aplicativo Bloco de Notas e, baseado nos conhecimentos adquiridos, monte uma pgina web escrevendo o cdigo abaixo. A imagem: sao_paulo.jpg, est disponvel para download no AVEA. Ao finalizar a atividade, poste no AVEA.
e-Tec Brasil
38
2. Pesquise na internet sobre o assunto Como escolher um provedor de hospedagem e relacione explicando os principais pontos que precisam ser observados na hora de contratar um provedor. Digite o resultado em um arquivo. Ao finalizar a atividade, poste no AVEA. 3. Abra o Notepad (ou qualquer outro editor de texto que queira usar) e crie dois arquivos um arquivo HTML e outro arquivo CSS com os seguintes contedos: Arquivo HTML: index.htm
Salve os dois arquivos no mesmo diretrio. Lembre-se de salvar os arquivos com a extenso apropriada (.css e .htm). Abra index.htm no seu navegador e veja uma pgina com o fundo vermelho. Parabns! Voc construiu sua primeira pgina de internet utilizando a tecnologia de folha de estilos (CSS). Ao finalizar a atividade, poste no AVEA.
39
e-Tec Brasil
Aula 3 A imagem
Objetivos
Aprender conceitos sobre imagem digital e suas caractersticas. Conhecer os formatos existentes de armazenamento de imagens digitais.
Aula 3 A imagem
41
e-Tec Brasil
a) Resoluo pixel o elemento que forma a imagem digital, assim como a prata forma a imagem no filme. Tem um formato quadrado e so alinhados um ao lado do outro.
A quantidade de pixels determina o tamanho da imagem digital. Podemos concluir que a unidade de medida da imagem digital em pixels e a unidade de medida da fotografia em cm ou polegadas. Por exemplo, uma imagem com 1200 x 1600 menor que a imagem com 2600 x 3500. A resoluo determina na cmera digital o tamanho da imagem em pixels, com objetivo de gerar o tamanho da foto no papel conforme a necessidade do usurio. Em uma cmera digital com resoluo mxima de 8MP, o sensor CCD (captura os pontos de luz e cor) tem oito milhes de pixels com trs canais de cores (RGB) cada. Quando reduzimos a resoluo, por exemplo, de 8MP para 5MP, estamos agrupando os pixels; logo, transformando o espao de 8MP para 5MP. Sendo assim, os pixels ficaram maiores e de menor quantidade, reduzindo o tamanho da foto final. b) Qualidade da imagem quando capturar suas fotos, voc dever usar a resoluo mais alta que sua cmera permitir. Por exemplo, se voc tem uma cmera de 5,1 megapixel, ento voc deve usar essa configurao para capturar suas imagens, pois quanto maior a resoluo, melhor a qualidade da imagem.
e-Tec Brasil
42
Pixels
Imagem
Resoluo Alta
Resoluo Baixa
c) Tamanho do arquivo O tamanho do arquivo ser proporcional quantidade de informaes que este contiver. Por isso, devemos lembrar que para uma maior qualidade teremos um arquivo com maior tamanho em bytes. Cada formato de imagem traz consigo caractersticas prprias de tratamento de informaes e compresso de dados.
0 0 1 2 3
0 1 2 3 2
1 2 3 2 1
2 3 2 1 0
3 2 1 0 0
0= 1= 2= 3=
d) Profundidade de bits a profundidade de bits o que determina quantas cores nicas esto disponveis na paleta de cores de uma imagem em termos de nmero de 0s e 1s, ou bits, que so utilizados para especificar cada cor. Isso no significa que uma imagem necessariamente utiliza todas essas cores, mas sim que pode especificar suas cores usando esse nvel de preciso. Para uma imagem em tons de cinza, a profundidade de bits indica quantas gradaes nicas de cinza esto disponveis. Imagens com profundidades de bit maiores podem representar mais tons ou cores j que h mais combinaes de 0s e 1s disponveis para represent-las. A maioria das imagens coloridas vm de cmeras digitais que tm 8-bits por canal e ento elas podem usar um total de oito 0s e 1s para representar suas cores. Isso d 256 valores de intensidade diferentes para cada cor primria.
Aula 3 A imagem
43
e-Tec Brasil
Quando todas as trs cores so combinadas, em cada pixel temos 2563 ou 16.777.216 de cores diferentes. Imagens com essa quantidade de cores normalmente so apelidadas de true color (uma traduo possvel seria cores reais). A isso chamamos 24 bits por pixel, j que cada pixel composto por trs canais de 8-bits (8*3=24). O nmero de cores disponveis para uma imagem de X-bits sempre 2X se X se refere a bits por pixel e 23*X se X se refere ao nmero de bits por canal.
Tabela 3.1 : Classificao de cores por profundidade de bits
Bits Por Pixel 1 2 4 8 16 24 32 Nmero de Cores Disponveis 2 4 16 256 65.536 16.777.216 4,3 bilhes Nome(s) Comum(ns) Monochrome CGA EGA VGA XGA, High Color SVGA, True Color
e-Tec Brasil
44
e) Compresso uma tcnica que garante, mediante a aplicao de algoritmos matemticos, uma imagem similar original, mas cujo tamanho (em pixels) menor e, portanto ocupa menos espao. H dois tipos de compresso: com perda (lossy) e sem perda (lossless). Os algoritmos com perda aproveitam-se das limitaes da viso humana para suprimir informao que provavelmente no seria percebida de qualquer forma. Veja, na Figura 3.8, as trs verses do mesmo registro com diferentes graus de compresso:
Aula 3 A imagem
45
e-Tec Brasil
Note que no primeiro registro os detalhes da foto so ainda perceptveis. No registro com maior compresso h um achatamento tal, que os detalhes se perderam. Retorne foto original acima e perceba que, no geral, voc no prestou ateno a esses detalhes, o que faz com que at 80% de compresso possa ser aceitvel na maioria dos casos. Os algoritmos sem-perda utilizam, geralmente, o algoritmo LZW (LempelZiv-Welch) para obter imagens onde no h perda de qualidade isto , no acontece o achatamento visualizado no exemplo. A qualidade da imagem bem superior, assim como o tamanho do arquivo resultante, se comparado com um arquivo gerado por um algoritmo com-perda.
e-Tec Brasil
46
Resumo
Nesta aula voc pde conhecer os conceitos de imagem digital, resoluo, profundidade, qualidade e compactao de arquivos. Esses conhecimentos lhe permitiro analisar a melhor soluo para captura e utilizao de imagens para web.
Atividade de aprendizagem
1. Pesquise na internet sobre o assunto Formatos de Arquivo Digital. Baseado nas informaes pesquisadas elabore um texto explicando qual o melhor formato para ser utilizado na internet. Ao finalizar a atividade, poste no AVEA.
Aula 3 A imagem
47
e-Tec Brasil
49
e-Tec Brasil
Passo 2 Na tela seguinte, leia atentamente o contrato de licena e, se estiver de acordo, clique em Aceitar.
e-Tec Brasil
50
Passo 4 Nesta tela, voc dever digitar seu nome no campo User Name e o nome da organizao em Organization. Caso voc no possua um nmero de srie, selecione a opo Install 30-day trial version. Esta opo lhe dar 30 dias para testar o programa. Quando terminar clique em Next.
51
e-Tec Brasil
Passo 5 Na tela que segue, voc poder alterar o local em que o Adobe Photoshop CS2 ser instalado. Para isto, clique no boto Change. Quando terminar clique em Next.
Passo 6 Esta tela permitir que voc selecione os arquivos que deseja associar ao Adobe Photoshop CS2. No exemplo, no alteramos nenhuma associao. Clique em Next para prosseguir.
Passo 7 O assistente est pronto para instalar o programa. Clique em Install para iniciar a instalao do Adobe Photoshop CS2. Aguarde o trmino da instalao. Isso poder levar alguns minutos. Ao trmino da instalao, voc poder optar por ler ou no o arquivo readme (leia-me). Este arquivo contm informaes sobre o programa. Caso no deseje ler, desmarque a opo Show the readme file. Clique em Finish para encerrar o assistente de instalao.
e-Tec Brasil
52
Execute o Adobe Photoshop CS2 (o atalho est em programas, dentro do menu Iniciar). Na tela que segue, clique no boto Continue Trial. A tela de boas vindas ser exibida. Para que ela no aparea novamente, desmarque a opo Show this dialog at startup. Clique em Close para prosseguir. O Adobe Photoshop CS2 possui um aplicativo que verifica atualizaes automaticamente. Se voc deseja procurar por atualizaes, clique em Ok; do contrrio, clique em Cancel. Pronto, o Adobe Photoshop CS2 foi instalado!
F H
53
e-Tec Brasil
A rea de trabalho do Photoshop composta dos seguintes elementos: a) janela do documento; b) encaixe de painis recolhidos em cones; c) barra de ttulo do painel; d) barra de menus; e) barra de opes; f) paleta Ferramentas; g) boto Recolher em cones; h) trs grupos de paletas (painis) em encaixe vertical. Note que as paletas so arrastveis e podem ser ativadas, esticadas e fechadas, da mesma forma que em outros programas do Windows. Alm disso, uma paleta pode ser arrastada e encaixada em outra janela para fazer conjunto com outras paletas, que podem ser acessadas atravs de abas.
e-Tec Brasil
54
E Ferramentas de pintura
Pincel (B) Lpis (B) Substituio de cor (B) Pincel Misturador (B) Pincel do Histrico (Y) Pincel HIstria da Arte (Y) Gradiente (G) Lata de tinta (G)
A B C
E D
C
C Ferramentas de medio
Conta-gotas (I) Classicador de cores (I) Rgua (I) Observao (I) Contagem (I)
D Ferramentas de retoque
Pincel de recuperao para manchas (J) Pincel de recuperao (J) Correo (J) Olhos vermelhos (J) Carimbo (S) Carimbo de padro (S) Borracha (E) Borracha de plano de fundo (E) Borracha mgica (E) Desfoque Nitidez Borrar Subexposio (O) Superexposio (O) Esponja (O)
G Ferramentas de navegao
e 3D
Girar objeto 3D (K) Rolar objeto 3D (K) Deslocar objeto 3D (K) Deslizar objeto 3D (K) Escalar objeto 3D (K) Girar cmera 3D (N) Rolar cmera 3D (N) Deslocar cmera 3D (N) Mover cmera 3D (N) Aplicar zoom na cmera 3D (N) Mo (H) Girar visualizao (R) Zoom (Z) Somente Extended
55
e-Tec Brasil
So recursos para isolar determinadas reas da imagem para aplicao de comandos com o objetivo de corrigir imperfeies ou aplicao de um efeito na imagem.
e-Tec Brasil
56
57
e-Tec Brasil
So recursos que permitem realizar aes especiais em imagens, como cpia de texturas, duplicao de reas semelhantes, desfocagem, nitidez, saturao, entre outras.
Imagine que as camadas correspondem a diversas folhas transparentes que podem receber elementos grficos. Quando dois elementos so colocados em duas camadas distintas, cada um deles pode ser manipulado separadamente, sem interferir no comportamento do outro. Cada camada independente da outra, e um mesmo arquivo pode conter infinitas camadas. Quando um elemento de uma camada no ocupa toda a rea da imagem, possvel ver as camadas inferiores da imagem mostrando como os elementos se sobrepem uns aos outros.
e-Tec Brasil
58
4.12 Filtros
So efeitos pr-configurados que podem ser aplicados diretamente nas imagens/camadas. Para conhecer o efeito de cada filtro, ser necessrio test-los um por um em uma imagem previamente carregada.
Resumo
Nesta aula, voc pde conhecer os recursos que um software de edio de imagem oferece para edio e tratamento de imagens. Aprendeu o conceito e a utilizao de algumas das ferramentas disponveis para edio, utilizando como referncia o software consagrado e mais utilizado atualmente, o Photoshop.
Atividade de aprendizagem
Acesse o endereo http://photoshopindesign.blogspot.com/2011/03/ efeito-de-texto-usando-estilos-de.html. Siga o passo a passo tutorial e salve o resultado em um arquivo com o nome arte_digital.psd. Ao finalizar a atividade, poste no AVEA.
59
e-Tec Brasil
Referncias
DESENVOLVIMENTO PARA WEB. Briefing para desenvolvimento de web sites: consideraes, dicas e modelos. 2008. Disponvel em: <http://desenvolvimentoparaweb.com/miscelanea/briefing-para-desenvolvimento-deweb-sites-consideracoes-dicas-e-modelos>. Acesso em: 1 jun. 2011. FACULDADE DE CINCIAS DA UNIVERSIDADE DO PORTO. Manual de fotografia digital. 2008. Disponvel em: <http://camaraobscura.fot.br/arquivos/anualdefotografia.pdf>. Acesso em: 20 ago. 2011. HISTRIA DA INTERNET. In: WIKIPDIA, a enciclopdia livre. Flrida: Wikimedia Foundation, 2012. Disponvel em: <http://pt.wikipedia.org/w/index.php?title=Hist%C3%B3ria_da_ Internet&oldid=29821952>. Acesso em: 01 jun. 2011. HTML.NET. Minicurso sobre HTML. 2010. Disponvel em: <http://pt-br.html.net/ tutorials/html/introduction.php>. Acesso em: 2 jun. 2011. HTML.NET. MiniCurso sobre CSS. 2010. Disponvel em: <http://pt-br.html.net/ tutorials/css/introduction.php>. Acesso em: 2 jun.2011. HTML STAFF. Como funciona o protocolo FTP. 2006. Disponvel em: <http://www. htmlstaff.org/ver.php?id=985>. Acesso em: 17 ago. 2011. INFOWESTER. Publicando seu site: dicas iniciais sobre domnio e hospedagem. 2006. Disponvel em: <http://www.infowester.com/dominiohost.php>. Acesso em: 17 ago. 2011. INFO.ABRIL. Curso INFO de Photoshop CS3. 2008. Disponvel em: <http://info.abril. com.br/dicas/cursos/photoshopcs3/curso.html>. Acesso em: 20 ago. 2011. IDGNOW. Leitura em tablet mais lenta do que em livro impresso. 2010. Disponvel em: <http://idgnow.uol.com.br/mercado/2010/07/05/leitura-em-tablet-pode-ser-ate-10-7mais-lenta-que-em-livro-impresso/#&panel2-1>. Acesso em: 01 jun. 2011. KIOSKEA. O que FTP. 2009 Disponvel em: <http://pt.kioskea.net/faq/1983-o-que-eftp>. Acesso em: 17 ago. 2011.
e-Tec Brasil
60
MOREIRA, Jlio Csar Tavares. Dicionrio de termos de marketing. So Paulo: Atlas, 1996. PROJETOS DE APLICAES WEB. Contedo: objetividade, navegabilidade e visibilidade. Centro de Computao da Unicamp. 2002. Disponvel em: <http://www.ccuec.unicamp. br/treinamento_int2004/webpro/arquitetura_informacao/arquitetura_informacao_ conteudo_objetividade.html>. Acesso em: 26 abr. 2012. RICHARD, Saul Wurman. Ansiedade de Informao. So Paulo: Editora de Cultura, 1999. ROSENFELD, L. & MORVILLE, P. Information Architecture for the Word Wide Web. 3ed. Sebastopol: OReilly, 2002. SANTANA, Rafael. Sete itens bsicos de um bom briefing. 2011. Disponvel em: http://www.joomlaclube.com.br/site/materias/46-revista-da-comunidade/288-7-itensbasicos-de-um-bom-briefing.html. Acesso em: 1 jun.2011. SILVA, Maurcio Maujor Samy. Tutorial XHTML. 2011. Disponvel em: <http://maujor. com/tutorial/xhtml.php>. Acesso em: 2 jun. 2011. SITE. In: WIKIPDIA, a enciclopdia livre. Flrida: Wikimedia Foundation, 2012. Disponvel em: <http://pt.wikipedia.org/w/index.php?title=Site&oldid=29633517>. Acesso em: 1 jun. 2011. SITE. In WIKIPDIA. Histria da Internet. 2011. Disponvel em: <http://pt.wikipedia. org/wiki/Hist%C3%B3ria_da_Internet>. Acesso em: 1 jun. 2011. TI MASTER. Sistema de navegao na arquitetura de informao. 2011. Disponvel em: <http://idgnow.uol.com.br/galerias/historia_office/paginador/pagina_1>. Acesso em: 2 jun. 2011. WEBINSIDER. O que arquitetura de informao em websites. 2006. Disponvel em: <http://webinsider.uol.com.br/2006/04/15/o-que-e-arquitetura-de-informacao-em-websites> Acesso em: 26.jul.2011.
Referncias
61
e-Tec Brasil
Currculo do professor-autor
Carlos Fbio Rocha Marinho especialista em Design, Publicidade e Marketing pela Universidade Federal do Amazonas (UFAM) e graduado pela Universidade Luterana do Brasil (ULBRA) em Gesto em Implantao e Manuteno de Redes de Computadores. Atualmente realiza atendimento a empresas prestando consultoria em Programao Visual, Web design e Trade Marketing.
e-Tec Brasil
62
e-Tec
Brasil
rede