atps - ferramentas para sistemas web

FACULDADE ANHANGUERA-FACNET

Bacharel em Sistemas de informaçãoProfessor: Fernando Gonçalves de Oliveira

Ferramenta para Sistema Web1º Semestre

Noturno

Almir Filho Lima Costa RA: 1565257930Paulo Henrique Rosa dos Santos RA: 1578972355Rodrigo Alison Paes Ferreira RA: 1590856389Robert Cerqueira de Oliveira RA: 1596852846William da Silva Sales RA: 1570206706

Atividades Práticas Supervisionadas

ETAPA 1

Taguatinga, DFAbril de 2015

Introdução

Neste trabalho, é realizado em grupo a construção de Site para a Empresa ESCTEC BRASIL MOVEIS, utilizamos nesta primeira etapa HTML e CSS, esse trabalho tem como objetivo passar para os colegas ou para qualquer pessoa que estiver lendo o conhecendo que obtemos com esse trabalho. Apresentaremos ao longo do trabalho três pontos que são HTML e CSS, HTML5 imagens e códigos do que foi solicitado na ATPS deste trabalho.

Relatório 01 – HTML e CSS

1.1 HTML e CSS

HTML

HTML significa Hyper Text Markup Language e é a linguagem de marcação de Hipertexto, ou seja, e a linguagem de como são escritas a página da web, interpretadas pelo navegador.

As informações estão ligadas na forma de páginas ligadas entre si. A página vai ser transferida de um computador remoto para o usuário, onde o browser vai fazer o trabalho de interpretar os códigos naquele documento e mostrar a página que o usuário deve vê.A Web está estruturada em dois princípios básicos:HTTP que significa (Hiper Text Transfer Protocol) é o HTML (Hiper Text Markup Language).

HTTP é o protocolo de transferência de hipertexto, ou seja, é o protocolo que permite a navegação na Web, com o simples clicar do mouse sobre o texto (ou imagem) que esteja associado a outro link

Requisitos para o desenvolvimento de uma página WEB

Existem três requisitos básicos para o desenvolvimento de uma página WEB que devemos conhecer para desenvolver uma página da WEB que são eles:

1.Conhecer a linguagem HTML para escrever o código fonte de sua página;

2.Editor de texto para gerar o seu código fonte (bloco de notas, Front Page,Dremweaver, Notbeeans, Notepad entre outros);

3. Um navegador de internet (browser) para visualizar as suas páginas (Internet Explorer, Netscape, Mozila e Google Crhome entre outros).

TAGs

Os comandos HTML são chamados de TAGs, compreendem de 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 sinais de “menor que” (<) e “maior que” (>);

Geralmente são utilizadas aos pares, sendo que a TAG de finalização deum comando qualquer seja finalizada com a precedência de uma barra (/).

Exemplos:

TAG único:

<br>

TAG duplo:

<center> xxx </center>

Iniciando um documento em HTML

Todo o documento HTML fica contido entre os TAGS: <HTML> e </HTML>. Uma página HTML possui três partes básicas: estrutura principal, um cabeçalho e um corpo de página.

Possui uma estrutura dividida em 4 TAGs básicas:

<HTML> ... </HTML>

<HEAD> ... </HEAD>

<TITLE> ... </TITLE>

<BODY> ... </BODY>

HTML-São usados para delimitar os comandos HTML, indicam o início e o fim de um documento.

HEAD-Usado para indicar parâmetros de configuração do documento, também para exibir o título na barra de títulos do browser.

TITLE- Indica o título do documento para o browser. Esta TAG deve estar sempre dentro das TAGs <HEAD></HEAD>.

BODY- Envolvem a seção de corpo do documento. Aqui fica o conteúdo principal da Home Page.

CSS

CSS é a mesma coisa que Style Sheets e que Folhas de Estilo. Você já deve ter visto esses nomes em vários lugares. CSS é mais uma forma de aperfeiçoar seus documentos, o CSS tem muitos tipos de definição aqui veremos muitas delas.

O CSS formata a informação entregue pelo HTML. Essa informação pode ser qualquer

Coisa: imagem,texto,vídeo,áudioou qualquer outro elemento criado.Grave isso: CSS formata a informação. Essa formatação na maioria das vezes é visual, mas não necessariamente. No CSS Aural, nós manipulamos o áudio entregue ao visitantepelo sistema de leitura de tela.

Com o CSS que nós conhecemos podemos formatar algumas características básicas:cores, background, características de font, margins, paddings, posição e controlamos de uma maneira muitoartesanal e simples a estrutura do site com a propriedade float.Com o CSS ele nos ajudar em vários aspectos como por exemplo economizar o tempo, Diminuir o tamanho do código de sua página, a página irá carregar mais rapidamente, terá mais facilidades de manter e fazer alterações na página e ter mais controle no layout da página.

SELETORES COMPLEXOS

A propriedade é a característica que você deseja modificar no elemento. O valor é o valor referente a esta característica. Se você quer modificar a cor do texto, o valor é um Hexadecimal, RGBA ou até mesmo o nome da cor por extenso. Até aqui, nada diferente. Muitas vezes você não precisa aprender do que se trata a propriedade, basta saber que existe e se quiser decorar, decore. Propriedades são criadas todos os dias e não é um ato de heroísmo você saber todas as propriedades do CSS e seus respectivos valores.

Os seletores são a alma do CSS e você precisa dominá-los. É com os seletores que você irá escolher um determinado elemento dentro todos os outros elementos do site para formatá-lo. Boa parte da inteligência do CSS está em saber utilizar os seletores de uma maneira eficaz, escalável e inteligente.

O seletor representa uma estrutura. Essa estrutura é usada como uma condição para determinar quais elementos de um grupo de elementos serão formatados. Seletores encadeados e seletores agrupados são a base do CSS. Você os aprende por osmose durante o dia a dia. Para você lembrar o que são seletores encadeados e agrupados segue um exemplo.

Exemplo de seletor encadeado:

div p strong a {

color: red;}

Este seletor formata o link (a), que está dentro de um strong, que está dentro de P e que por sua vez está dentro de um DIV.

Exemplo de seletor agrupado:

strong, em, span {

color: red;

}

Você agrupa elementos separados por vírgula para que herdem a mesma formatação.

Estes seletores são para cobrir suas necessidades básicas de formatação de elementos. Eles fazem o simples. O que vai fazer você trabalhar menos, escrever menos código CSS e também menos código Javascript são os seletores complexos.

Como criar estilos em CSS

Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:

Elemento {atributo1: valor; atributo2: valor ...}

Explicação desta sintaxe:

Elemento - descreve o elemento de design ao qual o estilo será aplicado. A mesma tag HTML mas, sem os sinais de maior e menor. Essa parte da regra é às vezes chamada de seletor.

Atributo - o aspecto específico do elemento que você quer usar como estilo. Deve ser um nome de atributo CSS válido, como o atributo font-size.

Valor - a configuração aplicada ao atributo. Deve ser uma configuração válida para o atributo em questão, como 20pt (20 pontos) para font-size.

Atributo: valor - à parte declaração da regra. Você pode atribuir múltiplas declarações se desejar separá-los com ponto-e-vírgula (;). Não coloque um ponto-e-vírgula depois da última declaração.

Tipos de Folhas de Estilo

Você pode definir regras de CSS em três lugares. E, por definição, pode utilizar uma combinação dos três métodos nos seus web sites. A maneira como as regras interagem entre si está relacionada à parte "em cascata”. Os três lugares são:

1) em um documento separado fora de todos os documentos HTML;

2) no cabeçalho de um documento HTML e,

3) dentro de uma tag de HTML. Cada um destes métodos tem um nome e afeta as páginas HTML em seu site de um modo diferente.

Externo - Externo significa que você coloca as regras de CSS em um arquivo separado, e então sua página HTML pode fazer um link para esse arquivo. Essa abordagem lhe permite definir regras em um ou mais arquivos que podem ser aplicadas em alguma página da sua web site.

Incorporado - Incorporado significa que você especifica as regras de CSS no cabeçalho do documento. As regras incorporadas afetam somente a página atual.

Inline-Significa que você especifica as regras de CSS dentro da tag de HTMLEssas regras afetam somente a tag atual.

Atalhos do CSS

Alguns atributos de CSS lhe permitem fazer diversas configurações em uma declaração. Por exemplo, suponha que você queira definir diversos aspectos da fonte utilizada para tags H1, como segue:

H1 {

font-style: italic;

font-weight: bold;

font-size: 18pt;

font-family: 'Times Roman'}

A sintaxe do CSS é simples:Seletor {

Propriedade: valor;}

1.2 Website

HTML5

O HTML5 é a nova versão do HTML4. Enquanto o WHATWG define as regras de marcação que usaremos no HTML5 e no XHTML, eles também definem APIs que formarão a base da arquitetura web. Essas APIs são conhecidas como DOM Level 0.

Um dos principais objetivos do HTML5 é facilitar a manipulação do elemento possibilitando o desenvolvedor a modificar as características dos objetos de forma não intrusiva e de maneira que seja transparente para o usuário final.

Ao contrário das versões anteriores, o HTML5 fornece ferramentas para a CSS e o Javascript fazerem seu trabalho da melhor maneira possível. O HTML5 permite por meio de suas APIs a manipulação das características destes elementos, de forma que o website ou a aplicação continue levee funcional.

O HTML5 modifica a forma de como escrevemos código e organizamos a informação na página.Seria mais semântica com menos código. Seria mais interatividade sem a necessidade de instalação de plugins e perda de performance. É a criação de código interoperável, pronto para futuros dispositivos e que facilita a reutilização da informação de diversas formas. O HTML5 está sendo criado para que seja compatível com os browsers recentes, possibilitando a utilização das novas características imediatamente.

O HTML5 e suas mudanças

Quando o HTML4 foi lançado, o W3C alertou os desenvolvedores sobre algumas boas práticas que deveriam ser seguidas ao produzir códigos client-side. Desde este tempo, assuntos como a separação da estrutura do código com a formatação e princípios de acessibilidade foram trazidos para discussões e à atenção dos fabricantes e desenvolvedores.

Desenvolvido originalmente por Tim Berners-Lee o HTML ganhou popularidade quando o Mosaic - browser desenvolvido por Marc Andreessen na década de 1990 - ganhou força. A partir daí, desenvolvedores e fabricantes de browsers utilizaram o HTML como base, compartilhando as mesmas convenções.

1.3 Website

De acordo com o que foi pedido no Passo 3 da ATPS, para Criar as páginas A empresa, Missão, Visão e Valores para a ESCTEC utilizando HTML e CSS, utilizamos aqui um arquivo chamado “index.html” com os seguintes códigos apresentados logo abaixo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

<head>

<title>ESCTEC Brasil</title>

<meta http-equiv="content-language" content="pt-br">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<meta name="author" content="ESCTEC">

<meta name="description" content="ESCTEC">

<meta name="keywords" content="sites, web, desenvolvimento,html, css">



<link rel="stylesheet" type="text/css" href="css/layout.css">

<link rel="stylesheet" type="text/css" href="css/submenu.css">

<link rel="shortcut icon" href="img/icon.jpg" type="image/x-icon">

</head>

<body>

<div class="container">

<img src="img/topo.jpg" alt="Logo Esctec Brasil"/>

<div class="menu">

<ul class="menu-top"/ul>

<li><a href="#">HOME</a></li>

<li><a href="#">A EMPRESA</a>

<ul>

<li><a href="missão.html">Missão</a></li>

<li><a href="visão.html">Visão</a></li>

<li><a href="valor.html">Valor</a></li>

</ul>

</li>

</div>

</body>

</html>

Para criar as abas Missão, Visão e Valores foram criados três arquivos diferentes com os nomes de “missão.html, visão.html e valores.html” todos eles vinculados ao arquivo “index.html” com os seguintes códigos:

<li><a href="missão.html">Missão</a></li>

<li><a href="visão.html">Visão</a></li>


Sendo assim, as três abas ficaram como Sub Menu da aba “A Empresa”. Criamos um efeito para quando o cliente passar mouse sobre a aba A Empresa aparecer as aba missão, visão e valores, confira as imagens:

Aqui sem passar o mouse sobre A EMPRESA.

Aqui desce as abas quando passamos o mouse sobre A EMPRESA

Para criar esse efeito foi criado dois arquivos CSS com os nomes de layout.css e submenu.css, com os seguintes códigos:

Layout.css - Código

body{

background: #E5E5E5;

margin: 0;

padding: 0;

font-family: Tahoma, arial,verdana;

font-size: 13px;

color: #000;

}

a{ text-decoration: none; color: #000;}

ul{

list-style: none;

margin: 0;

padding: 0;

}

.container{

margin: 0 auto;

width: 750px;

height: auto;

}

/* Menu */

.menu{

background: #CCC;

width: 751px;

height: 35px;

margin: 1px 0 0 0;

padding: 0;

box-shadow: 1px 1px 3px #888888;

-moz-box-shadow: 1px 1px 3px #888888;

-webkit-box-shadow: 1px 1px 3px #888888;

border-radius: 2px;

}

.menu li{

display: inline;

}

.menu-top li a{

width: 50px;

height: 15px;

padding: 8px 40px;

float: left;

text-shadow: 0px 2px 3px #666;

}

.menu-top li a:hover{

background: #393939;

color: #fff;

border-bottom: solid 4px #FF8C00;

border-radius: 2px;

text-shadow:1px 0px 1px #fff;

}

Submenu.css - Código

/* Documento Css */

.menu{

background: #CCC;

width: 751px;

height: 35px;

margin: 1px 0 0 0;

padding: 0;

box-shadow: 1px 1px 3px #888888;

-moz-box-shadow: 1px 1px 3px #888888;

-webkit-box-shadow: 1px 1px 3px #888888;border-radius: 2px;

}

.menu li{

display: inline;

}

.menu li{

position:relative;

float:left;

border-right: 0px solid #DCDCDC;

padding-left:10px;

padding-right: 10px;

background-color: #CCC;

height:28px;

line-height: 25px;

}

.menu li ul {

position: absolute;

top:37px;

left: 8px;

display: none;

}

.menu li:hover ul, .menu li ul li:hover ul, .menu li.over ul, .menu li ul li.over ul

{ display: block;

}

.menu li ul li{

border: 1px solid #696969;

display:block;

width: 110px;

height:25px;

line-height: 10px;

}

Depois de criarmos com muita dedicação o menu “A EMPRESA” no estilo drop drown, partimos para a edição dos arquivos missão.html, visão.html e valores.html e de acordo com o pedido na parte 4 da ATPS vamos apresentar as imagens e códigos de cada uma logo abaixo:

Missão.html

Clicando sobre a aba Missão de acordo com a imagem abaixo:

O Cliente é direcionado a página “Missão” que apresenta o texto descrito na imagem baiaxo:

O código usado para criar essa página foi:

Missão.html - Código


<html>

<head>








</head>

<body>


<img src="img/topo.jpg" alt="Logo Esctec Brasil"/>



<div class="menu">


<li><a href="#">HOME</a></li>


<ul>

<li><a href="#">Missao</a></li>

<li><a href="#">Visao</a></li>

<li><a href="#">Valor</a></li>

</ul>

</li>

</div>

</body>

</html>

Visão.html

Clicando sobre a aba Visão de acordo com a imagem abaixo:

O Cliente é direcionado a página “Visão” que apresenta o texto descrito na imagem baiaxo:

Visão.html - Código


<html>

<head>





</head>

<body>


<img src="img/topo.jpg" alt="Controle Xbox 360" />



<div class="menu">


<li><a href="index.html">HOME</a></li>


<ul>

<li><a href="missão.html">Missao</a></li>

<li><a href="visão.html">Visao</a></li>


</ul>

</li>

</div>

</body>

</html>

Valor.html

Clicando sobre a aba valor de acordo com a imagem abaixo:

O Cliente é direcionado a página “Valor” que apresenta o texto descrito na imagem abaixo:

Valor.html – Código


<html>

<head>




</head>

<body>


<img src="img/topo.jpg" alt="Controle Xbox 360" />



<div class="menu">


<li><a href="index.html">HOME</a></li>


<ul>

<li><a href="missão.html">Missao</a></li>

<li><a href="visão.html">Visao</a></li>


</ul>

</li>

</div>

</body>

</html>

Conclusão:

Este trabalho foi fundamental para aprimorar nossos conhecimentos em HTML e CSS, com certeza o grupo que fez este trabalho nunca mais vai esquecer o que é HTML e CSS sabemos o quanto é empolgante trabalhar com essas ferramentas e buscando conhecimento seremos um programador de sucesso. Finalizamos aqui a nossa ETAPA 1 ATPS - Ferramentas para Sistemas Web.

atps - ferramentas para sistemas web

Documents