WEBDESIGN. Atividade Estruturada. Professor Constantino Neto. Campus Praça XI. Erik Lopes de Oliveira

Transcrição

1 WEBDESIGN Atividade Estruturada Professor Constantino Neto Campus Praça XI Erik Lopes de Oliveira

2 Medicina Legalis Objetivos Este site foi desenvolvido para compor o projeto de identidade visual do cliente atualizando o site, de forma a se adequar a nova marca e proporcionar a divulgação da nova identidade da empresa. Publico-alvo O publico-alvo deste segmento é um pouco restrito, como o cliente presta serviço de perícia técnica médica no ramo judiciário. O projeto tem como target a cartela de clientes de meu cliente e apresentação pessoal para novos clientes. Se trata de uma imagem estritamente profissional e sóbria.

3 PESQUISA DE SIMILARES Instituto de medicina pericial Perito med brasil

4 MARCA, ESTUDO DE CORES E SIMILARES Marca do cliente Estudo de cores: Tipografia: Principal: GEORGIA #cead55 Cor principal ABCDEFGHIJKLMNOPQRSTUWYVXZ abcdefghijklmnopqrstuwyvxz #5c534f Cor principal Apoio: CALIBRI ABCDEFGHIJKLMNOPQRSTUWYVXZ #e5e6e8 Cor de apoio abcdefghijklmnopqrstuwyvxz

5 MAPA DO SITE WIREFRAME

6 LAYOUT DA INTERFACE

7 TELAS DO SITE

8 AVALIAÇÃO HEURÍSTICA 0 Não é considerado, totalmente, um problema de usabilidade 1 Problema apenas estético: não necessita ser consertado a menos que tenha tempo extra disponível no projeto 2 Problema menor de usabilidade: o concerto deste problema deverá ser baixa prioridade. 3 Problema maior de usabilidade: é importante conserta-lo, para isso deverá ser dado alta prioridade 4 Catástrofe de usabilidade: é obrigatório conserta-lo, antes do produto ser divulgado INFORMAÇÃO PRINCIPAL: 1 INFORMAÇÃO ADICIONAL: 1 INFORMAÇÃO - CONTATO: 0 MAIN PAGE LOAD: 2 BLOG PAGE LOAD: 3 CONTACT LOAD: 0

9 ANEXOS: Código fonte Main page (Somente para avaliação) <!doctype html> <html lang="pt-br" itemscope itemtype=" <head> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html; charset=utf-8" />  <TITLE>Medicina Legalis - Consultoria medico pericial</title> <META NAME="author" CONTENT="Erik Lopes de Olvieira - Layout e desenvolvimento"> <META NAME="subject" CONTENT="consultoria e perícia em medicina forense"> <META NAME="Description" CONTENT="A Medicina Legalis é uma empresa de consultoria médico pericial que presta serviços para pessoas físicas e jurídicas."> <META NAME="Classification" CONTENT="Dr. Leandro Duarte de Carvalho CRMMG , consultoria e perícia em medicina forense">

10 <META NAME="Keywords" CONTENT="consultoria médica,medicina,medicina forense,medicina legal,perito forense,perícia médica,períto médico,medicina legalis."> <META NAME="Geography" CONTENT="Brazil"> <META NAME="Language" CONTENT="Portuguese"> <META HTTP-EQUIV="Expires" CONTENT="never"> <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="PUBLIC"> <META NAME="Copyright" CONTENT="Medicina Legalis"> <META NAME="Designer" CONTENT="Erik Lopes de Oliveira"> <META NAME="Publisher" CONTENT="Contarte"> <META NAME="Generator" CONTENT="NotePad++ v1.6.5 UNICODE"> <META NAME="distribution" CONTENT="Global"> <META NAME="country" CONTENT="Brazil"> <meta name="rating" content="general" /> <meta name="robots" content="all" /> <meta http-equiv="refresh" content="600">  <link rel="stylesheet" media="screen,projection" type="text/css" href="css/style.css"> <link href="jquery.zrssfeed.css" rel="stylesheet" type="text/css" /> <link rel="shortcut icon" type="image/x-icon" href="/logoicon.ico"> <link rel="icon" href="images/logoicon.ico" type="image/x-icon"/> <link href="//fonts.googleapis.com/css?family=open+sans:600" rel="stylesheet" type="text/css"> <link href="css/fontdeck.css" rel="stylesheet" type="text/css">

11 <script src=" type="text/javascript"></script> <script src="jquery.zrssfeed.min.js" type="text/javascript"></script> <script src="jquery.vticker.js" type="text/javascript"></script>   <script type="text/javascript" src="js/jquery.nivo.slider.js"></script> <script type="text/javascript" src="js/accordion.js"></script>   <! SCRIPT DO SLIDER --> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoslider(); }); </script> <! FIM DO SCRIPT DO SLIDER --> </head>

12  <body> <div id='corpo'>  <header>  <div id="headerwrap"> <span id="clock"></span> <!-- <script> var dayarray=new Array("Domingo","Segunda-feira","Terçafeira","Quarta-feira","Quinta-feira","Sexta-feira","Sábado") var montharray=new Array("Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agost o","setembro","outubro","novembro","dezembro") function getthedate(){ var mydate=new Date() var year=mydate.getfullyear() var day=mydate.getday() var month=mydate.getmonth() var daym=mydate.getdate() var hours=mydate.gethours() var minutes=mydate.getminutes()

13 var seconds=mydate.getseconds() if (minutes<=9) minutes="0"+minutes if (seconds<=9) seconds="0"+seconds //Alterar o tamanho da letra aqui var cdate="<small style='position: absolute; right: 0px; bottom:0%; marginbottom:0px; margin-right:5px;'><font color='cead55' face='arial'><b>"+dayarray[day]+", "+daym+" de "+montharray[month]+" de "+year+" </b></font></small>" //"+hours+":"+minutes+":"+seconds+" if (document.all) document.all.clock.innerhtml=cdate else document.write(cdate) } if (!document.all) getthedate() function goforit(){ if (document.all) setinterval("getthedate()",100) } //--> </script> <div id="logo"> <a href="index.php" id="logo"><img src="img/logo.png" alt="logo medicina legalis"/></a>

14  <nav> <ul> <li><a class="left" href="index.html">home</a></li> <li><a href="drleandro.html">dr. leandro</a></li> <li><a href="../wordpress/index.php">notícias</a></li> <li><a class="right" href="contato.html">contato</a></li> </ul> </nav>  </header>  <div id="slider_wrapper">  <div id="slider" class="nivoslider"> <img src="img/slide1.jpg" alt="" /> <a href=" src="img/slide2.jpg" alt="" title="#htmlcaption" /></a> <img src="img/slide3.jpg" alt="" /> <img src="img/slide4.jpg" alt="" />

15 <div id="htmlcaption" class="nivo-html-caption"> <strong>this</strong> is an example of a <em>html</em> caption with <a href="#">a link</a>.   <div class="clear"> <div id="wraper"> <div id="intro"> <p class="xcolor" style="margin-bottom:1.7em!important;">a Medicina Legalis é especializada em Medicina Forense.</p><h1 class="hcolor" style="border-bottom:1px dotted #cead55;padding-bottom:5px;margin-bottom:- 5px;">Consultoria médico pericial.</h1> <P class="color" style="textalign:justify;float:left;width:70%;margin-right:30px;">médico perito forense, mestre em medicina e professor de fisiologia da FCMMG, Dr. Leandro Duarte de Carvalho é focado em consultoria e soluções médico-legal (médicopericial) de atuação cível. A Medicina Legalis Consultoria Médico- Pericial<span style="font-size:12px;"> </span> presta serviços de consultoria para pessoas físicas e à justiça.</p> <p style="font-size: 16px; letter-spacing: -0.03em; line-height: 25px;color: rgb(119,119,119); font-family: georgia,serif; font-style: italic; fontweight: normal; padding:10px; text-shadow: 0px 1px 0px rgba(255, 255, 255, 1);">Especializações: Medicina Pericial, Medicina do Trabalho, Medicina do Tráfego, Ergonomia e Fisiologia.</p> <p class="xcolor" style="textalign:justify;float:left;width:70%;margin-right:30px;margin-top:10px!important; font-size:25px!important;background:none">elaboração de laudos oficiais em diversas áreas da Medicina. </p> <a class="contato_link" style="margin-top:1.5%;" href="drleandro.html"><strong>saiba mais</strong></a>

16 <div class="clear"> <div id="coluna_esquerda"> <h2 class="hcolor">notícias <img class="incon" alt="tweet" src="img/wordpress_social.png"/><p style="font-size: 16px; letter-spacing: -0.03em; line-height: 25px; margin: 0; color: rgb(119,119,119); font-family: georgia,serif; font-style: italic; font-weight: normal; padding:10px; text-shadow: 0px 1px 0px rgba(255, 255, 255, 1);background: url(img/stripes_black.png);">fique por dentro das últimas notícias do blog.</p></h2> <div> <script type="text/javascript"> $(document).ready(function () { $('#test').rssfeed(' { limit: 4, linktarget: '_blank' }); }); </script> <div id="test"> <div id="coluna_direita"> <h2 class="hcolor">tweets <img class="incon" alt="tweet" src="img/tweet.png" alt="tweeter icon"/><p style="font-size: 16px;

17 letter-spacing: -0.03em; line-height: 25px; margin: 0; color: rgb(119,119,119); font-family: georgia,serif; font-style: italic; font-weight: normal; padding:10px; text-shadow: 0px 1px 0px rgba(255, 255, 255, 1);background: url(img/stripes_black.png);">siga <a class="twt_link" href=" Legalis</a> no Twitter.</p></h2> <script charset="utf-8" src=" <script> new TWTR.Widget({ version: 2, type: 'profile', rpp: 4, interval: 30000, width: '470', height: 700, theme: { }, shell: { }, background: 'transparent', color: '#353535' tweets: { } features: { background: 'transparent', color: 'rgb (119,119,119)', links: '#CEAD55' scrollbar: false,

18 loop: false, live: false, behavior: 'all' } }).render().setuser('in_sighters').start(); </script> <br> <div class='clear'> <footer> <div id="footer_wraper"> <div class="coluna1"> <p><a href='#'> medicinalegalis.com.br</a></p> <small>designer: <a href=' Lopes de Oliveira</a></small> <div class="coluna2"> <img src="img/footer_signature.png" alt="medicina legalis"/> <div class="coluna3"> <h3>redes sociais</h3> <div class="subcoluna1"> <a href=" class="icon" alt="tweet" src="img/facebook.png"/></a> <a href="

19 <div class="subcoluna1"> <a href=" class="icon" alt="tweet" src="img/twitter.png"/></a> <a href=" <div class="subcoluna1"> <a href="../wordpress/index.php"><img class="icon" alt="tweet" src="img/wordpress_social.png"/></a> <a href="../wordpress/index.php">blog</a> </footer> </body> </html>