Escolar Documentos
Profissional Documentos
Cultura Documentos
Este artigo tem incio com uma srie dedicada ao uso KompoZer para criar e editar pginas da Web. O Kompozer atual apenas uma verso melhorada do NVU). WYSYWIG (What You See Is What You Get) Kompozer um editor que permite criar e editar pginas usando a tela selecionvel diferentes exibe um sistema de tabulao (cdigo-fonte, WYSIWYG janela, e viso melhorada com tags HTML ...). Entre as suas principais caractersticas que inclui cliente de FTP integrado para carregar as pginas diretamente do aplicativo no servidor, suporte para quadros, formulrios, tabelas, modelos de design e estilo CS, personalizado e otimizado cdigo mais limpo, etc. tudo que voc precisa para criar pginas web atraentes. Kompozer um opensource, sob licena GNU / GPL, multiplataforma (voc vai encontrar verses para Windows, distribuies Linux encontrada entre Ubuntu e OpenSuse ou Mac). O programa totalmente livre sob licena GNU / GPL, que permite que diversos usurios das liberdades fundamentais, incluindo a possibilidade de fazer as cpias que voc deseja ou precisa do programa: portanto, voc pode usar com seus alunos e voc pode distribuir a instal-lo em casa (se eles no tm ligao Internet) e assim pode trabalhar em casa com o mesmo pedido que eles esto usando em sua escola.
solicita uma pgina a partir de um servidor (que fornece as informaes necessrias em seu site) e ele envia. Para estabelecer o compartilhamento de informaes, os navegadores e servidores utilizam um conjunto de regras de comunicao chamado Hypertext Transfer Protocol (HTTP), por esta razo, todos os endereos de pginas da Web comeam com http:// mas no ao tipo de esses caracteres em navegadores atuais. Os arquivos que voc acessa pginas da Web so chamados, o que pode incluir: Texto. Hiperlinks. Para navegar na WWW usurios navegar de uma pgina para outra por apontar e clicar hiperligaes em texto ou grficos, que so pontos do documento que permite o acesso a uma outra seo da mesma (links internos) ou outro documento (links externos). Eles tambm chamados de links, links, nodos ou links. Navegadores geralmente indicam a presena de um hiperlink no documento, transformando o ponteiro do mouse se parece com: geralmente, quando colocado sobre um hiperlink, torna-se uma mo apontando para algo. Tabelas. Forms. Marcos (quadros). Movendo ou imagens estticas. Sons e outros elementos multimdia. Etc. Pginas da Web so os documentos bsicos da World Wide Web. Eles so baseados na tecnologia hipermdia, que integra os recursos de multimdia e hipertexto, que podem "navegar" em um mar de informaes textuais, grficos e som. Um website nada mais do que uma coleo de pginas web relacionadas contendo informaes relacionadas.
Linguagem HTML
At recentemente, a criao de pginas Web era algo reservado principalmente para os usurios com elevados conhecimentos de informtica, como "abaixo" uma pgina de texto e imagens nele contidas, descansa linguagem para pginas da Web: a linguagem de marcao hipertexto (Hypertext Markup Language) ou HTML. Algo como um "quadro" que j no se v quando voc navegar nas pginas, mas est l, depois de ver o que fao, para torn-lo l. Este formato, originalmente concebido por Tim Berners-Lee, o criador da World Wide Web, e ampliada por diversos grupos de trabalho e as agncias, permitindo que computadores de diferentes tipos e com diferentes sistemas operacionais, voc pode ver da mesma forma que o Rede de contedo. HTML, quando ele apareceu por volta de 1991, foi concebido para conter apenas texto e imagens de forma bsica. Posteriormente, ele foi adicionando outras capacidades e recursos e agora permite a incluso de vdeo, som e at mesmo imagens e udio em tempo real. , portanto, uma linguagem em constante evoluo. Como esta lngua evolui, novas verses do navegador adicionar funcionalidades mais avanadas, como controles ActiveX, programas VBSript, programas CGI, programas em Java, Flash, etc., Reforando, em especial os recursos interativos da hipermdia tecnologia. No pretende este livro para mostrar-lhe como usar a linguagem HTML (voc pode encontrar
muitos sites com informaes precisas sobre isso), mas vou mostrar, a ttulo de exemplo, algumas perguntas simples para voc entender como ele funciona Kompozer "abaixo" o que realizar sobre ela: O cdigo HTML gerado a partir composta por etiquetas ou tags, que definem como ele apresenta a pgina da Web e permite que navegadores para interpret-lo de modo que o que voc v atravs do browser uma pgina atraente. As etiquetas tm uma marca de incio e um fim: por exemplo, uma marca de incio e uma marca final, que caracterizam o incio eo fim de um documento HTML. Portanto, todas as tags HTML deve estar entre <HTML> e </ HTML>. O prprio documento dividido em duas reas principais: As legendas, que enviada juntamente com a <HEAD> e </ HEAD> Informao contendo do documento, que no estar na tela principal, como o ttulo do documento (entre o <title> e <, informaes para navegadores e outras questes de interesse. O corpo, uma parte fundamental do documento, tudo o que aparece na tela principal (texto, imagens elementos multimdia, etc) .. Est entre os <BODY> e </ BODY>. Exemplo tpico: <html> <head> <title> Minha primeira pgina web </ title> </head> <body> Este o texto que ser visto na pgina quando eu ligar para ela com um navegador da Web <br> Essa raiva subseo em uma linha separada. </body> </html> Digite o texto como ele um editor simples e guard-lo com a extenso html. Basta clicar nele duas vezes para o padro do navegador no seu computador abri-lo e pode visualizar a aparncia final da pgina voc est construindo. Com o HTML voc pode formatar o texto, ou seja, definir o tipo, cor e tamanho da fonte, incluir imagens e outras mdias, recursos de edio, inserir links e muito mais. Mas, felizmente, com aplicativos para edio e criao de pginas web de hoje, como o caso com Kompozer no precisa saber qualquer HTML para fazer seus sites (mesmo para os web designers e recursos avanados, ser necessrio). O programa usa uma interface semelhante a um processador de texto, onde o usurio adiciona texto e format-lo, inserir imagens e elementos multimdia e automaticamente ... o aplicativo que gera os cdigos HTML correspondentes sem o seu interveno. Isso conhecido como LO-voc-v--que-que-get WYSIWYG (What-You-See-IsWhat-You-Get). Agora, se voc capaz de combinar as possibilidades oferece Kompozer e seu conhecimento dos resultados da HTML ser muito mais preciso, criativo e poderoso. Depois de concluir o seu site, ele dever ser publicada na Web para que ele possa ser visto pelo resto do mundo. Publicar um site carrega a cpia das pginas e arquivos do computador que o site foi criado em um servidor web. Mas esta questo ser abordada mais tarde.
Questes preliminares
Cuidado para nomes de arquivo
Ao projetar um Web site, a fim de evitar problemas com nomes de arquivos, muito importante que aqueles que acreditam (ambas as pginas HTML, imagens, pastas ...) preencher os seguintes requisitos: Usando uma palavra como o nome de um arquivo. Com no mais de 8 caracteres. Que no tem vogais com acentos, ou capitalizao ou espaos em branco. Recorde-se que at recentemente no poderia usar esses caracteres em URLs. Note que todos os servidores no tm o mesmo sistema operacional (eles so uma minoria que tem um sistema operacional Windows). Por isso importante para evitar problemas com nomes de arquivo em torno de "upload" para o servidor, que leva em conta as regras descritas acima. Caso contrrio, voc pode achar que o seu site funciona sem problemas no seu computador (no que chamado localmente) e em vez disso, no servidor de Internet em que publicado, no.
site vai t-los), os elementos de navegao tal lugar como uma barra de navegao com botes ou link de texto para outras pginas, as manchetes, os logotipos de identificao, preparao das ilustraes e outros materiais grficos, desenhos textos de todos os tipos, no se esquea de colocar o imvel ou de direitos autorais ...
Tambm presente direita, os botes de controle usuais da janela maximizar / restaurar, minimizar e fechar o aplicativo. Barra de Menus Inclui menus que lhe permitem acessar todos os recursos do programa.
Elaborao de bar (barra de cones) Aqui esto os botes de opes mais comumente usados que esto na barra de menu para um acesso mais rpido s suas caractersticas.
Formatao Bar Inclui botes que permitem que voc acesse as opes bsicas de formatao de texto, pargrafos, estilos e camadas. Eles so semelhantes a qualquer processador de texto, e quase a mesma funcionalidade.
Web Site Window Manager Ele est localizado esquerda e ela montou seu site, para aceder rapidamente a diferentes pginas do site que passar. Atravs dele voc tambm pode publicar seus sites na internet e editar diretamente as pginas e fazer publicar sem ter salvo no disco local.
Janela de edio de rea Esta a rea onde o projeto e editar as pginas do seu site. o seu espao de trabalho. Cada pgina que voc est editando exibida nesta rea podem mudar de um para outro atravs de separadores que so apresentados no topo, com o ttulo de cada pgina. Voc tambm pode mostrar as regras neste domnio, que ir ajudar vrios objetos do tamanho.
No fundo a barra de edio de modo que exibe quatro guias com o qual voc pode alterar o modo de lanamento: Normal ou WYSIWYG HTML Tags: mostra esquematicamente as tags HTML usado Source Code: acesso ao HTML da pgina Preview: mostra a aparncia da pgina, uma vez que em seu browser.
Status Bar muito til um bar localizado na parte inferior da tela do Kompozer. Ele fornece informaes diversas, como a tag de HTML para dentro do que voc . Com ele voc pode selecionar tags com o contedo para executar aes sobre eles, editar, formatar, deletar, etc.
A primeira pgina
Kompozer Run, atravs do procedimento usual: ver a tela principal da aplicao e da rea de trabalho especficas, onde voc ir criar sua pgina da Web primeiro. V ao menu Arquivo e selecione o drop-down Salvar Como ... Kompozer voc procurar um ttulo para a pgina que voc est salvando, ttulo a ser exibido na barra de ttulo do seu navegador da Web quando voc acessar a pgina da Internet. Tipo na definio de campo de texto, este o ttulo da pgina que voc est criando. Na tela exibida, em seguida, a janela Salvar como, oferecemos-lhe como nome do arquivo do site que voc est fazendo o mesmo que voc escreveu no pargrafo anterior. Modificar o nome do arquivo e certifique-se de salvar definicion.html WebCurso pasta que voc criou quando desenhou a estrutura do site.
O resultado ser um novo arquivo na pasta que definicion.html WebCurso pode exibir em seu navegador simplesmente clicando duas vezes sobre ele. Obviamente, neste momento, a pgina exibe nada, mas um fundo branco, porque completamente vazio (mas notou que o nome da definio da pgina, se exibido no ttulo da janela do browser). Voc vai ter que comear a adicionar texto, imagens e outras mdias item que voc deseja.
Clique no cone para abrir a janela Editar Sites com o formulrio de configurao da publicao de um novo site. Insira os seguintes valores: Nome do Site: Ecossistemas. Publicar Server: como o site ser feito em seu computador localmente (voc discutida mais tarde, quando voc terminar a sua criao e edio, publicao na Internet), localize a pasta usando o boto Select Directory WebCurso. Quando encontrar, clique no boto Select. Nome de usurio: Digite seu nome.
Por fim, clique em OK. Veja como voc projetou a estrutura de pastas e arquivos agora exibido na janela do Site Manager.
Voc pode usar Site Manager para acessar diretamente as pginas passam to rapidamente capaz de edit-los, criar novas pastas no WebCurso, renomear, etc. Por isso, muito til, configur-lo corretamente.
exibido, mas a pgina ainda est muito aborrecido e chato: voc deve edit-la para melhorar sua aparncia.
Nesse caso, utilize o cone Alinhar ao centro para centralizar o texto na pgina que voc est criando. O n vai passar em conformidade. (Este procedimento tambm permite alinhar imagens, cabealhos e linhas de separao horizontal: basta selecionar o objeto cujo alinhamento voc deseja alterar e clique no boto correspondente).
Aumenta de tamanho
Kompozer permite-lhe aumentar o tamanho do texto de uma maneira muito rpida utilizando os botes Reduzir / Aumentar o tamanho da fonte que voc vai encontrar Formato bar:
Como sempre, voc deve primeiro selecionar o texto. Em seguida, clique no boto Realce para mostrar um tamanho maior. Por exemplo, clique 3 vezes sobre este cone para comprar um tamanho adequado. Termina clicar em um espao em branco para ver o resultado final. Clique na aba Preview localizado na parte inferior do espao de trabalho para rolar a pgina olha, como se fosse um visitante de seu site. Repita o procedimento usando o boto uma vez Aumentar tamanho do texto sobre os restantes
nmeros da pgina. Voc pode ver uma melhoria substancial no projeto, mesmo que a pgina muito simples de ser em preto e branco!. Adicione algumas cores para melhorar sua apresentao!.
Como voc clica em um desses cones abrir uma janela cor de texto na tela:
Seu uso simples: a lista de cores pr-definidos (lista o padro que ser visvel em qualquer plataforma ou qualquer tipo de monitor), selecione uma cor de seu interesse ou escolha uma chave diferente da amostra que aparece esquerda Vantagem clicar em um local determinado. Voc tambm pode usar a faixa tonal, que est logo abaixo para selecionar um tom de cor mais clara ou mais escura. Veja como mudar os valores fixados em Hue, Saturao, Brilho, Vermelho, Verde, Azul, sempre que
voc selecionar uma cor diferente ea pequena amostra de cor que proporciona a janela em si de acordo com a cor que voc selecionou. Esta janela merece alguma explicao tem a ver com os valores mostrados na parte inferior do mesmo: A combinao de teclas e nmeros mostrados na caixa de texto hexadecimal uma outra forma de cores de referncia. Voc pode ver o cdigo hexadecimal de cada cor em http://html-colorcodes.info/codigos-de-colores-hexadecimales/ e ver seus resultados finais. Internet encontrar muitas ferramentas online que permitem selecionar e exibir cores diferentes faixas utilizando o seu cdigo hexadecimal e / ou instalao de programas especficos para localizar o cdigo hexadecimal de qualquer cor. Neste exemplo especfico, selecione pergunta do ttulo no espao de trabalho e selecione uma cor da linha azul (cor escura) da gama de cores predefinidas da janela. Repita o procedimento para selecionar o cdigo de cor escura (cinza hex # 333333) e aplic-lo a outros pargrafos da pgina. O aspecto esttico da pgina tenha melhorado, no ?
Prtica com a pgina que voc est criando: 1. Use o item de menu Editar - Desfazer vezes, cone Desfazer ou Ctrl + Z quantas preciso para restaurar a aparncia da pgina ao seu estado original inicial, ou seja, o texto, sem aplicar qualquer formato, tamanho fonte ou cor. 2. Selecione o ttulo interrogativo. Exibe os estilos de pargrafo anterior e clique sobre Ttulo 1. Uau, que olhar ... e como simples! 3. Agora aplicar os novos procedimentos que voc sabe que a mudana: 1. O ttulo de uma cor escura azulada 2. O resto do texto aumenta o seu tamanho usando o boto uma vez Aumentar o tamanho de letra e mudar a cor para um tom cinza escuro, como voc sabe fazer. 3. Selecione o ltimo pargrafo na pgina (o grupo formado por ... um ecossistema) e aplicar um estilo de pargrafo, ttulo 4. Use a aba Preview para visualizar o aspecto global da sua pgina e admiro o seu novo visual.
Salve o arquivo usando Arquivo - Salvar ou usando o cone Salvar. Se quiser, voc pode visualizar a aparncia da pgina diretamente no seu navegador padro WebCurso localizar a pasta e clique duas vezes no definicion.html arquivo. Voc sabe como incluir
texto em uma pgina da Web e como editar! Kompozer sua primeira aula mais!
Tirar fotos na internet que voc pode usar livremente, sem restries
Enquanto voc estiver realizando um site educacional, no comercial, voc deve ter cuidado com o uso de imagens que voc encontra na internet, baixar para seu computador, modificar / editar e, finalmente, adicionar a sua pgina. O fato de que eles esto em linha no significa que voc pode
fazer com eles o que quiser Copyright separado, as imagens so proprietrios de casas que no podem pagar para us-los e, na maioria dos casos, voc pode permitir a sua utilizao, mas no Naturalmente, a edio de qualquer tipo!. Eu recomendo que voc v, por conseguinte, a pginas que fornecem imagens que voc pode utilizar em certas condies, ou livremente, e no usar um motor de busca na Internet "como um louco", como o caso do Google. Sem entrar em pormenores quanto voc est alguns pontos: De preferncia, usando imagens de domnio pblico, ou seja, imagens completamente livre, sem direitos autorais, voc pode usar sem restries: editar a seu gosto, compartilhlos com outros usurios, etc. verdade, no existem muitos sites que oferecem-lhe a, mas "se houver, Hayles. Por exemplo, a Wikipdia, o Wikimedia Commons ... e todos os seus sites associados so sites que distribuem contedo multimdia (fotos, vdeos, udios ...) sob licena GNU. Licenas GNU / GPL afirmar que seu uso livre: voc pode editar a seu capricho e que melhor para distribuir trabalhos derivados, ou seja, obras que foram editadas a partir do original ou inicial, obrigatrio, nos termos do mesmo tipo licena. As imagens de domnio pblico, que est localizado no real do motor de busca Google, por exemplo, tambm podem ser usados sem restrio. Digite aqui os termos imagens de domnio pblico ou imagens de domnio pblico (Ingls). H tambm uma variedade de sites especializados nestes tipos de imagens: o caso da Public Domain Photos. Essa deve ser a sua primeira escolha. Use as imagens que voc tem a oferecer sites educacionais especializados em imagens para uso educacional. Exemplos claros so o Banco de imagens Isftic (livre para usar o nosso trabalho educacional) ou EducaMadrid Mediateca do Ministrio da Educao da Comunidade de Madrid. H tambm sites internacionais com o mesmo propsito: o Banque Nationale de fotos em SVT ou Clip de aulas. Visite sites que oferecem imagens sob licenas Creative Commons. um tipo especial de licena oferecido por muitos sites da Web que voc pode usar as imagens em determinadas condies, alguns certamente no muito restritiva, por exemplo, utilizao, citando o seu autor, editar e distribuir sob a mesma licena, etc Ns oferecemos uma lista de sites onde se pode encontrar este tipo de imagens, mas lembre-se sempre a ler o seu licena Creative Commons correspondente ao que voc pode fazer com cada imagem, no v estragar a tecnologia. O site uma imagem Flickr excelente acolhimento que contm os arquivos deste tipo, mas no sozinho.