Desenvolvimento para Internet. Professor Ariel da Silva Dias HTML

Transcrição

1 Desenvolvimento para Internet Professor Ariel da Silva Dias HTML

2 Plano de Aulas Data 06/out 13/out 20/out 27/out 03/nov 10/nov 17/nov 24/nov 01/dez 08/dez 15/dez Conteúdo INÍCIO - HTML/CSS FERIADO JAVASCRIPT JAVASCRIPT NODEJS NODEJS FERIADO NODERED NODERED NODERED - WATSON IBM NODERED - WATSON IBM

3 Desenvolvimento para Internet Internet: rede mundial que interliga milhões de computadores coisas em todo o mundo Web: sistema de documentos que são interligados e executados na Internet. Web 1.0: é considerada como estática, seu conteúdo não pode ser utilizado pelo usuário final. Produção centralizada de conteúdo; Web 2.0: é considerada dinâmica, logo permite a interação (participação) do usuário com a estrutura e conteúdo da página. Esta é a Web Colaborativa ou Participativa onde muitos produzem e muitos consomem; Web 3.0: tem o objetivo de mudar a forma de pesquisa para facilitar a vida do usuário. Suas ferramentas servirão para melhorar a vida do usuário. Exemplo de aplicações: Wolfram Alfa e na Siri da Apple:

4 Linguagens Client-Side Você deve ter ouvido um nome diferente Back-End e Front-End Linguagens Client-Side: linguagens que o BROWSER (navegador) entende HTML; CSS; JavaScript. Se fizermos um código em uma linguagem Client-Side para calcular a soma 2+2, esta operação será executada no browser ou navegador do usuário.

5 Linguagens Server-Side Você deve ter ouvido um nome diferente Back-End e Front-End Linguagens Server-Side: linguagens que o SERVIDOR entende PHP; ASP; Java; Ruby; Python; Node-JS*. Se fizermos um código em uma linguagem Server-Side para calcular a soma 2+2, esta operação será executada no servidor

6 Linguagens Client-Side Exibindo Informações na WEB A linguagem que o navegador consegue interpretar é o HTML; Exemplo SENAI - Serviço Nacional de Aprendizagem Industrial. Bem-vindo ao SENAI Mariano Ferraz. O RESULTADO OBTIDO NÃO É O ESPERADO! Pós-Graduação em Internet das Coisas Área: Mecatrônica Unidade: Escola Senai Mariano Ferraz - Rua Jaguaré Mirim, 71 - Vila Leopoldina São Paulo CEP: Telefone: senaileopoldina@sp.senai.br

7 Linguagens Client-Side Exibindo Informações na WEB Para exibirmos as informações com a formatação desejada, é necessário que cada trecho do código tenha uma marcação indicando qual é o significado dele. Essa marcação influencia no modo em que o texto é exibido. Veja o código a seguir com as marcações de formatação.

8 Linguagens Client-Side Exibindo Informações na WEB <!DOCTYPE html> <html> <ul> <head> <li> Área: Mecatrônica </li> <title>senai</title> <meta charset= utf-8 > <li> Unidade: Escola Senai Mariano Ferraz - Rua Jaguaré Mirim, 71 - Vila Leopoldina São Paulo CEP: </head> <li> Telefone: </li> <body> <h1>senai - Serviço Nacional de Aprendizagem Industrial.</h1> </li> </ul> <li> senaileopoldina@sp.senai.br <h2>bem-vindo ao SENAI Mariano Ferraz</h2> </body> </html> <p> Pós-Graduação em Internet das Coisas </p>

9 Linguagens Client-Side Exibindo Informações na WEB Vimos que cada trecho do código é limitado por uma tag. No código anterior vimos a tag <h1> no título da página <h1>senai - Serviço Nacional de Aprendizagem Industrial.</h1> A tag é definida com < e >, e seu nome, neste caso a tag chama-se h1. Algumas tags possuem CONTEÚDO, neste exemplo o conteúdo é o nome da página SENAI - Serviço Nacional de Aprendizagem Industrial. Para determinar onde o conteúdo termina, delimitamos com uma tag com uma barra antes do nome </h1>.

10 Linguagens Client-Side Exibindo Informações na WEB Outras tags possuem ATRIBUTOS dentro da definição, como por exemplo, usamos a tag <img> e, para indicar qual imagem carregar, usamos o ATRIBUTO src: <img src=../image/senai-logotipo.png > Como esta tag não possui conteúdo então não é necessário utilizar uma tag de fechamento.

11 Linguagens Client-Side Exibindo Informações na WEB Um documento HTML válido precisa seguir obrigatoriamente a estrutura de tags: <html>, <head> e body. <html> Insere-se no inicio do documento html; Como conteúdo desta tag declaramos outras duas: <head> e <body>; <head> e <body> são irmãs, ou seja, estão no mesmo nível hierárquico em relação a sua tag pai <html>; <head> Contém informações sobre o documento que são de interesse apenas do navegador; <body> Contém o corpo do documento que será exibido na tela.

12 Linguagens Client-Side Exibindo Informações na WEB Tags Heading <h1> a <h6> <h1> título principal <h6> título de menor importância Parágrafo <p> <p> Pós-Graduação em Internet das Coisas </p> Recomenda-se que esta tag seja conteúdo de alguma tag filha da tag <body> Marcações de ênfase Texto mais forte (negrito) <strong> CONTEÚDO </strong> Texto com ênfase (itálico) <em> CONTEÚDO </em> Diminuir o tamanho do texto <small> CONTEÚDO </small>

13 Linguagens Client-Side Exibindo Informações na WEB Tag <img> Define uma imagem em uma página HTML; Necessita de dois atributos: src (local da imagem) e alt (texto alternativo); Tag <figure> O HTML 5 introduziu 2 novas tags <figure> e <figcaption> <figure> tag principal, define uma imagem com a conhecida tag <img> <figurecaption> adiciona uma legenda a imagem <figure> <img src="img/predio-senai.png" alt= Foto do Senai Mariano Ferraz"> <figcaption>senai Mariano Ferraz Fachada</figcaption> </figure>

14 Linguagens Client-Side Exibindo Informações na WEB Indentação: Esta é uma prática de limpeza do código, utilizada para facilitar a leitura do mesmo. É o uso correto de recuos ou indentação no HTML; Alinhamos elementos irmãos na mesma margem. Adicionamos alguns tabs para elementos filhos. Comentários Para manter o código legível é recomendada a adição de comentários antes e depois da abertura das tags  <div id="header"> <p>esse parágrafo está "dentro" da área principal.</p> </div>

15 Linguagens Client-Side Exibindo Informações na WEB Estrutura dos arquivos de um projeto

16 Linguagens Client-Side Atividade 1 (Sobre.html) 1. Baixe o conteúdo preparado anteriormente da página sobre para a sua área de trabalho (clique aqui);

17 Linguagens Client-Side Atividade 1 (Sobre.html) 2. Dentro da pasta senai vamos criar o arquivo sobre.html com a estrutura básica, contendo <!DOCTYPE html>, <html>, <head> e <body>;

18 Linguagens Client-Side Atividade 1 (Sobre.html) 3. A página deve ter uma imagem com o logo do SENAI, um título e um texto falando sobre ela. O texto para ser colocado na página está no arquivo sobre.txt em: senai/textos. São vários parágrafos que devem ser adaptados para HTML apropriado (coloque os parágrafos entre as tags <p> </p>); Use a tag <img> para o logo e a tag <h1> para o título. Seu HTML deve ficar assim, no final: <img src="img/logo-senai.png"> <h1>sobre</h1> <p> Em três de novembro de 1943, o SENAI inicia o atendimento às demandas da região oeste de São Paulo através de uma escola instalada provisoriamente em um terreno... </p>

19 Linguagens Client-Side Atividade 1 (Sobre.html) 4. Um texto corrido sem ênfase é difícil de ler. Use negritos <Strong> e itálicos <em> para destacar partes importantes. Use a tag <Strong> para ênfase mais forte em negrito;

20 Linguagens Client-Side Atividade 1 (sobre.html) 5. A página deve ter duas imagens. A primeira apresenta a fachada do SENAI Vila Leopoldina e deve ser inserida após o segundo parágrafo do texto. A outra é uma imagem da inauguração do centro médico e deve ser colocada dentro do subtítulo parcerias (lista de parcerias). As imagens podem ser carregadas com a tag <img>, apontando seu caminho. Além disso, no HTML5, podemos usar as tags <figure> e <figcaption> para destacar a imagem e colocar uma legenda em cada uma. Ambas as imagens estão em senai/img. Verifique o resultado no navegador. Devemos já ver o conteúdo e as imagens na sequência, mas sem um design muito interessante.

21 Linguagens Client-Side Estilizando com CSS Ao escrever HTML, é realizada a marcação do conteúdo da página com tags que melhor representa aquele conteúdo. Porém, ao abrir a página no navegador, é possível perceber que o navegador mostra as informações com estilos diferentes. H1 fica em negrito com fonte maior; Parágrafos ficam separados entre si; Imagem ganha uma legenda; Etc. Mas podemos deixar os sites ainda mais elegantes, customizando o design dos elementos das páginas.

22 Linguagens Client-Side Estilizando com CSS Antigamente utilizava-se tags de estilo diretamente no html, conforme abaixo: <h1><font color="red">senai Mariano Ferraz</font></h1> TAGs de estilo em HTML são má prática e não devem ser usadas; Em seu lugar surgiu o CSS. Agora, regras de estilo não aparecem mais no conteúdo de texto do HTML, apenas no CSS.

23 Linguagens Client-Side Estilizando com CSS Sintaxe: A sintaxe CSS possui uma estrutura simples: é uma declaração de propriedade e valores separados por um sinal de dois pontos, e cada propriedade é separada por ponto e vírgula: background-color: yellow; color: blue; O elemento que receber estas propriedades terá fundo amarelo e fonte azul; Estas propriedades podem ser declaradas de 3 maneiras diferentes conforme a seguir

24 Linguagens Client-Side Estilizando com CSS Atributo Style <p style="color: blue; background-color: yellow;">

25 Linguagens Client-Side Estilizando com CSS TAG Style <style> p { } </style> background-color: yellow; color: blue; O código no interior da tag <style> indica que estamos alterando a cor do fundo de todos os elementos com a tag p. Dizemos que selecionamos esses elementos pelo nome de sua tag, e aplicamos certas propriedades CSS apenas neles (neste caso, apenas para a tag p).

26 Linguagens Client-Side Estilizando com CSS Arquivo Externo Dentro do arquivo estilos.css colocamos apenas o conteúdo CSS p { } color: blue; background-color: yellow;

27 Linguagens Client-Side Estilizando com CSS Arquivo Externo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sobre a Mirror Fashion</title> <link rel="stylesheet" href="estilos.css"> </head> <body> <p> O conteúdo desta tag será exibido em azul com fundo amarelo! </p> <p> <strong>também</strong> será exibido em azul com fundo amarelo! </p> </body> </html>

28 Linguagens Client-Side Estilizando com CSS Selecionar elementos CSS usando simplesmente o nome da tag p { color: blue; }

29 Linguagens Client-Side Estilizando com CSS Seletor de tag p { color: blue; } Seletor de id #cabecalho{ color: white; text-align: center; }

30 Linguagens Client-Side Estilizando com CSS Seletor hierárquico #rodape img { } margin-right: 35px; vertical-align: middle; width: 94px; O elemento pai rodape é selecionado pelo seu id. O elemento será aplicado somente nos elementos img filhos (no interior) do elemento com id rodape.

31 Linguagens Client-Side Atividade 2 (Sobre.html) 1. Temos uma <figure> com a imagem da fachada do SENAI que queremos centralizar na página (margin auto) e acertar o tamanho (width). Para aplicar essas regras apenas a esse figure e não a todos da página, vamos usar o ID. Coloque um id na <figure> para podermos estiliza-la especificamente via CSS. 2. Crie um rodapé para a página utilizando <div>, que deve ser o último elemento dentro da tag body com o id rodape. 3. Estilize o rodapé. Utilize o id via CSS para selecionarmos apenas o elemento específico que será estilizado. Utilize o seletor de descendentes para indicar um elemento que está dentro do outro. O rodapé terá a cor #777 e a imagem interna deve ficar na lateral esquerda, no tamanho de 94px. 4. Vamos deixar a imagem do centro de treinamento médico flutuando para a direita no texto na seção Parcerias. Para isso use a propriedade float.

32 Linguagens Client-Side Processo de Desenvolvimento de uma Tela Wireframes; O HTML é exibido na página de acordo com a ordem de leitura do idioma da página;

33 Linguagens Client-Side Processo de Desenvolvimento de uma Tela Pelo nosso layout e pelo exemplo de wireframe, podemos definir as principais áreas de nossa página; Teremos um cabeçalho, uma área com estrutura fixa e que pode se repetir em outras páginas do site; Temos o rodapé, área semelhante ao cabeçalho e que pode também se repetir em outras páginas; A área central, que contém informações sobre o SENAI e que pode apresentar conteúdos diferentes em cada página. Seu conteúdo pode modificar entre os diversos tipos de páginas, entretanto sua delimitação é fixa: depois do cabeçalho e antes do rodapé.

34 Linguagens Client-Side Processo de Desenvolvimento de uma Tela Assim sendo, podemos definir essas áreas da seguinte maneira: <body> <header class= logo > <! Conteúdo do Cabeçalho --> </header> <section id= main > <! Conteúdo principal (podem haver vários sections) --> </section> <footer class= rodape fundo > <! Conteúdo do Rodapé --> </footer> </body>

35 Linguagens Client-Side Atividade 3 (Sobre.html) 1. Delimitar as áreas de nossa página com as tags <header>, <section> e <footer> 2. Conclua o estilo da página com os seletores de classe