Commit f220f014 authored by Davisson Henrique Paulino's avatar Davisson Henrique Paulino
Browse files

Modificado site antigo para 2016

* Modificado atualizações
* Modificado datas
* Modificado cronograma
* Modificado locais
* Adicionado conheça também
parents
*{
box-sizing: border-box;
}
body{
font-family: 'Neuton', serif;
background: url("shattered_island_renvoye.gif");
overflow-x: auto;
}
a{
color: #a40000;
}
/* Menu lateral */
#navbar{
position: fixed;
left: 0;
top: 0;
width: 14em;
height: 100%;
}
#container{
padding: 1em;
padding-left: 15em;
}
@media only screen and (max-device-width: 480px) {
#navbar{
display: none;
}
#container{
padding: 0;
margin: 0;
}
.content{
padding: 0;
width: 100%;
margin: 0;
border-radius: 0;
}
}
#logo{
max-width: 90%;
max-height: 100%;
padding: 0;
margin-left: auto;
margin-right: auto;
}
#menu li a{
font-weight: bold;
color: #000;
-moz-transition: 0.2s color linear;
-webkit-transition: 0.2s color linear;
transition: 0.2s color linear;
}
#menu li a:hover{
color: #04a;
}
#menu li.pure-menu-disabled a{
color: #888;
}
#navbar, .content{
background-color: #fff;
}
.wrap-center{
text-align: center;
position: relative;
}
.wrap-center > *{
text-align: left;
margin: 0 auto;
}
.content{
width: 80%;
border-radius: 0.5em;
margin: 0.5em auto;
padding: 1em;
}
.content h1{
margin-top: 5px;
}
.info{
width: 95%;
border: 1px solid black;
border-radius: 0.5em;
background: #eee;
padding: 0.5em;
}
#title{
text-align: center;
background: none;
color: #fff;
font-size: x-large;
}
#title img{
border-radius: 0.5em;
width: 100%;
max-width: 610px;
}
h1, h2, h3,
dt {
font-family:Arial, Helvetica, sans-serif;
}
/* definições especiais das divs de conteudo */
#log{
color: #a40000;
}
#log ul{
list-style: none;
padding-left: 15px;
}
#log li{
margin: 5px 0;
border-left: 3px solid #a40000;
padding-left: 8px;
}
#log .sep{
border-left: 3px solid #a40000;
margin-left: 5px;
margin-right: 8px;
}
#importante{
background: #ffa;
}
#oque ul{
list-style: none;
padding: 0;
font-weight: bold;
}
#mapa ul{
list-style: none;
position: relative;
}
#mapa li{
margin: 10px 0;
}
#lb-sugestao{
font-size: xx-large;
font-weight: bold;
}
/* cronograma */
table#cronograma{
text-align: center;
}
table#cronograma th{
border: 1px solid #cbcbcb;
}
table#cronograma .firstcolumn{
width: 10%;
}
table#cronograma .othercolumns{
width: 18%;
}
#crono dt{
font-weight: bold;
}
#crono dt{
margin-top: 14px;
margin-bottom: 3px;
}
#crono dd > dl{
margin: 0;
}
#crono dd dt,
#crono dd dd{
display: inline-block;
margin: 3px;
}
/* Legenda do mapa */
.marker{
display: inline-block;
border-width: 3px;
border-style: solid;
padding: 0;
padding-left: -40px;
margin-left: -40px;
margin-right: 5px;
width: 22px;
height: 22px;
border-radius: 14px;
color: white;
text-align: center;
vertical-align: middle;
}
.marker-gray{
background-color: #6c6c6c;
border-color: #aaa;
}
.marker-purple{
background-color: #c091e6;
border-color: #DAABFF;
}
.marker-blue{
background-color: #1087bf;
border-color: #60c4d5;
}
/* footer */
#footer{
width: 100%;
background-color: #fff;
border-top: 4px solid #c6c6c6;
height: 10em;
color: black;
margin: 0 -2em -1em 0;
padding: 1em;
padding-left: 16em;
}
#logo-pet{
height: 7em;
}
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>UFPR - BCC &amp; IBM - Semana de Recepção dos Calouros 2016</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
<link rel="stylesheet" type="text/css" href="assets/style.css"/>
<link href='http://fonts.googleapis.com/css?family=Neuton:400,700|EB+Garamond&subset=latin-ext' rel='stylesheet' type='text/css'>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33713779-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<!-- Menu Lateral -->
<div id="navbar" class="pure-menu pure-menu-open">
<img class="pure-menu-heading" id="logo" src="assets/logo.png"/>
<ul id="menu">
<li><a href="#log">Atualizações</a></li>
<li class="pure-menu-heading">Introdução</li>
<li><a href="#boasvindas">Boas-Vindas!</a></li>
<li><a href="#oque">O que é a Semana?</a></li>
<li><a href="#quando">Quando começa? Onde?</a></li>
<li><a href="#importante" style="background: #ffa">Observações Importantes</a></li>
<li class="pure-menu-heading">Informações Úteis</li>
<li><a href="#crono">Cronograma</a></li>
<li><a href="#mapa">Mapa do Centro Politécnico</a></li>
<li><a href="#linhas">Linhas de Ônibus</a></li>
<li><a href="#conheca">Conheça também</a></li>
<li><a href="#mais">E o que mais?</a></li>
<li class="pure-menu-heading">Conteúdo Adicional</li>
<li><a href="#apoio">Material de Apoio</a></li>
</ul>
</div>
<!-- Conteúdo do Site -->
<div id="container">
<div class="content" id="title">
<img src="assets/logo.png"/>
<p>Para os novos alunos de <span style="font-weight:bold; color:#940107">Ciência da Computação</span> e de <span style="font-weight:bold; color:#3e8778">Informática Biomédica</span> na UFPR</p>
</div>
<div class="content" id="log">
<h1>Últimas Atualizações</h1>
<?php
/*
* SOBRE AS ATUALIZAÇÕES
*
* Elas foram colocadas novamente na parte de cima do site para que sejam
* fáceis de visualizar. Isso pode não fazer sentido agora, mas quando
* estivermos às vésperas do evento sinalizar as modificações eficientemente
* vai ser uma prioridade.
*
* Coloque apenas atualizações importantes nas informações da página como
* mudanças em horários e locais ou adição de informação útil.
*
*/
?>
<ul>
<li>13/01 16:30 <span class="sep"></span> Adicionado data do evento <a href="#quando">ver</a> </li>
</ul>
</div>
<div class="content" id="boasvindas">
<h1>Boas-Vindas!</h1>
<div class="info">
<p>O PET Computação UFPR tem o prazer de receber os novos alunos de <span style="font-weight:bold; color:#6a0105">Ciência da Computação</span> e de <span style="font-weight:bold; color:#3e8778">Informática Biomédica</span> na <b>Semana de Recepção dos Calouros</b>.</p>
</div>
<p>Finalmente, chega o dia. Depois de vencer o vestibular e se matricular, chega a hora de finalmente botar os pés nesta universidade -
a UFPR - para enfrentar esses anos que se aproximam: os anos do seu curso. Seria <span style="font-weight:bold; color:#6a0105">Ciência da Computação</span> ou seria <span style="font-weight:bold; color:#3e8778">Informática Biomédica</span>? Seja qual for, nós temos o prazer de lhes dar as boas-vindas!</p>
<p>Oh, "<b>mas quem somos 'nós'?</b>", você pergunta. Oras, somos o <a href="http://pet.inf.ufpr.br/sobre.html">
PET Computação UFPR</a>: um grupo de alunos de Ciência da Computação e Informática Biomédica interessados principalmente em três coisas:</p>
<ul>
<li>Realizar pesquisas em nossas áreas do conhecimento;</li>
<li>Aplicar o que aprendemos durante o curso para atender demandas da sociedade; e</li>
<li>Zelar pela qualidade de ensino nos nossos cursos.</li>
</ul>
<p>E é justamente por causa deste último ponto que estamos aqui! Queremos que vocês conheçam melhor a universidade e o curso no qual entraram,
apresentar oportunidades a vocês e mostrar alguns recursos que vão ser bastante úteis durante a sua estadia.</p>
<p>Por isso, o PET Computação tem o prazer de receber os novos alunos de <span style="font-weight:bold; color:#6a0105">Ciência da Computação</span> e de <span style="font-weight:bold; color:#3e8778">Informática Biomédica</span> na <b>Semana de Recepção dos Calouros</b>.</p>
</div>
<div class="content" id="oque">
<h1>O que é a Semana de Recepção dos Calouros?</h1>
<div class="info" style="width: 95%; border: 1px solid black; border-radius: 0.5em; background: #eee">
<table style="width: 100%;">
<tr>
<td>
<p style="text-align: center">Uma semana de</p>
</td>
<td width="8px">
</td>
<td>
<ul>
<li>cursos</li>
<li>palestras</li>
<li>atividades</li>
</ul>
</td>
<td width="8px">
</td>
<td>
<p style="text-align: center">
para que vocês
</p>
</td>
<td width="8px">
</td>
<td>
<ul>
<li>tirem dúvidas sobre a vida acadêmica</li>
<li>se familiarizem com as instalações, recursos e ferramentas</li>
<li>conheçam oportunidades oferecidas pela universidade e pelo curso escolhido</li>
</ul>
</td>
</table>
</div>
<p>Se ambientar ao meio acadêmico não é uma tarefa simples. Por isso, alguns cursos da UFPR oferecem aos seus novos alunos uma
<strong>Semana de Recepção dos Calouros</strong> assim que eles entram. Durante essa semana, são realizadas
palestras, cursos e mais outras atividades - tudo isso para que vocês não fiquem muito perdidos logo no começo.</p>
<p>É nessa semana que aproveitamos para apresentar a infraestrutura disponível aos alunos, as atividades que podem ser realizadas
no âmbito da Universidade e também experiências: dos alunos mais antigos, dos intercambistas, dos profissionais da área. Assim vocês
podem começar os seus estudos sem tanta desorientação e com uma ideia melhor das suas oportunidades.</p>
<p>Enfim, essa é uma semana dedicada a vocês, nossos novos colegas! Aproveitem bastante a oportunidade para se
familiarizar com as instalações, fazer novas amizades e tirar as dúvidas que quiserem.</p>
</div>
<div class="content" id="quando">
<h1>Quando começa? Onde?</h1>
<p>As atividades da Semana de Recepção começarão no horário e local abaixo:</p>
<p><b>Data</b>: 29/fevereiro á 04/março</p>
<p><b>Horário</b>: 13h30 ás 17:30</p>
<p><b>Local</b>: em frente ao Departamento de Informática da UFPR, no Centro Politécnico (<a href="#mapa">mapa</a>).</p>
</div>
<div class="content" id="importante">
<h1>Observações importantes</h1>
<p><b>Procure não faltar na semana.</b>
Entre outras coisas, é possível que o processo de confirmação de matrícula ocorra
durante essa semana.
</p>
<p><b>Chegue cedo.</b>
A semana dos calouros acontecerá em paralelo com a primeira semana de
aulas do semestre.
Isso quer dizer que muita gente atarefada, atrasada ou desorientada
(ainda mais que o normal) vai estar pelo campus.
Chegue cedo pra evitar confusões.
</p>
<p><b>Confira as linhas e horários de ônibus com antecedência.</b>
As linhas que passam pelo Centro Politécnico estão disponíveis na seção <a href="#linhas">Linhas de Ônibus</a>.
</p>
<p><b>As atividades valem horas formativas.</b>
Você pode não saber o que é isso ainda, mas elas podem ser
importantes no futuro. E o mais importante aqui: assine a
lista de presença em todas as atividades que participar.
</p>
<p><b>A semana dos calouros é uma atividade oficial da UFPR.</b>
Portanto nenhum tipo de trote é permitido durante a sua execução.
Mais informações podem ser consultadas na
<a href="http://www.ufpr.br/soc/descarregar_arquivo.php?cod=367">
resolução que institui o evento</a>.
</p>
</div>
<div class="content" id="crono">
<h1>Cronograma</h1>
<div class="info">
<p>
<span style="color:#d00">AVISO</span>:
Este é um cronograma preliminar, sujeito a mudanças em algumas atividades.
</p>
</div>
<br>
<div class="wrap-center">
<table id="cronograma" class="pure-table pure-table-bordered">
<thead>
<tr>
<th class="firstcolumn"></th>
<th class="othercolumns">Segunda 29/02</th>
<th class="othercolumns">Terça 01/03</th>
<th class="othercolumns">Quarta 02/03</th>
<th class="othercolumns">Quinta 03/03</th>
<th class="othercolumns">Sexta 04/03</th>
</tr>
</thead>
<tbody>
<tr>
<th>13:30</th>
<td>Uma pequena Introdução à Computação</td>
<td rowspan="3">Curso de Linux</td>
<td rowspan="3">Curso de Linux</td>
<td rowspan="3">Curso de Linux</td>
<td rowspan="3">Curso de Linux</td>
</tr>
<tr>
<th>14:00</th>
<td>Apresentação das Coordenações</td>
</tr>
<tr>
<th>14:30</th>
<td>Apresentação do Departamento</td>
</tr>
<tr>
<th>15:00</th>
<td>Intervalo</td>
<td>Intervalo</td>
<td>Intervalo</td>
<td>Intervalo</td>
<td>Intervalo</td></tr>
<tr>
<th>15:30</th>
<td> Conhecendo o seu centro acadêmico (<a href="http://cei.inf.ufpr.br/">CEI</a>/<a href="http://ceib.inf.ufpr.br/">CEIB</a>)</td>
<td rowspan="2">Palestra do Profissional da Área</td>
<td>Debate 1</td>
<td>Debate 2</td>
<td rowspan="3">Aula de Algoritmos I</td>
</tr>
<tr>
<th>16:00</th>
<td rowspan="2">Tour pelo Campus</td>
<td>Conhecendo o Programa de Educação Tutorial (<a href="http://pet.inf.ufpr.br/">PET</a>)</td>
<td>Papo sobre a vida acâdemica</td>
</tr>
<tr>
<th>16:30</th>
<td>Conhecendo os <a href="https://acufpr.wordpress.com/"> Clubes da UFPR</a></td>
<td>Conhecendo a Empresa Júnior de Computação (<a href="http://ecomp.co/">ECOMP</a>)</td>
<td>Atividade de Integração (Traga uma câmera fotográfica, celular ou tekpix)</td>
</tr>
<tr>
<th>17:00</th>
<td>Conhecendo a equipe de robótica da UFPR (<a href="http://equipeyapira.com/">YAPIRA</a>)</td>
<td></td>
<td></td>
<td></td>
<td>Maratoninha</td>
</tr>
</tbody>
</table>
</div>
<h2>Locais das Atividades</h2>
<h3> A definir </h4>
<?php /*
<dl>
<dt>Palestra de apresentação</dt>
<dd>
<b>IBM</b> A definir<br>
<b>BCC</b> A definir
</dd>
<dt>Palestra dos profissionais</dt>
<dd>
<b>IBM</b> A definir<br>
<b>BCC</b> A definir
</dd>
<dt>Passeio guiado ao campus</dt>
<dd>Aguarde instruções no local da última atividade</dd>
<dt>Curso de linux</dt>
<dd>Laboratórios do DInf</dd>
<dt>Apresentações: PET e ECOMP</dt>
<dd>A definir</dd>
<dt>Apresentações: Centros Acadêmicos</dt>
<dd>
<b>IBM</b> A definir<br>
<b>BCC</b> A definir
</dd>
<dt>Palestras sobre vida acadêmica e Intercâmbio</dt>
<dd>A definir</dd>
<dt>Maratoninha</dt>
<dd>Laboratórios do DInf</dd>
<dt>Atividade de Integração</dt>
<dd>Aguarde instruções no local da última atividade</dd>
<dt id="alg1">Aula de Algoritmos 1</dt>
<dd>A definir</dd>
</dl>
*/ ?>
</div>
<div class="content" id="mapa">
<h1>Mapa do Centro Politécnico</h1>
<div class="wrap-center">
<?php /* <iframe src="https://mapsengine.google.com/map/embed?mid=zV88yKqPO0QE.kekRtnOuWe40" style="max-width:800px; width: 80%; height:600px"></iframe>
*/ ?>
<iframe width='100%' height='500px' frameBorder='0' src='https://a.tiles.mapbox.com/v4/lulusantos.l2cl6331/attribution,zoompan,zoomwheel.html?access_token=pk.eyJ1IjoibHVsdXNhbnRvcyIsImEiOiJsUnRZTUdVIn0.z-d2K3EA5azIshagL0SDaQ'></iframe>
</div>
<div class="pure-g">
<div class="pure-u-1-3">
<h2>Principais blocos</h2>
<ul>
<li>
<span class="marker marker-gray">1</span>
<b>Departamento de Informática</b>
</li>
<li>
<span class="marker marker-gray">2</span>
<b>Biblioteca de Ciência e Tecnologia</b>
</li>
<li>
<span class="marker marker-gray">3</span>
<b>Prédio da Administração</b>
</li>
<li>
<span class="marker marker-gray">4</span>
<b>Bloco PC</b>
</li>
<li>
<span class="marker marker-gray">5</span>
<b>Bloco CT</b>
</li>
</ul>
</div>
<div class="pure-u-1-3">
<h2>Entradas</h2>
<ul>
<li>
<span class="marker marker-blue">1</span>
<b>Saída do bar</b>
</li>
<li>
<span class="marker marker-blue">2</span>
<b>Saída do inter 2</b> - fechada para carros
</li>
<li>
<span class="marker marker-blue">3</span>
<b>Saída para avenida</b>
</li>
</ul>
</div>