Team:Sevilla/test3

From 2011.igem.org

(Difference between revisions)
(Blanked the page)
 
(78 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&amp;sec=agregar-galeria-imagenes" class="add">Resumen</a></li>
 
-
                <li><a href="?p=multimedia&amp;sec=listar-galeria-imagenes" class="list">El estandar Ubbit</a></li>
 
-
                <li><a href="?p=multimedia&amp;sec=agregar-galeria-video" class="add">Puertas lógicas</a></li>           
 
-
                <li><a href="?p=multimedia&amp;sec=listar-galeria-video" class="list">Quorum sensing</a></li>
 
-
                <li><a href="?p=multimedia&amp;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&amp;sec=agregar-usuario" class="add">Agregar</a></li>
 
-
                <li><a href="?p=usuarios&amp;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&amp;sec=opcion-lectura" class="bullet">Lectura</a></li>
 
-
                <li><a href="?p=opciones&amp;sec=opcion-escritura" class="bullet">Escritura</a></li>
 
-
                <li><a href="?p=opciones&amp;sec=opcion-discusion" class="bullet">Discusi&oacute;n</a></li>
 
-
                <li><a href="?p=opciones&amp;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 {//css imagen
 
-
position:relative;
 
-
float:left;
 
-
width:600px;
 
-
height:450px;
 
-
border:1px solid #333;
 
-
overflow:hidden;
 
-
}
 
-
 
-
.ejemplo_img_cont {//css comentario
 
-
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>
 
-
 

Latest revision as of 10:56, 27 June 2011