Simple menú con CSS, HTML y Javascript

Simple Menú con CSS, HTML y Javascript

Simple Menú con CSS, HTML y Javascript

Las «Tabs» o Pestañas  son muy buenas alidadas, en cuestión de diseño web; ocupan poco espacio y le dan orden a los contenidos.

Se popularizaron en los navegadores hace algunos años, el primero en aplicarlas fue Opera Navigator. Es por eso que me encanta este navegador.

Aquí está el código, es muy bonito y no necesita de imágenes externas:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
	$(document).ready(function()
	{
		$(".tab_content").hide();
		$(".tab_content:first").show();




		$("ul.tabs li").click(function(click)
		{
			click.preventDefault();
			$("ul.tabs li").removeClass("active");
			$(this).addClass("active");
			$(".tab_content").hide();




			var activeTab = $(this).find("a").attr("href");
			$(activeTab).fadeIn();
		});
	});
</script>




<style type="text/css">
#panel{
	font-family: arial;
    width: 944px;
    background: -webkit-linear-gradient(#FFF, #E2E2E2);
    background: -moz-linear-gradient(#FFF, #E2E2E2);
    background: -o-linear-gradient(#FFF, #E2E2E2);
    border-radius: 6px;
    padding: 26px 40px;
}
    #panel h1{
        font-size: 30px;
    }
    #panel h2{
        font-size: 17px;
        font-weight: bold;
    }
    #panel input{
        width: 608px;
        height: 40px;
        font-size: 17px;
        padding: 0 5px;
        margin-bottom: 27px;
        border: #CCCCCC 1px solid;
        box-shadow: inset 1px 1px 4px 0px rgba(0,0,0,0.2);
        border-radius: 3px;
    }
    #panel .button{
        display: block;
        padding: 10px 20px;
        text-align: center;
        font-size: 15px;
    }




    .tabs {
        margin: 0;
        padding: 0;
        float: left;
        list-style: none;
        height: 41px;
        border: 1px solid #CCCCCC;
        border-radius: 5px 5px 0 0;
        width: 100%;
            background: -webkit-linear-gradient(#F9F9F9, #F3F3F3);
            background: -moz-linear-gradient(#F9F9F9, #F3F3F3);
            background: -o-linear-gradient(#F9F9F9, #F3F3F3);
    }
        .tabs li {
            float: left;
            margin: 0;
            padding: 0;
            height: 41px;
            line-height: 41px;
            border: 1px solid #CCCCCC;
            border-top: none;
            border-left: none;
            margin-bottom: -1px;
            overflow: hidden;
            position: relative;
        }
            .tabs li a {
                text-decoration: none;
                display: block;
                font-size: 13px;
                padding: 0 20px;
                border: 1px solid #fff;
                outline: none;
            }
                .tabs li:first-child{
                    border-radius: 5px 0 0 0;
                }
                .tabs li a:hover {
                    background: #FFF;
                }
                .tabs li:not(.active) a{
                    color: #888;
                }
                .tabs .active a{
                    color: #000;
                    font-weight: bold;
                }
            .tabs li.active, .tabs li.active a:hover  {
                background: #fff;
                border-bottom: 1px solid #fff;
            }
            .tabs li .active{
                color:#000;
            }
             




            .tab_container{
                border: 1px solid #CCCCCC;
                border-top: none;
                overflow: hidden;
                clear: both;
                float: left; width: 100%;
                background: #fff;
                border-radius: 0 0 5px 5px;
            }
                .tab_content{
                    padding: 20px;
                    font-size: 1.2em;
                }
</style>
	<div id="panel">
		<h1>Millonarios Futbol Club</h1>
		<p>El m&aacute;s veces campe&oacute;n. El equipo embajador, El Ballet Azul</p>
		<br/>
		<ul class="tabs">
		    <li class="active"><a href="#tab1">Partidos</a></li>
		    <li><a href="#tab2">Refuerzos</a></li>
		    <li><a href="#tab3">Noticias</a></li>
		    <li><a href="#tab4">Galer&iacute;a</a></li>				    
		    <li><a href="#tab5">Historia Millonarios FC</a></li>
		    <li><a href="#tab6">Videos</a></li>
		    <li><a href="#tab7">Redes sociales</a></li>
		    <li><a href="#tab8">Registro</a></li>
		</ul>




		<div class="tab_container">
		    <div id="tab1" class="tab_content">
		        <ul>
		        	<li>Millonarios (Colombia) - Olimpia (Honduras) 21 de julio 2013</li>
		        	<li>Millonarios (Colombia) - Porto (Portugal) 24 de julio 2013</li>
		        	<li>Millonarios (Colombia) - Am&eacute;rica de Cali (Colombia) 31 de julio 2013</li>
		        </ul>
		    </div>
		    <div id="tab2" class="tab_content">
		       Alas :O
			</div>
		    <div id="tab3" class="tab_content">
		       Alas :O
			</div>
		    <div id="tab4" class="tab_content">
		        holas 🙂
		    </div>
		    <div id="tab5" class="tab_content">
		       Alas :O
			</div>
		    <div id="tab6" class="tab_content">
		       Alas :O
			</div>
		    <div id="tab7" class="tab_content">
			    <fieldset>
			        <form action="confirmacion.html" method="post" >
			            <label class="label" >
		       				<h2>Cambiar contrase&ntilde;a</h2>
		       				</br>
			                <input type="password" name="name" placeholder="Nueva contrase&ntilde;a">
			            </label>
			            <button type="submit" class="button" title="Enviar formulario">
			                <span class="desk">Guardar cambios</span>
			            </button>
			        </form>
			    </fieldset>
			</div>
		    <div id="tab8" class="tab_content">
		       Alas :O
			</div>
		</div>
		<div style="clear: both;"></div>
		</div>
Tagged with: , , , , , ,
Publicado en css, General, html, javascript, programacion

Eventos de teclas en una web

Teclado

Eventos de teclado en una web, imagen tomada de BlogVecindad

La evolución de Javascript es impresionante, pasamos de popups y animaciones sencillas, a librerías potentes como Jquery o Mootools. Todo esto es por consecuencia de la adopción del Javascript para la capa de interfaz y animaciones. Algunos expertos dicen que debe ser función de CSS (por eso ya hay animaciones css en su versión 3) y puede tener razón.

Hoy vamos a ver cómo capturar cuando el usuario presiona una tecla y saber qué tecla era, como lo hace Gmail o Twitter. Sería genial por ejemplo que en una aplicación que estemos haciendo, al presionar “G” se guarde una copia de seguridad.

Como todos sabemos, cada uno de los caracteres tiene su código ASCII, en base a eso podemos identificar qué letra se presionó.

Y el código es este, en este caso la tecla será “Escape” ó “Esc” que su valor es 27:


$(document).keyup(function(tecla) {
   if(tecla.keyCode == 27){
      alert("Presionaste escape de tu teclado.:)")
   }
});

Cabe aclarar que usaremos Jquery para que capture el evento de presionar la tecla en cualquier parte del la web.

Vamos por partes: $(document) es usado para que el evento sea global, en cualquier parte de la web. “Keyup” es un evento de Jquery que identifica cuando uno presiona una tecla, function(tecla) sirve para que la tecla capturada se guarde en la variable “tecla”. Por último la condicional “if” con tecla.keyCode == 27, donde 27 es el código ASCII de la tecla Escape.

Espero que este minicódigo les sirva. ¡Saludos!

Tagged with: , , , , , , , , , , , , , , , , , ,
Publicado en General, javascript, manuales, trucos

Primer taller Teoría General de Sistemas

Este es un trabajo para mi universidad, Corporación Universitaria Autónoma del Cauca y la materia TGS 🙂

Tagged with: , , ,
Publicado en proyectos, Universidad

Implementar Get y Set en PHP

Como todo lenguaje, hay sus ventajas y desventajas. La de PHP es no ser completamente orientada a objetos y esto ocasiona que algunas cosas que son implementadas en lenguajes orientados a objetos no estén presentes como lo es el caso del Get y Set, que por ejemplo en C# está presente.

Hoy vamos a ver una manera de implementarlo que tomé de esta web y que es una manera fácil:

Creamos una clase nueva de ejemplo llamada empleado.


<?php
 class empleado{
 private nombre;
 private apellido;
 private dependencia;

 public function __construct($nombre,$apellido){
 $this->nombre = $nombre;
 $this->apellido = $apellido;
 }
 }
?>

Hasta ahí normal, la manera que se viene manejando el Get y Post ha sido con “getNombre”, “setNombre”. pero la forma más sencilla es usar los métodos __get() y __set() que nos da PHP con el siguiente código, sirve para cualquier clase en PHP:


public function __set($var, $valor)
{
// convierte a minúsculas toda una cadena la función strtolower
$temporal = strtolower($var);
// Verifica que la propiedad exista, en este caso el nombre es la cadena en "$temporal"
if (property_exists('nombreDeLaClase',$temporal))
 {
$this->$temporal = $valor;
 }
 else
 {
echo $var . " No existe.";
 }
 }

 public function __get($var)
 {
$temporal = strtolower($var);
// Verifica que exista

if (property_exists('nombreDeLaClase', $temporal))
 {
return $this->$temporal;
 }

// Retorna nulo si no existe
return NULL;
 }

e implementado ya en nuestro código:


<?php
 class empleado{
 private nombre;
 private apellido;
 private dependencia;

 public function __construct($nombre,$apellido){
 $this->nombre = $nombre;
 $this->apellido = $apellido;
 }

public function __set($var, $valor)
{
// convierte a minúsculas toda una cadena la función strtolower
$temporal = strtolower($var);
// Verifica que la propiedad exista, en este caso el nombre es la cadena en "$temporal"
if (property_exists('empleado',$temporal))
 {
$this->$temporal = $valor;
 }
 else
 {
echo $var . " No existe.";
 }
 }

 public function __get($var)
 {
$temporal = strtolower($var);
// Verifica que exista

if (property_exists('empleado', $temporal))
 {
return $this->$temporal;
 }

// Retorna nulo si no existe
return NULL;
}
 }

$empleado = new empleado('Andres','Lara');
$empleado -> dependencia = 'Programador Junior';

echo $empleado -> nombre . ' - '. $empleado -> apellido .' Y la dependencia es: ' . $empleado -> dependencia;
?>

Y es de esta forma como se ve implementado el Get y Set. espero que les sirva, saludos.

Tagged with: , , , , , , , , , , , , , , , , , , , , ,
Publicado en manuales, php, programacion, trucos

Error “Http server is no running. Start it first” en Netbeans para Ubuntu

Java Duke Ubuntu

En estas vacaciones me decidí por estudiar Java en un curso virtual del SENA (Colombia), un lenguaje que es de los más poderosos de la informática, además de la gran cantidad de dispositivos que lo soportan.

Lo más lógico es buscar Netbeans en el Centro de Software de Ubuntu (Es una aplicación similar a la App Store de Apple pero para Ubuntu) e instalé dicho software, todo iba bien… cree un nuevo archivo para móvil cuando fui a compilarlo como decía el manual y vaya sorpresa 😦 no funcionaba, y me salía el error: “Http server is no running. Start it first”. En el día de ayer trasnoché y no encontré la solución; Me acosté a veces al otro día uno más fresco pues tiene más energía. Y hoy decidí descargar el Netbeans completo, unos 200mb desde la página principal y vaya sorpresa 🙂 me funcionó.

Así que si algún usuario tiene esta dificultad sobre Ubuntu, esa es la solución. 🙂 Saludos.

 

Tagged with: , , , , ,
Publicado en General, Java, trucos

Div flotante inferior o abajo.

Div flotante abajo

Div flotante abajo

Desde Win 95, hemos conocido  la barra de tareas como algo situado en la parta inferior de la pantalla de Sistema Operativo. Tal vez esto cambie con Win 8.

Hoy vamos a ver cómo ubicar un div justo en la parte inferior, cual barra de tareas de Windows por medio de css. Lo primero que vamos a hacer es crear un div llamado “inferior”:


<div id="inferior">¡Hola mundo!</div>

Lo siguiente es crear el código CSS, para lo cual creamos las propiedades para situar nuestro div en la parte inferior:


<style type="text/css">
body,html{
height:100%; /*Siempre es necesario cuando trabajamos con alturas*/
}
 #inferior{
color: #FFF;
background: #000;
position:absolute; /*El div será ubicado con relación a la pantalla*/
left:0px; /*A la derecha deje un espacio de 0px*/
right:0px; /*A la izquierda deje un espacio de 0px*/
bottom:0px; /*Abajo deje un espacio de 0px*/
height:50px; /*alto del div*/
z-index:0;
 }
</style>

Y listo, espero que te sirva. Aquí les dejo el ejemplo subido a mi Dropbox:

https://dl-web.dropbox.com/get/Public/donestandares_pruebas/div_flotante_inferior.html?w=6dfbabf6

Hasta pronto.

Tagged with: , , , , , , , ,
Publicado en css, Css para principiantes, html, manuales, Trucos css

Presentación CSS (Programación V) Corporación Universitaria Autónoma del Cauca

Les comparto esta diapositiva que hicimos para el curso de Programación V (Web) sobre CSS para la Corporación Universitaria Autónoma del Cauca.

🙂 Descárgala, rotala, regalala, etc… 🙂 recuerda que el conocimiento es libre 🙂

Tagged with: , , , , , ,
Publicado en css, Css para principiantes, html, manuales, programacion, sitios web, Trucos css
Sígueme en Twitter
Categorías
Flickr Photos
A %d blogueros les gusta esto: