Herramientas de desarrollo de sistemas web

Unidade Centro Universitário Anhanguera de Dourados MS, Curso Tecnologia em Análise e Desenvolvimento de Sistemas Disciplina Ferramentas para Sistemas Web

Participante Alexandre Felipe Santos Figueiredo RA 6949484693

Tutor a distância: João Alexandre Baldovinotti

Dourados MS, 07/05/2013

Relatório 1 Análise e Layout

Desenvolvemos o wireframe utilizando a ferramenta mockingbird, nesta fase foi criado as posições e elementos das páginas.

Endereço para visualização do wireframe: https://gomockingbird.com/mockingbird/#zek8g8s

Página Home;

Página História da Empresa;

Página de Produtos;

Página de Dicas e Curiosidades;

Página Localização;

Página de Contato;

Relatório 2 Desenvolvimento

Depois de fazer o estudo do wireframe desenvolvemos o site usando o padrão de Tableless é uma forma de desenvolvimento de sites que não utiliza tabelas para disposição de conteúdo na página sugerido pela W3C, pois defende que os códigos HTML deveriam ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados tabulares. Para a disposição da página o recomendado seria usar CSS.

Levamos em conta também no desenvolvimento o IHC, Interação humanocomputador é o estudo da interação entre pessoas e computadores. É uma matéria interdisciplinar que relaciona a ciência da computação, artes, design, ergonomia, psicologia, sociologia, semiótica,

linguística, e áreas afins. A interação entre humanos e máquinas acontece através da interface do utilizador, formada por software e hardware. A tecnologia deve ser usada sempre para maximizar nossas habilidades, e o uso de computadores deve ser o mais simples, seguro e agradável possível. Criação de sistemas difíceis de usar pode inviabilizar o sucesso de softwares que poderiam ser bastante úteis.

HOME

HARDWARE abc

HOME HISTÓRIA DA EMPRESA PRODUTOS DICAS E CURIOSIDADES LOCALIZAÇÃO

CONTATO A Hardware abc é uma inovação no seguimento de revenda, manutenção, consultoria, venda de equipamentos e suporte técnico.Especializada em Tablets, Ultrabooks e periféricos direcionado a empresas que buscam tecnologia de ponta com melhor preço de mercado, deixando assim a seu alcance um alto padrão em tecnologia. Sempre visando um bom relacionamento e satisfação de nossos clientes para atingir seus objetivos e crescermos em conjunto.

HARDWARE abc | Rua Nome da Rua, 00 | Dourados | MS | Tel: [phone] | emal@domínio.com.br

HISTÓRIA DA EMPRESA

HARDWARE abc HOME HISTÓRIA DA EMPRESA PRODUTOS

DICAS E CURIOSIDADES LOCALIZAÇÃO CONTATO QUEM SOMOS A HARDWARE abc é uma empresa privada, que atua no mercado varejista, com vendas de Ultrabooks e Tablets. Possui uma loja na Av. Paulista, desde 2012, na cidade de São Paulo. A partir de 2013 a HARDWARE abc passou a ter mais um tipo de serviço que é a Internet. Na Internet é possível serem consultados todos os preços dos equipamentos e acessórios comercializados pela HARDWARE abc, e comprá-los via Internet pela loja virtual. Contando com um e-mail para falar com o

cliente pela Internet. A nossa empresa trabalha constantemente para oferecer as melhores ferramentas e modelo de venda do canal voltado para o segmento corporativo e de mercado. NOSSA MISSÃO E COMPROMISSO Vender mais Tecnologia aos clientes que necessitam de uma maior qualidade dos produtos assim como o profissional de TI, pequeno ou médio empresário, caçador de ofertas ou qualquer pessoa que assim como nós é apaixonado por tecnologia de qualquer lugar do Brasil tem a qualidade e a velocidade de suas compras garantidas. Temos como objetivos, criar uma marca forte, bom preço, fidelizar os consumidores e mostrar a importância da tecnologia para o desenvolvimento e crescimento da população. Expandir o negócio, tendo mais consumidores satisfeitos com nossos serviços. POLITICA DE PRIVACIDADE Utilizamos as informações fornecidas pelos nossos clientes apenas para procedimentos administrativos (recebimento de valores ou entrega de mercadorias) ou para identificar o tipo de cliente ou visitante, possibilitando oferecer promoções e vantagens personalizadas para o perfil de cada cliente. Só enviaremos e-mails aos clientes ou visitantes quando permitido previamente por ele durante o cadastro. Também é possível que o cliente sempre que desejar cancele o recebimento de qualquer tipo de e-mail. Garantimos total sigilo e segurança durante a inserção de todos os dados do cliente. As informações são criptografadas durante o processo de compra e o cadeado na barra de status de seu navegador confirma a autenticidade da certificação Thawte, garantido pela alta

tecnologia de criptografia de 128 Bits. Todas as transações na HARDWARE abc estão protegidas pelo certificado de segurança

SSL Thawte, a mais avançada tecnologia em e-commerce utilizada atualmente. Portanto, compre com tranquilidade e conforto na nossa loja. HARDWARE abc | Rua Nome da Rua, 00 | Dourados | MS | Tel: [phone] | emal@domínio.com.br

PRODUTOS

HARDWARE abc HOME HISTÓRIA DA EMPRESA PRODUTOS DICAS E

CURIOSIDADES LOCALIZAÇÃO CONTATO Ultrabook HP Envy 4-1150br com Intel Core i5 4GB 500GB + 32GB SSD LED 14'' Windows 8O Ultrabook HP Envy 4-1150br apresenta alta tecnologia e oferecer o equilíbrio perfeito entre desempenho, conectividade de maneira rápida e prática. Com o design limpo e arrojado, ele se destaca entre os outros notebooks do mercado. Como o único Ultrabook de tela grande com Beats Áudio e um subwoofer. Sem falar da bateria de longa duração, uma exclusiva base de toque macio, uma webcam HD e inovações como o HP CoolSense para mante-lo confortável. R$ 3.499,00 iPad com tela Retina (4ª Geração) Wi-Fi 16GB Branco - AppleO iPad agora "tem a exibição mais espetacular vista em um dispositivo móvel". E ainda mantém a coroa como o melhor tablet do planeta.De acordo com as principais fontes de tecnologia do mundo, o Tablet faz parecer tudo o mais nítido e claro, com um upgrade de lógica na câmera, uma melhora na performance gráfica, e a adição perfeitamente natural da conexão sem fio.

Tudo isso deixa o iPad capaz de muito mais do que você poderia imaginar. R$ 2.229,00 Tablet Samsung Galaxy Tab 2 P5110 com Android 4.0 Wi-Fi Tela 10'' Touchscreen Prata e Memória Interna 16GBO Tablet Samsung é um poderoso dispositivo portátil, que oferece o melhor da internet e serviços móveis ao alcance de seus

dedos em uma plataforma leve e altamente versátil, combinando com seu estilo de vida ativo.Ele é o primeiro Tablet com o Android 4.0, última versão do sistema Google repleto de novas funcionalidades como reconhecimento facial.O Tablet Samsung Galaxy P5100 vem com o sistema operacional Android 4.0, um processador 1 GHZ Dual Core deixando-o com mais velocidade. R$ 1.899,00 HARDWARE abc | Rua Nome da Rua, 00 | Dourados | MS | Tel: [phone] | emal@domínio.com.br

DICAS E CURIOSIDADES

HARDWARE abc

HOME HISTÓRIA DA EMPRESA PRODUTOS DICAS E CURIOSIDADES

LOCALIZAÇÃO CONTATO Comparativo: qual é o melhor Ultrabook do mercado? Cinco fabricantes aceitaram nosso convite e colocaram seus produtos frente a frente na bancada do Laboratório Digital. A Samsung, com o modelo 530 UB AD1, a HP, com o Fólio 13 2.000, a Dell com o XPS 13, a Asus e o Zenbook UX 31 E, e a Acer, com seu Aspire S3. Aí já temos a primeira observação. Asus e Dell optaram pelo processador top de linha, o Core i7. É claro que isso deu vantagem a eles no quesito velocidade. Mas, por outro lado, isso também pesou no preço final. Leia mais iPad faz três anos: conheça mais da história do tablet da Apple Há três anos, Steve Jobs subia ao palco em mais uma apresentação misteriosa da Apple. O célebre fundador da Apple tinha na mão mais um dos equipamentos da companhia que prometiam mudar o mundo e realmente mudou, pelo menos em alguns aspectos. O iPad veio à luz e trouxe, consigo hábitos, negócios e, claro, sucessores. Leia mais Samsung anuncia Galaxy Tab 2, o primeiro tablet a rodar Android 4.0 A Samsung anunciou nesta segunda-feira (13/02) o lançamento do Galaxy Tab 2

(7 polegadas), o primeiro tablet da empresa a vir com o sistema operacional Ice Cream Sandwich (ou Android 4.0) já instalado de fábrica. A divulgação ocorreu há duas semanas do início do Mobile World Congress, em Barcelona (Espanha), um dos eventos de tecnologia móvel mais importantes do mundo, onde a companhia deve dar mais detalhes sobre os preços do produto. Leia mais

HARDWARE abc | Rua Nome da Rua, 00 | Dourados | MS | Tel: [phone] | emal@domínio.com.br

LOCALIZAÇÃO

HARDWARE abc HOME HISTÓRIA DA EMPRESA PRODUTOS DICAS E CURIOSIDADES LOCALIZAÇÃO

CONTATO Ver mapa maior HARDWARE abc | Rua Nome da Rua, 00 | | Dourados | MS | Tel: [phone] | emal@domínio.com.br

CONTATO

function validar(formulario){ if(formulario.nome.value == ''){ alert("O campo NOME é obrigatório."); formulario.nome.focus(); return false; } if(formulario.rg.value == ''){ alert("O campo RG é obrigatório."); formulario.rg.focus(); return false; } if(formulario.cpf.value == ''){ alert("O campo CPF é obrigatório.");

formulario.cpf.focus(); return false; } if(formulario.telefone.value == ''){ alert("O campo Telefone é obrigatório."); formulario.telefone.focus(); return false; } if(formulario.celular.value == ''){ alert("O campo Celular é obrigatório."); formulario.celular.focus(); return false; } if(formulario.email.value.indexOf(('@' && '.'),0)== -1){ alert("EMAIL invalido."); formulario.email.focus(); return false; } if(formulario.email.value == ''){ alert("O campo EMAIL é obrigatório."); formulario.email.focus(); return false; } } HARDWARE abc HOME

HISTÓRIA DA EMPRESA PRODUTOS DICAS E CURIOSIDADES LOCALIZAÇÃO CONTATO

Preecha os dados abaixo para receber o nosso contato. Nome: RG: CPF: Rua: Número:

Complemento: Bairro: CEP: Cidade: Estado: Telefone: Celular: Email:

Mensagem: HARDWARE abc | Rua Nome da Rua, 00 | Dourados | MS | Tel: [phone] | emal@domínio.com.br

Relatório 3 CSS e Javascript

Foi utilizado o CSS anexado facilitando assim a manutenção e padronização deste site.

@CHARSET "ISO-8859-1"; body {background-color: #949191;width: 1000px;position: absolute;left: 50%;margin-left: 500px;} .logotipo {background-color: #E59300;width: 150px;margin-left: 10px;} div {padding: 10px;} p {font-style: italic;} h4 {text-decoration: underline;} a {color: black;} .leiamais {float: right;}

.rodapeempresa {text-align: center;padding-top: 50px;font-size: small;/*position: absolute;bottom: 10px;left: 50%;margin-left: -500px;*/}

.menuprincipal {margin-bottom: 20px;width: 980px;height: 40px;} .menuprincipalcel {float: left;background-color: #7b7373;padding: 10px 25px;;text-align: center;border: 1px solid;}

/*pagina home*/ .conteudohome {height: 240px;}

#bannerhome {width: 980px;height: 228px;/*border: solid;*/}

#fotoshome {float: left;}

#textohome

{float: left;width: 700px;}

/*pagina localizacao*/

#mapalocalizacao {float: left;}

.fotosfachada {float: right;width:250px;height: 250px;}

.conteudolocalizacao {height: 500px;}

/*pagina produtos*/

.conteudoprodutos {height: 200px;}

.fotoprodutos {float: left;width: 150px;height: 150px;}

.textoprodutos {float: left;width: 783px;height: 150px;}

.precoprodutos {float: right;height: 20px; width: 100px;}

/*pagina

empresa*/

.conteudoempresa

{height: 710px;}

.fotosempresa {float: left;}

#textoempresa {float: left;width: 620px;}

/*pagina contato*/

.conteucontato {height: 520px;}

.formcontatocol1 {width: 400px;height: 500px;float: left;}

.linhacampoform {width: 390px;height: 20px;}

.camponameformulario {float: left;width: 150px;}

.campoformulario {float: left;}

.formcontatocol2 {width: 400px;height: 500px;float: right;}

.camponameformulariotextarea {float: left;width: 325px;}

.campoformulariotextoarea {float: left;}

.campoformulariobtenviar {float: right;width: 97px;}

Para a validação do formulário foi utilizado javascript.

function validar(formulario){ if(formulario.nome.value == ''){ alert("O campo NOME é obrigatório."); formulario.nome.focus(); return false; } if(formulario.rg.value == ''){ alert("O campo RG é obrigatório."); formulario.rg.focus(); return false; } if(formulario.cpf.value == ''){ alert("O campo CPF é obrigatório."); formulario.cpf.focus(); return false; } if(formulario.telefone.value == ''){ alert("O campo Telefone é obrigatório."); formulario.telefone.focus(); return false; } if(formulario.celular.value == ''){ alert("O campo Celular é obrigatório."); formulario.celular.focus(); return false; }

if(formulario.email.value.indexOf(('@' && '.'),0)== -1){ alert("EMAIL invalido."); formulario.email.focus(); return false; } if(formulario.email.value == ''){ alert("O campo EMAIL é obrigatório."); formulario.email.focus(); return false; } }

E validamos todas as páginas no site da w3c neste link: http://validator.w3.org/ Site publicado neste endereço: http://eduardo.y2s.com.br/index.htm