|
|
| (77 intermediate revisions not shown) |
| Line 1: |
Line 1: |
| - | {{:Team:Sevilla/test2}}
| |
| | | | |
| - | <!--=====================================MENU RIDEANELEPHANT======================================== -->
| |
| - | <html>
| |
| - | <ul class="lavaLampNoImage" id="2">
| |
| - | <li class="current"><a href="#">Home</a></li>
| |
| - | <li><a href="#">Plant a tree</a></li>
| |
| - | <li><a href="#">Travel</a></li>
| |
| - | <li><a href="#">Ride an elephant</a></li>
| |
| - | </ul>
| |
| - |
| |
| - | <style>
| |
| - | /* Styles for the entire LavaLamp menu */
| |
| - | .lavaLampNoImage {
| |
| - | position: relative;
| |
| - | padding: 1px;
| |
| - | height: 22px;
| |
| - | width: 420px;
| |
| - | background-color: #BEF781;
| |
| - | margin-left: 12px;
| |
| - | overflow: hidden;
| |
| - | border: 1px solid gray;
| |
| - | }
| |
| - | .lavaLampNoImage li {
| |
| - | float: left;
| |
| - | list-style: none;
| |
| - | }
| |
| - | .lavaLampNoImage li.back {
| |
| - | border: 1px solid #000;
| |
| - | background-color: #e6e8ea;
| |
| - | width: 9px;
| |
| - | height: 30px;
| |
| - | z-index: 8;
| |
| - | position: absolute;
| |
| - | }
| |
| - | .lavaLampNoImage li a {/*elementos listados*/
| |
| - | font: bold 14px arial;
| |
| - | text-decoration: none;
| |
| - | color: #000;
| |
| - | outline: none;
| |
| - | text-align: center;
| |
| - | top: 7px;
| |
| - | text-transform: uppercase;
| |
| - | letter-spacing: 0;
| |
| - | z-index: 10;
| |
| - | display: block;
| |
| - | float: left;
| |
| - | height: 30px;
| |
| - | position: relative;
| |
| - | overflow: hidden;
| |
| - | margin: auto 10px;
| |
| - | }
| |
| - | .lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited {
| |
| - | border: none;
| |
| - | }
| |
| - |
| |
| - |
| |
| - | </style>
| |
| - |
| |
| - |
| |
| - | <script type="text/javascript">
| |
| - | $(function() {
| |
| - | $("#1, #2, #3").lavaLamp({
| |
| - | fx: "backout",
| |
| - | speed: 700,
| |
| - | click: function(event, menuItem) {
| |
| - | return false;
| |
| - | }
| |
| - | });
| |
| - | });
| |
| - | </script>
| |
| - | </html>
| |
| - |
| |
| - |
| |
| - |
| |
| - | <!--=====================================MENU ACORDEON /*mucha morralla*/======================================== -->
| |
| - | <html>
| |
| - | <div id="menu">
| |
| - | <h3><u>MAIN MENU</u></h3>
| |
| - | <ul>
| |
| - | <li><span <?php if($p == "posts"){echo 'class="current"';} ?><a href="javascript:void(0);" id="link-posts">Inicio</a></span>
| |
| - |
| |
| - | </li>
| |
| - | <li><span <?php if($p == "categorias"){echo 'class="current"';} ?><a href="javascript:void(0);" id="link-categorias">iGem</a></span>
| |
| - |
| |
| - | </li>
| |
| - | <li><span <?php if($p == "multimedia"){echo 'class="current"';} ?><a href="javascript:void(0);" id="link-multimedia">El proyecto</a></span>
| |
| - | <ul>
| |
| - | <li><a href="?p=multimedia&sec=agregar-galeria-imagenes" class="add">Resumen</a></li>
| |
| - | <li><a href="?p=multimedia&sec=listar-galeria-imagenes" class="list">El estandar Ubbit</a></li>
| |
| - | <li><a href="?p=multimedia&sec=agregar-galeria-video" class="add">Puertas lógicas</a></li>
| |
| - | <li><a href="?p=multimedia&sec=listar-galeria-video" class="list">Quorum sensing</a></li>
| |
| - | <li><a href="?p=multimedia&sec=listar-galeria-video" class="list">Sumador binario</a></li>
| |
| - | </ul>
| |
| - | </li>
| |
| - | <li><span <?php if($p == "usuarios"){echo 'class="current"';} ?><a href="javascript:void(0);" id="link-usuarios">El equipo</a></span>
| |
| - | <ul>
| |
| - | <li><a href="?p=usuarios&sec=agregar-usuario" class="add">Agregar</a></li>
| |
| - | <li><a href="?p=usuarios&sec=listar-usuarios" class="list">Listar</a></li>
| |
| - | </ul>
| |
| - | </li>
| |
| - | <li><span <?php if($p == "opciones"){echo 'class="current"';} ?><a href="javascript:void(0);" id="link-opciones">Opciones</a></span>
| |
| - | <ul>
| |
| - | <li><a href="?p=opciones&sec=opcion-lectura" class="bullet">Lectura</a></li>
| |
| - | <li><a href="?p=opciones&sec=opcion-escritura" class="bullet">Escritura</a></li>
| |
| - | <li><a href="?p=opciones&sec=opcion-discusion" class="bullet">Discusión</a></li>
| |
| - | <li><a href="?p=opciones&sec=opcion-permalinks" class="bullet">Permalinks</a></li>
| |
| - | </ul>
| |
| - | </li>
| |
| - | </ul>
| |
| - | </div>
| |
| - |
| |
| - | <img src="https://static.igem.org/mediawiki/2011/d/de/E1.png" onmouseover="this.src='https://static.igem.org/mediawiki/2011/f/f3/E2.png';" onmouseout="this.src='https://static.igem.org/mediawiki/2011/d/de/E1.png';" />
| |
| - |
| |
| - |
| |
| - | <!--Efectos para desplegar el Menu acordeon -->
| |
| - | <script type="text/javascript">
| |
| - | $(document).ready(function(){
| |
| - | $("#menu ul li ul").hide();
| |
| - | $("#menu ul li span.current").addClass("open").next("ul").show();
| |
| - | $("#menu ul li span").click(function(){
| |
| - | $(this).next("ul").slideToggle("slow").parent("li").siblings("li").find("ul:visible").slideUp("slow");
| |
| - | $(this).toggleClass("open");
| |
| - | $(this).parent("li").siblings("li").find("span").removeClass("open");
| |
| - | });
| |
| - |
| |
| - | });
| |
| - | </script>
| |
| - |
| |
| - | <style>
| |
| - |
| |
| - |
| |
| - | .open {
| |
| - | text-decoration:underline;
| |
| - | font-size:15px;
| |
| - |
| |
| - | }
| |
| - | /*.current {esta clase me tiene confuso, es para el menu hor o el vert??
| |
| - | position: relative;
| |
| - | height: 20px;
| |
| - | width: 400px;
| |
| - | background-color: blue;
| |
| - |
| |
| - | }
| |
| - | */
| |
| - | #menu {
| |
| - | position: relative;
| |
| - | height: 350px;
| |
| - | width: 130px;
| |
| - | background-color: #01DF74;
| |
| - | float:left;
| |
| - | border:7px ridge #088A08;
| |
| - | padding-left:6px;
| |
| - |
| |
| - |
| |
| - | }
| |
| - | #menu a{
| |
| - | font: bold 13pt "arial", "sans-serif";
| |
| - | color:purple;
| |
| - | }
| |
| - | #menu ul ul a{
| |
| - | font: 10pt "arial", "sans-serif";
| |
| - |
| |
| - |
| |
| - | }
| |
| - | </style>
| |
| - | <!--===================================MAPA================================================-->
| |
| - | <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
| |
| - | <script type="text/javascript">
| |
| - | function initialize() {
| |
| - | var latlng = new google.maps.LatLng(-34.397, 150.644);
| |
| - | var myOptions = {
| |
| - | zoom: 8,
| |
| - | center: latlng,
| |
| - | mapTypeId: google.maps.MapTypeId.ROADMAP
| |
| - | };
| |
| - | var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
| |
| - | }
| |
| - |
| |
| - | </script>
| |
| - | <div onload="initialize()">
| |
| - | <div id="map_canvas" style="width:60%; height:40%"></div>
| |
| - |
| |
| - | </div>
| |
| - |
| |
| - | <!--===================================GRAFICA QUESITOS================================================-->
| |
| - |
| |
| - |
| |
| - | <script type="text/javascript" src="http://www.google.com/jsapi"></script>
| |
| - | <script type="text/javascript">
| |
| - | google.load('visualization', '1', {packages: ['corechart']});
| |
| - | </script>
| |
| - | <script type="text/javascript">
| |
| - | function drawVisualization() {
| |
| - | // Create and populate the data table.
| |
| - | var data = new google.visualization.DataTable();
| |
| - | data.addColumn('string', 'Task');
| |
| - | data.addColumn('number', 'Hours per Day');
| |
| - | data.addRows(5); //las 5 divisiones
| |
| - | data.setValue(0, 0, 'Biología');//el primero es el id, el segundo siempre 0 y el tercero la etiqueta
| |
| - | data.setValue(0, 1, 2); //el primero es a que id corresponde, el segundo siempre es 1 y el tercero el valor
| |
| - | data.setValue(1, 0, 'Biotecnología');
| |
| - | data.setValue(1, 1, 4);
| |
| - | data.setValue(2, 0, 'Ing Informática');
| |
| - | data.setValue(2, 1, 3);
| |
| - | data.setValue(3, 0, 'Bioquímica');
| |
| - | data.setValue(3, 1, 2);
| |
| - | data.setValue(4, 0, 'Otros');
| |
| - | data.setValue(4, 1, 2);
| |
| - |
| |
| - | // Create and draw the visualization.
| |
| - | new google.visualization.PieChart(document.getElementById('visualization')).
| |
| - | draw(data, {title:"¿Qué estudiamos?"});
| |
| - | }
| |
| - |
| |
| - |
| |
| - | google.setOnLoadCallback(drawVisualization);
| |
| - | </script>
| |
| - |
| |
| - |
| |
| - | <div id="visualization" style="float: right;font-family: Arial;border: 0 none;width: 600px; height: 400px;"></div>
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - | <!--===================================VIDEO================================================-->
| |
| - |
| |
| - |
| |
| - |
| |
| - | <script src="http://www.google.com/jsapi" type="text/javascript"></script>
| |
| - | <script type="text/javascript">
| |
| - | google.load("swfobject", "2.1");
| |
| - | </script>
| |
| - | <script type="text/javascript">
| |
| - | function _run() {
| |
| - | /*
| |
| - | * Simple player embed
| |
| - | */
| |
| - |
| |
| - | // The video to load.
| |
| - | var videoID = "tRXQcFmICC4"
| |
| - | // Lets Flash from another domain call JavaScript
| |
| - | var params = { allowScriptAccess: "always" };
| |
| - | // The element id of the Flash embed
| |
| - | var atts = { id: "ytPlayer" };
| |
| - | // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
| |
| - | swfobject.embedSWF("http://www.youtube.com/v/" + videoID + "&enablejsapi=1&playerapiid=player1",
| |
| - | "videoDiv", "480", "295", "8", null, null, params, atts);
| |
| - |
| |
| - |
| |
| - | }
| |
| - | google.setOnLoadCallback(_run);
| |
| - | </script>
| |
| - |
| |
| - | <div id="videoDiv">Loading...pulsa F5</div>
| |
| - |
| |
| - |
| |
| - |
| |
| - | <!--===================================AMPLIAR IMAGENES================================================-->
| |
| - |
| |
| - |
| |
| - | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
| |
| - | <script type="text/javascript" src="http://www.blueidea.com/articleimg/2006/03/3237/lightbox.js"></script>
| |
| - |
| |
| - | <link rel="stylesheet" type="text/css" href="http://www.blueidea.com/articleimg/2006/03/3237/lightbox.css" media="screen" />
| |
| - |
| |
| - |
| |
| - |
| |
| - | <a href="http://www.foroswebgratis.com/imagenes_foros/7/4/3/9/3/710535Cat%2520eyes%5B1%5D.jpg" rel="lightbox" title="This is Image-1"><img src="http://content-1.emagistercdn.com/ar/centro_logos/5/6/6/logogrupo_66665.jpg" width="150" height="75" /></a>
| |
| - |
| |
| - |
| |
| - | <!--===================================TEXTO E IMAGENES================================================-->
| |
| - |
| |
| - | <!-----------a lo guarro------------>
| |
| - | <img src="http://content-1.emagistercdn.com/ar/centro_logos/5/6/6/logogrupo_66665.jpg" width="150" height="75" title="hola \n esta clarisimo que eso no iba a salir, pero asi si:
| |
| - |
| |
| - | este salto queda to bien" alt="por si acaso"/>
| |
| - |
| |
| - | <!------------bien----------->
| |
| - | <img id="fotillo" "src="http://content-1.emagistercdn.com/ar/centro_logos/5/6/6/logogrupo_66665.jpg" width="150" height="75"/>
| |
| - | <!--
| |
| - | <div id="escondido"> Este es el texto emergente </div>
| |
| - | <style>
| |
| - | #escondido { display:block; width:700px; height: 100px; background-color:#CCCCCC; font-weight:bold; }
| |
| - | </style>
| |
| - | <script type="text/javascript">
| |
| - | function mostrar(){
| |
| - | $(" #escondido ").css({display: "none"});
| |
| - | $(" #fotillo").hover(function(){
| |
| - | $(this).find('#escondido').css({visibility: "visible",display: "block"}).slideDown(400);
| |
| - | },function(){
| |
| - | $(this).find('#escondido').slideUp(400);
| |
| - | });
| |
| - | }
| |
| - | $(document).ready(function(){
| |
| - | mostrar();
| |
| - | });
| |
| - | </script>
| |
| - | -->
| |
| - |
| |
| - |
| |
| - | <div class="ejemplo_img">
| |
| - | <img src="http://nuno-icons.com/images/wall/rect4805b.png" width="600" height="450" />
| |
| - | <div class="ejemplo_img_cont">
| |
| - | Hey hola!
| |
| - | </div>
| |
| - | </div>
| |
| - |
| |
| - | <script type="text/javascript">
| |
| - | $(document).ready(function(){
| |
| - | $(".ejemplo_img").mouseenter(function() {
| |
| - | $(".ejemplo_img_cont", this).stop().animate({ top:'390px' },{ queue:false, duration:300 });
| |
| - | });
| |
| - | $(".ejemplo_img").mouseleave(function() {
| |
| - | $(".ejemplo_img_cont", this).stop().animate({ top:'450px' },{ queue:false, duration:300 });
| |
| - | });
| |
| - | });
| |
| - | </script>
| |
| - |
| |
| - | <style>
| |
| - | .ejemplo_img {
| |
| - | position:relative;
| |
| - | float:left;
| |
| - | width:600px;
| |
| - | height:450px;
| |
| - | border:1px solid #333;
| |
| - | overflow:hidden;
| |
| - | }
| |
| - |
| |
| - | .ejemplo_img_cont {
| |
| - | float:left;
| |
| - | position:absolute;
| |
| - | background:#000;
| |
| - | height:60px;
| |
| - | line-height:25px;
| |
| - | width:560px;
| |
| - | padding:20px;
| |
| - | opacity:.8;
| |
| - | filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
| |
| - | -MS-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
| |
| - | top:450px;
| |
| - | left:0px;
| |
| - | color:#FFF;
| |
| - | font-size:18px;
| |
| - | font-family:"Lucida Grande", Arial, sans-serif;
| |
| - | z-index:10;
| |
| - | }
| |
| - | </style>
| |
| - |
| |
| - |
| |
| - |
| |
| - | <!--===================================CANVAS:parece q no lo traga la wiki==========================================-->
| |
| - |
| |
| - | <script>
| |
| - | window.onload = function(){
| |
| - | //Recibimos el elemento canvas
| |
| - | var elemento = document.getElementById('micanvas');
| |
| - | //Comprobación sobre si encontramos un elemento
| |
| - | //y podemos extraer su contexto con getContext(), que indica compatibilidad con canvas
| |
| - | if (elemento && elemento.getContext) {
| |
| - | //Accedo al contexto de '2d' de este canvas, necesario para dibujar
| |
| - | var contexto = elemento.getContext('2d');
| |
| - | if (contexto) {
| |
| - | //Si tengo el contexto 2d es que todo ha ido bien y puedo empezar a dibujar en el canvas
| |
| - | //Comienzo dibujando un rectángulo. //Los dos últimos parámetros son los valores de anchura y altura
| |
| - | contexto.fillRect(0, 0, 150, 100);
| |
| - | //cambio el color de estilo de dibujo a rojo
| |
| - | contexto.fillStyle = '#cc0000';
| |
| - | //dibujo otro rectángulo.
| |
| - | contexto.fillRect(10, 10, 100, 70);
| |
| - | //cambio el color de dibujo a azul
| |
| - | contexto.fillStyle = '#6666ff';
| |
| - | //dibujo un rectángulo azul
| |
| - | contexto.fillRect(110,110,50,50);
| |
| - | //cambio el color a amarillo con un poco de transparencia
| |
| - | contexto.fillStyle = 'rgba(255,255,0,0.4)'; //cuanto mas bajo sea el ultimo parametro (0-1) mas transparente
| |
| - | //pinto un rectángulo amarillo semitransparente
| |
| - | contexto.fillRect(135,135,50,50);
| |
| - | //dibujar rectangulos vacios:
| |
| - | contexto.strokeRect(35,135,50,50);
| |
| - | //Borrar areas rectangulares: clearRect(x,y,anchura,altura)
| |
| - |
| |
| - | }
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | </script>
| |
| - |
| |
| - |
| |
| - | <canvas id="micanvas" width="500" height="500">
| |
| - | Este texto se muestra para los navegadores no compatibles con canvas.
| |
| - | <br>
| |
| - | Por favor, utiliza Firefox, Chrome, Safari u Opera.
| |
| - | </canvas>
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - | </html>
| |
| - |
| |
"
