Informática Básica Aula 04 Internet e aplicativos
Navegadores Nos últimos anos foram desenvolvidos vários tipos de aplicativos para visualizar as páginas dos sites desejados. O que são os NAVEGADORES? Por definição, um navegador é um programa que possibilita ao usuário, que tem acesso a Internet, visualizar e interagir com documentos virtuais chamados de página Web, simplesmente página ou ainda site. Disponibilizada em um servidor Web, esta página pode ser de um provedor, de uma empresa, de uma universidade ou mesmo de uma pessoa em particular.
Navegadores Os pré-requisitos para o funcionamento de um site: - Deve estar escrito em uma linguagem padrão chamada HTML (Hypertext Markup Language) - A hospedagem, local de armazenagem, deve ser feito em uma máquina que possua ambiente Web, compostos por aplicativos próprios para este meio. - Web Browser - Navegador em Português. Sua comunicação com os servidores Web usa principalmente o protocolo de transferência de hipertexto HTTP (Hypertext Transfer Protocol) para solicitar pedidos de documentos e processar respostas vindas do servidor. - Estes documentos são por sua vez identificados por uma URL (Uniform Resource Locator), que é um endereço para localização do recurso.
Navegadores (comparativo) O Edge aposta na simplicidade, mas tem visual perfeito para computadores e tablets O Chrome é muito seguro, mas o Opera oferece segurança e ainda é bom para jogos Fonte: http://www.tecmundo.com.br/navegador/85140-comparativo-melhor-navegadorusar-windows-10.htm
Linguagem HTML Os arquivos em HTML - HyperText Markup Language - Linguagem de Formatação de Hipertexto - pode ser gerados em qualquer editor de texto. Linguagem HTML utiliza marcações específicas e distintas para dizer ao navegador (Internet Explorer, Firefox, Mozilla, e outros) como exibir o documento. Os comandos HTML são chamados de TAGS, compreende as marcas padrões que são utilizadas para fazer indicações a um browser. Assim como em outras linguagens, os comandos têm uma sintaxe própria e seguem algumas regras: - As TAGs aparecem sempre entre os sinais de menor que (<) e maior que (>); - Geralmente são utilizados em pares, sendo que a TAG de finalização de um comando é precedida de uma barra (/).
Linguagem HTML A maioria das etiquetas tem a sua correspondente de fechamento: <etiqueta>... </etiqueta> De um modo geral, as tags aparecem em pares, por exemplo: <H1> Cabecalho </H1> Onde: - A tag <H1> indica o início na instrução; - O texto Cabeçalho indica o texto que será formatado; - E a tag </H1> indica o final da instrução. As etiquetas são necessárias, pois servem para definir a formatação de um bloco de texto, e assim marcamos onde começa e termina o texto com a formatação especifica por ela.
Linguagem HTML O símbolo que termina uma determinada etiqueta é igual aquele que a inicia, antecedido por uma barra ( / ) e precedido pelo texto referente. Há exceções para a utilização dos pares de etiquetas. Por exemplo, a que indica um final de um parágrafo: <p> não necessita de uma correspondente </p> para terminar a formatação do bloco de texto. A etiqueta que indica quebra de linha <br> também não precisa de etiqueta correspondente, entre outras.
Linguagem HTML Todo documento HTML precisa conter certas tags padronizadas, no mínimo <HEAD>, </HEAD>, <BODY> e </BODY>, pois elas constituem as duas partes básicas de um documento HTML que são: o HEAD (cabeçalho) e o BODY (corpo do documento). Exercício 1 - Cabeçalho e título <HTML> <HEAD> <TITLE>Curso de WebDesign</TITLE> </HEAD> <BODY> <H1>Este é o primeiro nível de cabeçalho.</h1><p> Bem-vindo ao mundo do HTML. Este é o primeiro parágrafo.<p> Este é o segundo paragráfo </BODY> </HTML>
Linguagem HTML Título Todo documento em HTML deve possuir um título. O título é exibido em local separado da página, e é utilizado para identificar o documento em outros contextos, de modo que o título deve indicar claramente o conteúdo do documento. As tag utilizadas para títulos são: <TITLE> e <\TITLE>. <html> <title>este é o título</title> <body> <h2>e este o cabeçalho de nível 2</h2> Aqui entra o texto do documento... </body> </html>
Linguagem HTML <Hy> Texto do Cabeçalho </Hy> Onde o y é um número que poderá ser especificado entre 1 a 6, definindo o nível do cabeçalho. COMANDO: <H1> Cabeçalho nível 1 </H1> <H2> Cabeçalho nível 2 </H2> <H3> Cabeçalho nível 3 </H3> <H4> Cabeçalho nível 4 </H4> <H5> Cabeçalho nível 5 </H5> <H6> Cabeçalho nível 6 </H6>
Linguagem HTML PARÁGRAFO A tag <p> é utilizada para definir o ínicio de um parágrafo, criando uma linha em branco entre cada parágrafo. O tag <p> também é responsável pelo alinhamento dos parágrafos. O alinhamento pode ser: - LEFT : Parágrafo alinhado a esquerda. - CENTER: Parágrafo alinhado ao centro. - RIGHT: Parágrado alinhado a direita. - JUSTIFY : Parágrafo justificado.
Linguagem HTML QUEBRA DE LINHA A tag <br> é usada para terminar uma linha sem iniciar um novo parágrafo. Esta tag <br>, ou line break, provoca uma mudança de linha sem acrescentar espaço extra entre as linhas. Veja a diferença entre o uso da tag <p> e da tag <br>:
Linguagem HTML (fontes) A tag <font> permite que você insira em sua página um texto com fontes, tamanhos, cores e tipos diferentes. COMANDO: <FONT SIZE= n FACE= nome COLOR= cor > Texto </font> Onde: - SIZE: indica o tamanho da fonte que varia de 1 a 7, sendo 3 o valor padrão da maioria dos navegadores. - FACE: indica o nome da fonte utilizada. As fontes padrões da maioria dos navegadores são: ARIAL, TIMES NEW ROMAN, GEORGIA, COURIER, VERDANA. - COLOR : Define a cor da fonte do texto, em hexadecimal.
Linguagem HTML (fontes) TAG DIV A tag <div> permite alinhar horizontalmente qualquer elemento em sua página. O alinhamento pode ser: left, center ou right. Onde a posição pode ser: - LEFT: Alinhamento a esquerda; - CENTER: Alinhamento centralizado; - RIGHT: Alinhamento a direita. O padrão de alinhamento da tag <div> é a esquerda. COMANDO: <div align= posicao >Elementos a serem alinhados</div>
Linguagem HTML (fontes) BACKGROUND (IMAGEM DE FUNDO) O atributo background deve ser aplicado à tag <body>, que especifica uma imagem que será utilizada como fundo de uma página, sendo que a imagem ocupará toda a área de fundo da tela. COMANDO: <body background= URL >Corpo da página</body>
Linguagem HTML (fontes) BGCOLOR O atributo BGCOLOR é o atributo que determina a cor de fundo da página, permitindo que se defina uma cor de fundo padrão para a página sem a necessidade de utilizar um arquivo de imagem. COMANDO: <body bgcolor= #FFFFCC >Corpo da página</body> ATRIBUTO TEXT O atributo TEXT é utilizado para controlar a cor do texto normal de uma página, ou seja, define a cor de todo o texto do documento, execeto os links. O atributo TEXT é inserido na tag <BODY>, tendo como padrão a cor preto (#000000). COMANDO: <body text= #RRGGBB >Corpo da Página </body>
Linguagem HTML ATRIBUTO LINK, VLINK E ALINK Os atributos LINK, VLINK e ALINK fazem o controle das cores do textos que funcionam como link na página. - LINK: Define cores de links não visitados. Cor padrão o AZUL. - VLINK: Define as cores dos links já consultados. Cor padrão vermelhopúrpura. - ALINK: Define as cores dos links selecionados, ou seja, quando o usuário pressionou o botão do mouse e ainda não soltou. Cor padrão vermelho. COMANDO: <body link= #RRGGBB vlink= #RRGGBB alink= #RRGGBB >Corpo da página</body>
Linguagem HTML ÂNCORAS As âncoras são links que utilizamos quando queremos buscar o conteúdo na mesma página. São muito utilizadas em páginas que têm o conteúdo extenso, onde definimos seções na páginas, sendo que cada seção terá um nome que servirá de referência para o link. Para criarmos uma âncora selecionamos um local da página. <a name= nomedaseção > </a> Onde: - <a (há um espaço depois do a): é a abertura da tag de link; - name: nome da seção : é o nome dado a seção. - Não é necessário inserir nada entre as tags <a> e </a>; - </a>: utilizada para encerrar a tag. Com essa tag você inserirá uma imagem ou texto que indicará ao usuário que ao clicar neste tipo de link, este irá guiá-lo até o local onde foi inserida a âncora. <a href= #Nome da Seção > Texto ou imagem </a>
Linguagem HTML <a href= #Nome da Seção > Texto ou imagem </a> Onde: - <a = é a abertura da tag de link; - href= #Nome da Seção = indica o nome da seção que será acessada. - Texto ou imagem = indica o texto ou a imagem que receberá o link. - </a> = encerra a TAG. - O símbolo # indica ao navegador que o link se encontra na mesma página. É indispensável o uso de #.
Linguagem HTML <a href=../../index.html >Página Inicial </a> Sendo que: - <a = é a tag de abertura de link; - href = especifica a localização de qualquer tipo de recurso da internet, incluindo arquivos HTML. -../../index.html = indica que o arquivo index.html está 2 NÍVEIS (../../ ) inferior a página atual, ou seja, para exibir o arquivo index.html, teremos que retornar dois diretórios, sendo estes os diretórios materias/pagina1. (Observe a figura 5.2) - Página Inicial = é o texto que será utilizado como link, para que ao clicarmos este nos direcione para o local indicado no atributo href.
Linguagem HTML Quando criamos páginas em HTML devemos ter sempre atenção ao fato delas poderem ser apresentadas de forma diferente em cada navegadores (browsers) ou em computadores diferentes. O ASPECTO GRÁFICO PODE DIFERIR ENTRE COMPUTADORES - As diferenças nos tamanhos das janelas dos navegadores fazem com que o número de linhas varie muito. Por esse motivo não seremos capazes de controlar nem o número de linhas nem os locais em que acontecem as mudanças de linhas. - Sempre que quiser inserir linhas em branco use <br>. - Já observou alguma vez uma página da internet, e se perguntou: Quais as instruções que foram utilizadas?. Se estiver utilizando o Internet Explorer e quiser descobrir as instruções, vá até o menu Exibir e escolha a opção Código Fonte, ou clique com o botão direito do mouse e selecione a opção Exibir Código Fonte.
Correio Eletrônico (e-mail) O Correio Eletrônico é um dos serviços mais antigos e utilizados na rede mundial. Em segundos, mensagens são enviadas a um destinatário, independente do lugar em que ele esteja ao lado ou em qualquer outro lugar do planeta. O destinatário não precisa estar conectado à rede no momento da chegada da mensagem. O texto fica armazenado na caixa postal eletrônica do usuário até que ele a acesse. A mensagem pode ser respondida, impressa ou encaminhada imediatamente após a sua leitura. Caso a mensagem não tenha sido entregue ao destinatário, ela é enviada de volta para a caixa postal
Ferramentas de busca na internet O conceito básico de uma ferramenta de busca parte da premissa de que todos os sites de busca devem criar uma base grande de informações agregando todo tipo de assunto provável e imaginável. Portanto, tais ferramentas permitem que você/usuário encontre informações sobre qualquer assunto que desejar, economizando tempo e produzindo com muita mais agilidade.
Serviços de Internet Telnet (Terminal Virtual) Em alguns ambientes de sistemas computacionais, por segurança, faz-se necessário o acesso através de emulação de terminal virtual. Por ser um acesso remoto, todas as informações digitadas no teclado do computador são enviadas para que sejam reconhecidas pelo sistema ao qual se está conectado, e ele deve enviar como resposta informações que serão mostradas no nosso monitor. Para a execução deste tipo de tarefa utilizamos o aplicativo TELNET.
Serviços de Internet Ele é um protocolo que permite executar uma operação em um sistema remoto através de uma sessão de terminal, com aplicação na máquina remota (servidor) que recebe as teclas acionadas pelo nosso computador como se fosse sistema local.
Serviços de Internet FTP (File Transfer Protocol) O FTP é um serviço de donwload mais rápido, pois o usuário se conecta diretamente ao diretório do computador de onde se quer buscar o arquivo. Ele faz muito mais do que baixar programas - ele pode renomear e eliminar arquivos, bem como, criar, modificar e excluir diretórios.
Serviços de Internet Salas de bate-papo (Chat) Atualmente, um dos serviços mais populares da Internet é o da conversa virtual. Funcionários de empresas que buscam informações profissionais podem acessar uma aplicação que os coloca frente a outro colega em qualquer parte do do mundo, face a face, através de uma câmera. Desta forma, eles podem trocar idéias sobre detalhes de um projeto ou até mesmo realizar o fechamento de negócios.
Serviços de Internet Telefone via Internet e serviços de videoconferência O surgimento de uma variedade de sistemas que viabilizam o uso do telefone via-internet fez com que este tipo de recurso se tornasse bastante utilizado e um tanto comum, entre usuários. Geralmente as empresas os utilizam, com frequência, prevendo promover uma redução de custos nos gastos com telefones e viagens de negócios.
O que é um aplicativo web? Os aplicativos web recebem este nome porque são executados na internet. Ou seja, os dados ou os arquivos que você trabalha são processados e armazenados dentro da web. Estes aplicativos geralmente não precisam ser instalados no seu computador.
O que é um aplicativo web? O conceito de aplicativos web está relacionado com o armazenamento na nuvem. Toda a informação é guardada de forma permanente em grandes servidores de internet e estes enviam a nossos dispositivos ou computadores os dados requeridos neste momento, deixando uma cópia temporária dentro deles.
Correio eletrônico Serviços como Gmail e Yahoo! São executados nos navegadores e executam as mesmas tarefas que programas de correio eletrônico como Microsoft Outlook. Depois de se registrar a um serviço de correio eletrônico, você pode utilizá-lo imediatamente, sem requerimentos de instalação. Os seus e-mails permanecem armazenados na nuvem.
Google Docs É um conjuntos de programas executados no seu navegador, funciona igual ao Microsoft Office, uma vez que é utilizado para criar documentos, planilhas, apresentações, entre outros. Os documentos ficam armazenados na nuvem, o que facilita compartilhar os seus documentos com outras pessoas. Você pode fazer tudo isto em qualquer dispositivo, em qualquer lugar e hora que você queira. O único requisito é ter uma conexão com a internet.
Google Drive Quando utilizamos este aplicativo web e abrimos um documento com Google Docs, o navegador que você estiver utilizando se comunicará com a rede de servidores para que você possa ver e editar o documento. A medida que você vai editando o documento, o seu navegador trabalhará instantaneamente com os servidores exteriores para garantir que todas as modificações estejam sendo guardadas. Quando você terminar, é possível deixar armazenado o documento ou baixar no seu computador.
Vantagens dos aplicativos web - Muitos aplicativos são gratuitos. - Você pode acessar a sua informação em qualquer lugar e momento. - Não depende do seu computador ou de algum outro equipamento específico já que o conteúdo está armazenado na web. - Muitos aplicativos web permitem que várias pessoas trabalhem simultaneamente neles. - Os documentos e arquivos não vão ser perdidos nem apagados a menos que você queira assim.
Os servidores Quando você usa um aplicativo web, por mais que você o esteja manuseando no seu computador ou num dispositivo móvel, a maior parte do processamento é realizado mediante a uma rede de servidores. Estes servidores reúnem todo o seu poder de processamento com o fim de executar aplicativos de todo o mundo. Eles utilizam servidores especializados para armazenar os dados com os quais você está trabalhando, assim como também os demais usuários.
Exercício Segurança na Internet Realizar uma pesquisa sobre Segurança na Internet. Entregar uma redação escrita em uma folha de almaço com pelo menos 30 linhas. Indicar as fontes (sites visitados) de pesquisa. Durante a narrativa devem ser respondidas as perguntas: O que é firewall? O que são anti-vírus? O que são spywares? Exemplo de como indicar as fontes: Site: http://www.mirandamaster.com/2006/12/veja-comparao-entre-ossistemas-linux-e.html (Acesso em 23/03/2016 às 18:30hs)