Tópicos em Desenvolvimentos de Sistemas

WEB AULA 1Unidade 1 – Tópicos em Desenvolvimento de Sistemas

 

Olá Pessoal!!!Vamos estudar um

pouco!

HTML ou Hypertext Markup Language (Linguagem de formatação de textos) pode ser escrito em qualquer editor de texto. É uma linguagem de marcação de hipertexto e é usada para criar sites.

É um formato padrão utilizado para o texto e layouts de páginas para web.

Os arquivos HTML normalmente possuem a extensão HTML ou HTM.

Bem como outras linguagens de programação os comandos possuem uma sintaxe própria. A estes comandos denominamos de TAGS.

Para começar o desenvolvimento de sites, inicia-se primeiramente aprendendo HTML, tudo bem que é uma linguagem um tanto quanto estática, mas é preciso aprendê-la.

Antes de mais nada, você aluno deve criar uma pasta chamada "Aprendendo HTML".

Para começar este estudo sobre HTML será utilizado o Bloco de Notas (NotePad)  possibilitando de uma forma bem simples o entendimento dos comandos básicos.

Para abrir o bloco de notas, dê um click no menu iniciar,

Onde aparece “Pesquisar programas e arquivos” é necessário digitar NotePad.

Ou entrar na opção executar e digitar NotePad.

Será utilizado este editor de texto, pois o HTML é uma linguagem sem formatação.

Futuramente o Microsoft FrontPage será o programa de criação para páginas HTML neste curso.

Curiosidade: 1

Como mencionado anteriormente a base de um documento HTML é um TAG.

Veja quais são os TAGs básicos incluídos em qualquer documento HTML:

HTML -> que inicia o documento HTML, nela pode ser acrescentado o atributo lang, cuja finalidade é identificar a língua na qual o documento será escrito;

Head -> TAG responsável pela criação do cabeçalho, com as informações de cabeçalho não visíveis da página, mas na aba da página;

Title -> TAG onde se encontra o título da página;

Body ->  é o corpo do documento, onde será inserido o conteúdo da página.

A partir desta estrutura básica vamos salvar o documento com a extensão HTML.

Para seus estudos crie um documento no bloco de notas com a estrutura básica mencionada acima e o salve com o seguinte nome primeira_pg.html.

Por padrão salve sempre os documentos com nomes minúsculos e sem acentos e caracteres especiais.

Utilizando esta estrutura é possível iniciar uma página HTML bem simples, com um título no TAG de head e um pequeno texto no corpo do documento.

Vamos iniciar um site, colocando um texto atualizado, pois a parte mais importante do site é o conteúdo e a partir deste conteúdo vamos trabalhar um pouco com a formatação de parágrafo. Para isto é necessário a digitação de um texto:

No bloco de notas devemos digitar a estrutura básica:

Para a realização das atividades no decorrer do curso, leiam com muita atenção o estudo de caso descrito no cenário “Locadora Alunos UNOPAR ”.

Cenário Proposto: “Locadora Alunos UNOPAR”A “Locadora Alunos UNOPAR” é uma empresa privada com fins lucrativo, situada na região central da cidade de São Paulo, fundada em 10 de maio de 1992, com o objetivo de locar veículos leves.O diretor Sr. Antônio Carlos, fundador, conta com um quadro de 7 funcionários que atuam em diversas áreas, sendo: Paulo, Ana Paula e José Roberto (departamento de locação), Márcia Regina (departamento de compras), André Augusto (departamento de controle de frota), Marcos (departamento de manutenção) e Maria Helena (departamento financeiro).Seu estoque atual possui 200 veículos classificados em: básico, básico com opcionais, intermediário, intermediário com opcionais, premium, premium com opcionais e utilitários.Sendo os valores da locação distribuídos, respectivamente: R$ 60,00, R$ 80,00, R$ 100,00, R$ 120,00, R$ 150,00, R$ 200,00 e R$ 130,00. Essas classificações em faixas proporcionais, entre o menor e maior preço, segundo os valores de compra.Sua estrutura física possui uma área total de 3.500m2, contando com a área de garagem, vistoria, pequenos reparos e lavagem. A figura 1 apresenta o organograma da “Locadora Alunos UNOPAR ”.Devido à grande demanda, neste ano de 2012 houve a necessidade de contratar uma empresa para desenvolver um software para acesso via internet.A empresa contratada foi a “Turma 2012/1” que assumiu esse compromisso e possui know-how no segmento com foco no desenvolvimento de sistemas WEB.Logo no início a empresa “Turma 2012/1” entrevistou os usuários, começando pelo Sr. Antônio Carlos que apresentou os principais processos de uma forma geral, pois os detalhes serão tratados com os demais funcionários de cada área.

Atualmente, a empresa conta com um controle de frota de acordo com a classificação de cada veículo. Cada veículo possui um controle de status de locação, garantindo que jamais um veículo seja locado para dois ou mais clientes no mesmo período.A “Locadora Alunos UNOPAR” possui, também, um controle de usuários para gerenciar todos os acessos dos funcionários. Estes

usuários realizam todas as operações no atual sistema, lembrando que uma locação é realizada por apenas um usuário, mas que este usuário poderá registrar vários empréstimos.Após a realização do levantamento de requisitos de negócio foi estabelecido o escopo do projeto, conforme ilustrado na figura 2 (em caso de uso) pela empresa “Turma 2012/1”, que teve a aprovação dos stakeholders (todos envolvidos no projeto).

Professores envolvidosMerris MozerAnderson MacedoSérgio Goes

Após copiar o documento acima, salve-o com seguinte nome: eadNro2.HTML, sempre se lembrar da extensão HTML, pois .html e .htm são as duas extensões usadas para salvar documentos HTML. Na sequência abra o documento pelo browser (navegador com que o cliente interpreta o código HTML e mostra para o usuário) e observe a disposição dos parágrafos.

Neste momento pode-se notar que nenhum parágrafo foi respeitado, mesmo tendo escrito e formatado os parágrafos quando o documento é visualizado no browser está completamente desorganizado. Logo, para corrigir estas falhas é necessário formatar os TAGs.

Conhecendo formatação de TAGs:

Ao final do exemplo temos a seguinte linha:“Professores do Primeiro Semestre Merris Mozer Anderson Macedo Sérgio Goes”

Certamente que o documento foi digitado da seguinte forma:     Professores do Primeiro Semestre     Merris Mozer     Anderson Macedo     Sérgio GoesMas a visualização não se comportou da maneira esperada.

  Vamos corrigir?

 

Exercício:

Aproveite os parágrafos já criados nos documentos e trabalhe os alinhamentos mencionados anteriormente.

 

Exercício:

Aproveite os parágrafos já criados nos documentos e trabalhe as formatações mencionadas anteriormente.

Na linha abaixo encontrada no documento que está sendo utilizado como exemplo, temos:

Devido à grande demanda

Olá Pessoal!!!

Vamos estudar um pouco!

Ainda formatando o documento, trabalhar com cores é uma tarefa muito fácil com HTML. Para facilitar o processo de descobrir os códigos de cores existe a ferramenta livre denominada cpick.exe.

Isso poderá ser trabalhado à maneira que desejar.

Vamos alterar a cor da fonte de red para a cor hexadecimal #ff00cc, neste ponto o desenvolvedor não ficará restrito aos nomes de cores conhecidos, como red, blue, yellow, black, entre outras.

Para descobrir as cores em códigos hexadecimais poderá usar a ferramenta cpick.exe.

Então abra o cpick e escolha uma cor para alterar o título.

Para seu conhecimento, o parâmetro size=n representa o tamanho da fonte que será atribuído. O tamanho utilizado em documentos da web é de número 3, mas o desenvolvedor poderá atribuir o que melhor lhe convier, desde que o size encontre-se entre 1 e 7.

Já o parâmetro “face” indica a fonte a ser atribuída no texto, e poderá ser definido mais de um nome de fonte. O browser buscará a primeira fonte mencionada, caso esta não esteja instalada no computador será atribuído a seguinte e assim respectivamente, mas a saber a fonte padrão da internet é a Times New Roman.

E finalizando este tag font é necessário comentar sobre o parâmetro “color”, o responsável por definir a cor do texto. A cor poderá ser escrita pelo seu nome (red, blue, White, Black ...) ou escrita na sua forma hexadecimal.

Para alterar somente a cor do título para #008800 que é um azul seguindo a escrita da seguinte TAGserá:

Após aprender TAGs básicas para trabalhar com HTML, e várias TAGs de formatação e ainda parâmetros de TAGs, podemos trabalhar um pouco com imagens, como inserir imagens nos documentos HTML, como alinhá-las dentre outras opções.

 

Não esquecendo que a estrutura principal de um documento HTML é composta pelos TAGs html, head, body. Usaremos a inclusão de imagem no tag body.

É padrão para os desenvolvedores que tenham pastas separadas para armazenar suas imagens, deixando seus documentos organizados. Assim sendo o primeiro passo é criar uma pasta denominada "imagens" dentro da pasta que está o documentos HTML.

Vamos incluir a imagem de ensino à distância (ead1) logo abaixo do título.

Para fazer esta inclusão é necessário criar um novo parágrafo utilizando o TAG img src com a seguinte linha de comando:

Onde:

img significa imagem

src significa source

e as "" indicará a origem da imagem, ou seja, onde ela se encontra nas pastas de documentos.

Para fixar este conteúdo e utilizando o documento HTML, busque a linha do texto que contém "Continue lendo a reportagem:" e antes desta inclua uma imagem.

Este parâmetro “width” poderá ser trabalhado na sua forma percentual. Por exemplo, 30%, não utilizando o valor absoluto e sim o valor da relativo a 30% do tamanho da imagem, sendo que se a tela for redimensionada a imagem também o será quando utilizado o comando na forma relativa "%". Porém, se utilizar o valor absoluto o tamanho da imagem não será alterado.

Salve o documento e visualize no navegador, note que aparecerá uma numeração antes de cada nome, pois por default a lista ordenada enumera os itens da lista.

Muito bem, agora foi possível demonstrar uma lista de itens numerada.

 

Como transformar algumas áreas do texto em um link?

Agora, você que está lendo este documento, perguntará: Mas e se eu quiser linkar a partir de uma imagem, como fazer?

Seguindo os códigos encontrados no documento .HTML, vamos alterar a linha que insere a primeira imagem:

A vantagem de se abrir uma nova aba é que o usuário não vai parar de navegar na sua página.

 

Continuando com links !!!!

E quando se faz necessário explicar um termo utilizado no documento principal, ou seja, linkar o documento principal com um outro arquivo qualquer. Por exemplo: se no documento existir um termo "Educação", pode ser criado um texto para explicar este termo.

Da maneira que acabamos de definir esta tabela é possível visualizar todos os dados alinhados à esquerda, porém ela não possui nenhuma borda até o momento.

Para incluir bordas na tabela em questão basta incluir parâmetro border no TAG table:

Salve o documento, atualize-o e visualize no seu navegador para notar a diferença, agora existe uma tabela com bordas.