Tpicos em Desenvolvimentos de Sistemas

WEB AULA 1
Unidade 1 Sistemas Tpicos em Desenvolvimento de

Ol Pessoal!!! Vamos estudar um pouco!

HTML ou Hypertext Markup Language (Linguagem de formatao de textos) pode ser escrito em qualquer editor de texto. uma linguagem de marcao de hipertexto e usada para criar sites. um formato padro utilizado para o texto e layouts de pginas para web. Os arquivos HTML normalmente possuem a extenso HTML ou HTM. Bem como outras linguagens de programao os comandos possuem uma sintaxe prpria. A estes comandos denominamos de TAGS. Para comear o desenvolvimento de sites, inicia-se primeiramente aprendendo HTML, tudo bem que uma linguagem um tanto quanto esttica, mas preciso aprend-la. Antes de mais nada, voc aluno deve criar uma pasta chamada "Aprendendo HTML". Para comear este estudo sobre HTML ser utilizado o Bloco de Notas (NotePad) possibilitando de uma forma bem simples o entendimento dos comandos bsicos. Para abrir o bloco de notas, d um click no menu iniciar,

Onde aparece Pesquisar programas e arquivos necessrio digitar NotePad. Ou entrar na opo executar e digitar NotePad. Ser utilizado este editor de texto, pois o HTML uma linguagem sem formatao. Futuramente o Microsoft FrontPage ser o programa de criao para pginas HTML neste curso. Curiosidade: 1

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

Veja quais so os TAGs bsicos includos em qualquer documento HTML:

HTML -> que inicia o documento HTML, nela pode ser acrescentado o atributo lang, cuja finalidade identificar a lngua na qual o documento ser escrito; Head -> TAG responsvel pela criao do cabealho, com as informaes de cabealho no visveis da pgina, mas na aba da pgina; Title -> TAG onde se encontra o ttulo da pgina;

Body -> o corpo do documento, onde ser inserido o contedo da pgina.

A partir desta estrutura bsica vamos salvar o documento com a extenso HTML.

Para seus estudos crie um documento no bloco de notas com a estrutura bsica mencionada acima e o salve com o seguinte nome primeira_pg.html. Por padro salve sempre os documentos com nomes minsculos e sem acentos e caracteres especiais. Utilizando esta estrutura possvel iniciar uma pgina HTML bem simples, com um ttulo 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 contedo e a partir deste contedo vamos trabalhar um pouco com a formatao de pargrafo. Para isto necessrio a digitao de um texto: No bloco de notas devemos digitar a estrutura bsica:

Para a realizao das atividades no decorrer do curso, leiam com muita ateno o estudo de caso descrito no cenrio Locadora Alunos UNOPAR . Cenrio Proposto: Locadora Alunos UNOPAR A Locadora Alunos UNOPAR uma empresa privada com fins lucrativo, situada na regio central da cidade de So Paulo, fundada em 10 de maio de 1992, com o objetivo de locar veculos leves. O diretor Sr. Antnio Carlos, fundador, conta com um quadro de 7 funcionrios que atuam em diversas reas, sendo: Paulo, Ana Paula e Jos Roberto (departamento de locao), Mrcia Regina (departamento de compras), Andr Augusto (departamento de controle de frota), Marcos (departamento de manuteno) e Maria Helena (departamento financeiro). Seu estoque atual possui 200 veculos classificados em: bsico, bsico com opcionais, intermedirio, intermedirio com opcionais, premium, premium com opcionais e utilitrios. Sendo os valores da locao distribudos, respectivamente: R$ 60,00, R$ 80,00, R$ 100,00, R$ 120,00, R$ 150,00, R$ 200,00 e R$ 130,00. Essas classificaes em faixas proporcionais, entre o menor e maior preo, segundo os valores de compra. 2 Sua estrutura fsica possui uma rea total de 3.500m , 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 incio a empresa Turma 2012/1 entrevistou os usurios, comeando pelo Sr. Antnio Carlos que apresentou os principais processos de uma forma geral, pois os detalhes sero tratados com os demais funcionrios de cada rea. Atualmente, a empresa conta com um controle de frota de acordo com a classificao de cada veculo. Cada veculo possui um controle de status de locao, garantindo que jamais um veculo seja locado para dois ou mais clientes no mesmo perodo.

A Locadora Alunos UNOPAR possui, tambm, um controle de usurios para gerenciar todos os acessos dos funcionrios. Estes usurios realizam todas as operaes no atual sistema, lembrando que uma locao realizada por apenas um usurio, mas que este usurio poder registrar vrios emprstimos. Aps a realizao do levantamento de requisitos de negcio foi estabelecido o escopo do projeto, conforme ilustrado na figura 2 (em caso de uso) pela empresa Turma 2012/1, que teve a aprovao dos stakeholders (todos envolvidos no projeto). Professores Merris Anderson Srgio Goes envolvidos Mozer Macedo

Aps copiar o documento acima, salve-o com seguinte nome: eadNro2.HTML, sempre se lembrar da extenso HTML, pois .html e .htm so as duas extenses usadas para salvar documentos HTML. Na sequncia abra o documento pelo browser (navegador com que o cliente interpreta o cdigo HTML e mostra para o usurio) e observe a disposio dos pargrafos. Neste momento pode-se notar que nenhum pargrafo foi respeitado, mesmo tendo escrito e formatado os pargrafos quando o documento visualizado no browser est completamente desorganizado. Logo, para corrigir estas falhas necessrio formatar os TAGs. Conhecendo formatao de TAGs:

Ao final do exemplo temos a seguinte linha: Professores do Primeiro Semestre Merris Mozer Anderson Macedo Srgio Goes Certamente que o documento foi digitado da seguinte forma: Professores do Primeiro Semestre Merris Mozer Anderson Macedo Srgio Goes Mas a visualizao no se comportou da maneira esperada.

Vamos corrigir?

Exerccio: Aproveite os pargrafos j criados nos documentos e trabalhe os alinhamentos mencionados anteriormente.

Exerccio: Aproveite os pargrafos j criados nos documentos e trabalhe as formataes 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 fcil com HTML. Para facilitar o processo de descobrir os cdigos 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 no ficar restrito aos nomes de cores conhecidos, como red, blue, yellow, black, entre outras. Para descobrir as cores em cdigos hexadecimais poder usar a ferramenta cpick.exe. Ento abra o cpick e escolha uma cor para alterar o ttulo.

Para seu conhecimento, o parmetro size=n representa o tamanho da fonte que ser atribudo. O tamanho utilizado em documentos da web de nmero 3, mas o desenvolvedor poder atribuir o que melhor lhe convier, desde que o size encontre-se entre 1 e 7. J o parmetro face indica a fonte a ser atribuda no texto, e poder ser definido mais de um nome de fonte. O browser buscar a primeira fonte mencionada, caso esta no esteja instalada no computador ser atribudo a seguinte e assim respectivamente, mas a saber a fonte padro da internet a Times New Roman.

E finalizando este tag font necessrio comentar sobre o parmetro color, o responsvel 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 ttulo para #008800 que um azul seguindo a escrita da seguinte TAGser:

Aps aprender TAGs bsicas para trabalhar com HTML, e vrias TAGs de formatao e ainda parmetros de TAGs, podemos trabalhar um pouco com imagens, como inserir imagens nos documentos HTML, como alinh-las dentre outras opes.

No esquecendo que a estrutura principal de um documento HTML composta pelos TAGs html, head, body. Usaremos a incluso de imagem no tag body. padro 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 distncia (ead1) logo abaixo do ttulo.

Para fazer esta incluso necessrio criar um novo pargrafo 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 contedo e utilizando o documento HTML, busque a linha do texto que contm "Continue lendo a reportagem:" e antes desta inclua uma imagem.

Este parmetro width poder ser trabalhado na sua forma percentual. Por exemplo, 30%, no 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 tambm o ser quando utilizado o comando na forma relativa "%". Porm, se utilizar o valor absoluto o tamanho da imagem no ser alterado.

Salve o documento e visualize no navegador, note que aparecer uma numerao antes de cada nome, pois por default a lista ordenada enumera os itens da lista. Muito bem, agora foi possvel 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 cdigos encontrados no documento .HTML, vamos alterar a linha que insere a primeira imagem:

A vantagem de se abrir uma nova aba que o usurio no vai parar de navegar na sua pgina.

Continuando com links !!!! E quando se faz necessrio 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 "Educao", pode ser criado um texto para explicar este termo.

Da maneira que acabamos de definir esta tabela possvel visualizar todos os dados alinhados esquerda, porm ela no possui nenhuma borda at o momento. Para incluir bordas na tabela em questo basta incluir parmetro border no TAG table:

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