Respaldo e Importación de Datos en MySQL

Al mantener una base de datos en uso es importante la creación de un respaldo también llamado backup para una mayor seguridad de datos.

La creación de un respaldo en base de datos es muy efectivo  para:

  • Prevenir perdida de datos en caso de un fallo en el Hardware
  • El borrado de datos por equivocación
  • Un virus en contraído por el equipo
  • Prevenir el mal uso de parte de las personas que manejan la base de datos.

Un respaldo debe de ser constante si se llevan acabo muchos movimientos de datos,  ya que un respaldo muy antiguo o incompleto no conservaría información fidedigna, para la base de datos.

Nota: Un respaldo ubicado en el mismo equipo donde se encuentra la base de datos corre el riesgo de perderse al igual que la base en caso de fallo, es por esto que un respaldo debe estar ubicado en otro equipo o dispositivo de almacenamiento de información.

En esta publicación se encuentra una forma sencilla de crear un respaldo en el manejador MySQL.

Para esta practica se tiene una base de datos llamada Escuela en la que tenemos la siguiente tabla Alumno

create table Alumno(
    idAlumno int NOT NULL auto_increment,
    nombre varchar(100) NOT NULL,
    edad INT NOT NULL,
    estatura FLOAT NOT NULL,
    constraint  pk_Alumno PRIMARY KEY(idAlumno)
);

Importacion de Datos

Ahora importaremos datos de un archivo .txt llamado Alumno.txt

 

Para realizar la importacion escribimos en el manejador la siguiente linea:

LOAD DATA LOCAL INFILE 'ubicacion_de_archivo' INTO TABLE nombre_tabla 
  FIELDS TERMINATED BY ',';

 

para el ejemplo que estamos realizando colocamos la ubicacion de nuestro .txt y el nombre la tabla en donde se insertaran los datos

LOAD DATA LOCAL INFILE
'C:\\Users\\novae_000\\Desktop\\Adm. Bases de Datos\\InstalacionMySQL\\ImportacionMySQL\\Alumno.txt
INTO TABLE Alumno FIELDS TERMINATED BY ',';

podemos verificar que los datos si hayan importado con el query: SELECT * FROM Alumno 

en la realización del ejercicio modificaremos los datos importados con el siguiente query:  UPDATE Alumno SET nombre = ‘nombre modificado’ WHERE  idAlumno=1

 

Respaldo y recuperación

Los siguientes pasos son para la realizar de un respaldo de nuestros datos.

1.-De lado izquierdo de nuestro manejador se muestra una sección llamada Management, y seleccionamos Data Export

2.–Se selecciona la base de datos que respaldaremos en este caso  escuela.

3.- Seleccionamos Export to Self-Contained File para asignarle un nombre y la ubicación de nuestra nueva copia.

Y listo tenemos creado nuestro respaldo de base de datos.

Para verificar que el respaldo se haya creado correctamente, en otro equipo se crea una base de datos, para el ejemplo llamaremos a la base de datos escuela (el mismo nombre que utilizamos para la creación del respaldo).

Para recuperar los datos seguiremos los siguientes pasos

1.-De lado izquierdo de nuestro manejador se muestra una sección llamada Management, y seleccionamos Import Export

2.–Se selecciona la base de datos en donde se realizara la recuperación de datos, en el ejercicio se llama escuela.

3.- Seleccionamos Import From Self-Contained File

4.- Por ultimo seleccionamos la ubicación donde se encuentra nuestro backup (.sql) previamente generado.

Listo ya conoces la manera de importar, crear y recuperar datos de tu base de datos MySql.

 

 

Desarrollo con la plataforma de desarrollo Firebase

¿Qué es Plataforma de desarrollo Firebase?

Firebase es un conjunto de herramientas que permiten desarrollos más ágiles quitando al dearrollador la preocupación de diseñar e implementar un base de datos, diseñar e implementar consultas a esa base de datos, implementar autenticación y autorización, implementar el código de manejo de errores, el trabajo offline, desempeño, esacalabilidad, entre muchas otras cosas.

También tiene el servicio Firebase cloud Messaging (FCM) que permite el envío de notificaciones para aplicaciones Android, iOS y web.

Tradicional App Development - Desarrollo Tradicoinal de Apps Plataforma de desarrollo Firebase

Tradicional App Development – Desarrollo Tradicoinal de Apps Plataforma de desarrollo Firebase

El modelo de desarrollo tradicional de Apps es así:

Pero utilizando el servicio de Firebase, el esquema cambia a:

Firebase app development - Desarrollo de apps con Plataforma de desarrollo Firebase

Firebase app development – Desarrollo de apps con Plataforma de desarrollo Firebase

Este servicio provee el manejo de Autenticación y Autorización, Base de datos, Almacenamiento además de proveer manejo de Notificaciones.

Dentro del evento Google I/O 2016 se presentó un ejercicio en vivo, dónde se desarrollo una aplicación de chat en tres tecnologias diferentes: Android, iOS, Web utilizando el servicio Firebase.

Si quieres saber más acerca del conjunto de servicios de Firebase, ingresa al sitio oficial: https://firebase.google.com/

Saludos!

Uso de POST, GET y REQUEST en PHP

El lenguaje de PHP es un lenguaje de código abierto muy popular adecuado para el desarrollo web; PHP cuenta con etiquetas que nos ayudan al envió y recuperación de datos desde un servidor como lo son POST, GET  Y REQUEST.

Para utilizar estas etiquetas antes que nada se requiere de tener un servidor activo ya sea WampServer, Xampp, etc.

El siguiente formulario será utilizado para los tres próximos ejemplos modificando solo partes significativas del código.

El código de HTML es el siguiente:

GET

El método GET es un arreglo asociativo de variables enviados por medio de la URL. Consiste en enviar la información de un formulario y que se “incruste” en la URL junto con la página php.

La estructura de la URL es la siguiente.

altaRegistro.php?txtNombre=Nombre&txtAlias=Alias&txtPwd=123&retxtPwd=123

Donde se divide la URL en la dirección y los datos que se envían. El ‘?’ tiene la función de ser un separador entre la página y la información enviada y el ‘&’ sirve para separar los datos entre sí.

Para extraer la información por GET se utiliza la etiqueta $_GET y el nombre de la variable en el arreglo, tomando como ejemplo $_GET[‘txtNombre’].

POST

El método POST es un arreglo dinámico de variables asociadas a una petición. Aunque es algo parecido al método GET la característica de este método es que el envió de información es “invisible” para el usuario ya que a comparación del método GET no se muestra la información en la URL.

Para extraer la información por POST se utiliza la etiqueta $_POST y el nombre de la variable en el arreglo, tomando como ejemplo $_POST[‘txtNombre’].

REQUEST

El método REQUEST es un arreglo asociativo que por defecto contiene el contenido de tres métodos: GET, POST y COOKIE.

Una gran característica que tiene REQUEST es que se considera como una variable “superglobal” lo que significa que es una variable que estará disponible en cualquier parte del script ya sean métodos o funciones dentro del mismo.

Al utilizar REQUEST para obtener la información enviada desde un formulario en la parte de la etiqueta “method” se puede usar tanto GET como POST.

Como crear procedimientos almacenados en Oracle 11g

En este ejercicio mostraremos dos formas de crear procedimientos almacenados en el Manejador de Base de Datos Oracle 11g.

Se le conoce como procedimiento almacenado al conjunto de comandos que se almacenan en la propia base de datos y son ejecutados por el servidor de la base de datos.

Para este ejercicio necesitarás:

PROCEDIMIENTO

Al poner en uso la base de Datos con el Start DataBase podemos comenzar, debemos entrar a la base de datos donde crearemos el procedimiento almacenado.

Hay dos formas de crear un procedimiento almacenado, el primero se lleva acabo de forma gráfica como lo veremos en el método 1 y la segunda por medio de comandos en la consola de la base de datos, lo cual resulta práctico ya que es donde se llamará a ejecución el procedimiento.

Comencemos ahora con los pasos para la primera forma de crear un procedimiento almacenado.

 

MÉTODO 1:

1.-Entramos al SQL Workshop y seleccionamos Object Browser, en este ejemplo ya se tienen creadas las tablas (productos) que se utilizarán para la creación del procedimiento.

2.-Seleccionamos Create,y se mostrarán las opciones en las que también puedes crear tablas, disparadores entre otros elementos, seleccionamos en este caso Procedure.

3.-En este procedimiento haremos que se inserte un producto, para ello nombramos a nuestro procedimiento ProcedimientoAlmacenado1 y presionamos Next.

4.- A continuación agregaremos los parámetros que recibirá y que devolverá el procedimiento, en este ejemplo, agregaremos como parámetros el nombre, precio y cantidad del producto estos tres parámetros serán de entrada por lo cual son de tipo IN como se muestra en la imagen y presionamos Next.

NOTA: se coloca IN si es un parámetro de entrada, OUT si es un parámetro de salida y por ultimo IN OUT si es un parámetro que se utilizará de ambas formas.

5.- El siguiente paso es escribir el contenido de nuestro procedimiento, como la acción que realizara nuestro procedimiento es una inserción escribimos:

INSERT INTO Productos(nombre, precio, cantidad) VALUES(n,p,c);

 Y presionamos Next.

6.-Para terminar con su creación, se muestra el código SQL del procedimiento que estamos por crear, y presionamos Finish. Y listo, esta fué la primer forma de crear un procedimiento, este por medio del asistente de Oracle.

 

Para comenzar con la segunda forma necesitamos ubicarnos en el SQL Workshop y entrar a  SQL Commands. Un procedimiento almacenado en el que el código fuente forma parte de la sentencia CREATE PROCEDURE.

 

MÉTODO 2:

1.- Comenzaremos con la creación del procedimiento almacenado por medio de código fuente, explicando a continuación la sintaxis.

CREATE OR REPLACE PROCEDURE Nombre_Procedimiento
(variables_que_llegan_o_salen_por_parámetro)
IS
BEGIN
    --Contenido, acción que realizara el procedimiento almacenado
END;

 2.- Después de conocer la sintaxis ya podemos crear nuestro procedimiento como se muestra a continuación.

3.-Y  presionamos Run.

EJECUCIÓN PARA AMBOS METODOS:

Por ultimo para poder llamar a un procedimiento almacenado creado de ambas maneras se llama desde SQL Workshop en SQL Commands con la siguiente sintaxis.

DECLARE
    --Aquí se declaran las variables que se lleguen a utilizar
       al recuperar un dato de salida en el procedimiento.
BEGIN
    --Se llama al procedimiento almacenado
    --imprimir 
END;

NOTA: Para la impresion utilizamos dbms_output.put_line() colocando entre paréntesis el texto a imprimir, si deseas imprimir una variable, el modo de concatenar con el texto es el siguiente: dbms_output.put_line(‘producto insertado’ || variable); 

Listo, para terminar el ejercicio solo nos queda ejecutar el procedimiento presionando Run.

Menú HTML & CSS responsivo con transiciones

Hola a todos!!. En una publicación anterior vimos como crear un menú con animación JQuery, el día de hoy vamos a crear un menú con movimiento a través de transiciones CSS, es decir, podemos omitir el código Javascript para animar el menú, esto lo hacemos gracias a un truco de CSS ligado a un control checkbox.

1. El primer paso es crear la estructura HTML:

Aqui es dónde viene el truco, como puedes ver utilizamos un checkbox para mostrar el icono de menú, te preguntarás ¿Por qué utilizar un checkbox si lo puedo hacer con una etiqueta img?, bueno, pues este control nos ayudará a detectar cuando se hizo clic sobre él, utilizando CSS detectamos el cambio de estado checked para desplegar u ocultar el menú. ¿podría utilizarse una etiqueta button, link u alguna otra?, la respuesta es, seguramente sí, siempre y cuando podamos detectar sus estados dentro de CSS

<!-- Agregamos el control Checkbox y su label asociado -->
<input type="checkbox" id="menuCheck">
<label class="iconoMenu" for="menuCheck"></label>

<<!-- Este es el titulo de la página -->
<h1>Título de mi página</h1>

<!-- Estructura del menú y su contenedor -->
<div class="contenedorMenu">
<ul>
<li><a href="#">Opción uno</a></li>
<li><a href="#">Opción dos</a></li>
<li><a href="#">Opción tres</a></li>
<li><a href="#">Opción cuatro</a></li>
</ul>
</div>

Seguramente notarás que la estructura realmente no es tan compleja, así que no ahondaré en ella.

2. Pasemos a los estilos

Dentro de los estilos, solo rescataré la forma de mostrar/ocultar el menú.

#menuCheck:checked ~ .contenedorMenu{transform: translateX(0%)}

La explicación de esta línea debe comenzar con saber qué es el simbolo ~ y para que se utiliza, este simbolo llamado selector obtiene todos los elementos de la parte izquierda que preceden a la parte derecha de la regla, ejemplo: element1 ~ element2 (seleccionar todos lo elementos element2 que sean hermanos/estén al mismo nivel jerárquico que element1), para mayor información consultar el enlace https://www.w3schools.com/cssref/css_selectors.asp.

Para nuestro caso, estamos seleccionado al div contenedor del menú cuando el checkbox este en estado checked. Cuando el checkbox deja de estar en este estado los estilos vuelven a su “normalidad”, es decir a los estilos establecidos de inicio.

Para “animar” el menú utilizamos transiciones CSS que propiamente son algo diferente a las animaciones CSS, la principal diferencia es que las transiciones solo se inician en un cambio de estado como vimos ahora, mientras que las animaciones no dependen de estados de las etiquetas y se puede configurar mas a detalle como se comportará el CSS.

Finalmente te dejo el demo del funcionamiento de este código.

Saludos!

See the Pen Menú HTML & CSS responsivo con transiciones by Jesús Rodríguez (@chuyrdz) on CodePen.

Cómo crear disparadores (triggers) en postgreSQL

Antes de crear un disparador, comencemos recordando un poco sobre triggers y su función en una base de datos.

Un disparador, también llamado trigger, es un conjunto de sentencias SQL que dependen de un procedimiento almacenado, estos son almacenados dentro de la base de datos.

Los disparadores se asocian con tablas y se utilizan para ejecutarse automáticamente cuando ocurre un evento determinado en nuestra base de datos. A diferencia de los procedimientos almacenados un trigger no puede ser invocado directamente, sin mencionar que los disparadores son utilizados mayormente para mantener la integridad de los datos no para obtener resultados de consultas.

Los disparadores se ejecutan como resultado de la ejecución de una instrucción esta puede ser INSERT, UPDATE o DELETE.

La estructura básica de un trigger es:

CREATE TRIGGER nombre 
{ BEFORE | AFTER } { INSERT | UPDATE | DELETE } 
 ON tabla [ FOR [ EACH ] { ROW | STATEMENT } ]
 EXECUTE PROCEDURE nombre de funcion ( argumentos )

Descripción de la estructura:

  • Se utiliza el CREATE TRIGGER seguido del nombre del disparador que se esta creando.
  • Se utiliza BEFORE o AFTER
    ( BEFORE si se desea que la instrucción ocurra ANTES y AFTER si se desea que ocurra DESPUÉS de cualquier INSERT, UPDATE ó DELETE ).
  • Se utiliza ON seguido del nombre de la tabla donde se aplicará el disparador.
  • A continuación se presentan dos opciones, si el disparador se aplicara una sola vez, o se aplicará a cada una de las tuplas en la tabla.
    Si se aplicará una sola vez se coloca FOR EACH STATEMENT.
    Si se aplicará a todas las tuplas de la tabla se utiliza FOR EACH ROW.
  • Por ultimo EXECUTE PROCEDURE seguido por el nombre la función que ejecutará.

Debemos tener en cuenta que por cada disparador que definamos en una tabla, la base de datos tendrá que ejecutar la función asociada a dicho disparador por lo tanto es importante que el nombre de la función que se ejecutará sea el mismo que el nombre con el que es llamada.

La estructura básica de una función llamada por un trigger es:

 CREATE OR REPLACE
 FUNCTION nombre de funcion()
 RETURNS TRIGGER AS $nombre de funcion$
 DECLARE  
 BEGIN 
        --funciones que llevara acabo el disparador
 RETURN;
 END
$nombre de funcion$ LANGUAGE plpgsql;

Descripción de la estructura:

  • Se utiliza CREATE OR REPLACE al inicio de la función, si realizaste un cambio puedes volver a ejecutar la función sin tener que eliminarla.
  • Se utiliza FUNCTION seguido del nombre de la función que se esta creando.
  • RETURNS TRIGGER AS seguido del nombre del la función $.
  • A continuación se puede hacer uso de DECLARE utilizado para la declaración de variables que mas adelante se utilizaran en la elaboración de la función.
  • Dentro del BEGIN se colocan las instrucciones que se realizaran, es el núcleo de la función, al terminar regresa un valor con RETURN seguido de un END.
  • Para finalizar se coloca $nombre de la funcion$ seguido de LANGUAGE plpgsql.

Dentro del BEGIN, se puede acceder a elementos de la fila que se  esta insertando, eliminando o actualizando utilizando las referencias NEW.column-name y OLD.column-name, donde column-name es el nombre de la columna de la tabla con la que se asocia el disparador.

-NEW: Variable que contiene la nueva fila de la tabla para las operaciones  INSERT/UPDATE en disparadores del tipo row-level.

-OLD: Variable que contiene la antigua fila de la tabla para las operaciones UPDATE/DELETE en disparadores del tipo row-level.

Ya que conocemos todos los elementos que integran un disparador, a continuación te presento un ejemplo.

Ejemplo: Verifica existencias de producto al hacer la compra

CREATE TRIGGER verificarExistencias
 BEFORE INSERT ON VENTAS.T_DETALLE_VENTAS
 FOR EACH ROW
 EXECUTE PROCEDURE verificarExistencias();
 CREATE OR REPLACE
 FUNCTION verificaExistencias()
 RETURNS TRIGGER AS $verificaExistencias$
 DECLARE  cant int8; id_Socio int8; cant_Detalle int8;
 BEGIN id_Socio = NEW.id_Producto;
       cant_Detalle = NEW.cantidad;
       cant = cantidad_Producto
 FROM VENTAS.T_PRODUCTOS
 WHERE VENTAS.T_PRODUCTOS.id_Producto = id_Socio;
 IF (cant < cant_Detalle) 
    THEN raise notice 'No hay suficiente producto';
    ROLLBACK;
    return null;
 END IF;
 RETURN NEW;
 END
$verificarExistencias$ LANGUAGE plpgsql;

 

Cómo crear una conexión ORACLE 11g – ASP.NET utilizando C#

Los siguientes pasos muestran la manera de establecer conexión entre el sistema gestor de base de datos Oracle y el modelo de desarrollo ASP.NET.

Antes que nada es importante mencionar que en algunas ocasiones es conveniente dejar a un lado lo convencional y no utilizar solo aplicaciones de Microsoft para brindar tecnología a un sistema. Muchas empresas y DBA`s (Database Administrator) eligen los servicios de Oracle antes que otros motores de BD convirtiéndolo en uno de los mejores y mas utilizados. Algunas razones por las que es seleccionado son por las características de desempeño, facilidad en la escalabilidad, la alta disponibilidad en la base de datos y la seguridad implementada en sus aplicaciones.

Para este ejercicio necesitarás:

1.- Para comenzar se debe de construir la base de datos que se desea utilizar en Oracle.

2.- Una vez creada la base, se debe de crear el proyecto de tipo Web Aplication y agregar un WebForm.

Es importante agregar la siguiente referencia al proyecto ya que sin ella no se podrá tener accedo a ninguna libreria Oracle.

3.-Se agrega la referencia al componente Oracle Data Access, ubicado en la carpeta de instalacion Oracle  en el disco c de la computadora. /oraclexe/app/oracle/product/11.2.0/server/odp.net/bin/OracleDataAccess.dll

4.-A continuación se agrega una nueva clase dentro del proyecto.

5.-Ahora dentro de la clase antes creada se realiza el código de conexión:

//Se declara la siguiente linea para el acceso a las librerías Oracle
 using Oracle.DataAccess.Client;
//declaración de Objeto Conexión a Oracle
 private OracleConnection cn;
public Conexion()
{
  //Utilizaremos un try/catch para verificar que no ocurrió algún error 
  try{
    //Se crea una nueva conexión, el nombre del Usuario y contraseña son
     los establecidos en el momento de la instalación de Oracle
     cn= new OracleConnection("Data Source=*; User Id=SYSTEM;
                               Password=123456;");
    
   //Se abre la conexión creada
     cn.Open();
   //Mostraremos un mensaje en pantalla con el estado de la conexión
     MessageBox.Show(cn.State.ToString()); 
     }
catch(Exception e)
      {
   //Mensaje de Error en caso de no establecer conexión
    MessageBox.Show("No se realizar la conexion. Error: " + ex);
     }
 }

Recuerda que es necesario cerrar la conexión.

 public void cerrarConexion
   {
  //Cerramos conexión
   cn.Close();
   }

También se debe crear una nueva función de tipo OracleConnection  para regresar la conexión cuando la clase sea llamada.

 public OracleConnection regresaConexion()
 { return cn; }

Listo ya tenemos nuestra clase conexión, la cual utilizaremos cada vez que necesitemos comunicarnos con la base de datos en Oracle como se muestra en el siguiente ejemplo:

  Conexion c;
  OracleCommand cmd;
  String query=""; 

private void InsertDatos(object sender, EventArgs e)
  {
    c = new Conexion(); //nueva conexión
    query="INSERT INTO  Nombre_Tabla VALUES(Valores_a_Insertar_en_Tabla);"
 
    cmd = new OracleCommand(query, c.regresaConexion());
    cmd.ExecuteNonQuery();
   //Mensaje Inserción exitosa
    MessageBox.Show("Datos insertados correctamente");
    c.cerrarConexion(); //se cierra la conexión
 }

Es importante mencionar que OracleCommand representa una instrucción SQL o un procedimiento almacenado que se va a ejecutar en una base de datos.

El link de la documentación de Oracle se encuentra en el enlace siguiente:
http://www.oracle.com/technetwork/es/database/enterprise-edition/documentation/index.html

Cómo usar los íconos Font Awesome (fa)

El conjunto de íconos Font Awesome es una de las alternativas que nos permiten decorar nuestro sitio o desarrollo web con elementos gráficos que le den un toque moderno y ligero ya que la representación gráfica de los íconos no se realiza mediante imágenes sino a través de una tipografía (fuente).

La versión actual incluye una colección de 585 íconos en la versión 4.4.0 de Font Awesome y constantemente se agregan más.

font-awesome

La imagen anterior muestra una parte de la colección de íconos Font Awesome.

Unas de las características especiales de este conjunto de íconos es:

  • Al no ser gráficos y ser representados mediante una fuente, el peso en mucho menor.
  • Pueden utilizarse distintos colores para su representación
  • Es posible utilizar varios tamaños sin que estos se deformen

Prácticamente para usar estos íconos es necesario:

  • del proyecto de Font-Awesome es necesario descargar a la carpeta de tu proyecto la carpeta:
    • CSS que incluye los siguientes archivos:
      • font-awesome.css
      • font-awesome.css.map
      • font-awesome.min.css
    • fonts que incluye los siguientes archivos
      • FontAwesome.otf
      • fontawesome-webfont.eot
      • fontawesome-webfont.svg
      • fontawesome-webfont.ttf
      • fontawesome-webfont.woff
      • fontawesome-webfont.woff2



Una vez que tengas la estructura de directorios mencionada en la carpeta de tu proyecto, es necesario incluir el siguiente código en las páginas desde donde se utilizarán los íconos:

La referencia a los archivos CSS:
<link type=”text/css” rel=”stylesheet” href=”css/font-awesome.min.css”/>
<link type=”text/css” rel=”stylesheet” href=”css/font-awesome.css”/>

y ¡listo!, esto es lo que necesitas.

Ahora, para llamar los íconos en tu página web se hace através del artributo class de HTML y donde se mandan a llamar las conjuntos de estilos defindos por Font Awesome, de la siguiente manera:

<span class=”fa fa-folder-open”></span> directorio<br/>
<span class=”fa fa-folder-open fa-2x”></span> directorio al doble<br/>
<span class=”fa fa-folder-open fa-3x”></span> directorio al triple<br />
<span class=”fa fa-spinner fa-2x”></span>cambio de ícono <br/>
<span class=”fa fa-spinner fa-2x” style=”color:red”></span>Al ser una fuente puedes indicar el color que necesitas<br/>

el resultado es:

font-awesome-ejemplo

Utilizar una etiqueta spam es semanticamente mejor que utilizar <i> como lo menciona la ayuda de la página oficial de Font Awesome, sin emabargo es posible utilizar cualquiera de las dos.

Una de las características de estos íconos es la rotación, la puedes experimentar con el estilo: fa-spin

Font Awesome incluye el soporte para botones, listas y controles HTML, puedes encontrar documentación completa en: http://fortawesome.github.io/Font-Awesome/examples/

Saludos

Creación de menú (UL) desde cero – 5 Animación JQuery

En los post anteriores hemos creado un menú básico horizontal utilizando listas no ordenadas, luego le agregamos submenús y también lo hicimos pegajoso al scrollear sobre la página. El día de hoy modificaremos el menú básico para hacerlo vertical y vamos a utilizar JQuery para animar (mostrar / ocultar ) el menú y mejorar la navegabilidad del sitio.

1.- Estructura básica del menú. Utilizaremos la misma estructura que hemos utilizado desde el inicio.  

 <div class="contenedorMenu">        
           <ul class="menu">
                 <li><a href="#inicio">Inicio</a></li>            
                 <li><a href="#seccion1">Sección 1</a></li>
                 <li><a href="#seccion2">Sección 2</a></li>
                 <li><a href="#seccion3">Sección 3</a></li>
        </ul>                        
 </div>

 

2.- Estilos para el menú. Utilizaremos las mismas reglas, solamente cambiaremos algunos estilos para hacerlo vertical.   Hasta este punto el menú se ve así: Menu JQuery

3.- Agregar elementos adicionales a la página. Vamos a incorporar un encabezado para el menú, este contendrá un botón en donde al hacer clic se mostrara u ocultara el menú. Antes del div class=”contenedorMenu” agregamos:

<div class=”encabezadoMenu”></div>
<div class=”botonMenu”></div>

y su correspondiente css

/*Estilos para el encabezado del menu*/            
.encabezadoMenu{ width:250px; height:70px; background-color:#2C2C30;}            
.botonMenu{width:37px; height:31px; background-image:url(‘Menu.png’); position:relative; top:20px; left:25px;}            
.botonMenu:hover{ cursor:pointer} ahora el menú se ve asi: Menu5_1 4.- Agregar la referencia a la API de JQuery. De preferencia utilicemos el sitio oficial de JQuery y la versión mas reciente para trabajar nuestros proyectos. 5.- Implementar el código JQuery. Lo que queremos lograr es lo siguiente: -Inicialmente el menú debe estar oculto. -Al hacer clic sobre el botón, el menú deberá desplegarse y mostrarse completamente. -Al hacer clic nuevamente, el menú deberá contraerse y ocultarse completamente. Esto se implementará así: // <![CDATA[

    $(document).ready(function(){    
          $(“.contenedorMenu”).slideToggle(); /*Ocultar de inicio el menu*/
          /*Efecto del menu principal*/
          $(“.botonMenu”).click(function(event){ 
               event.stopPropagation(); 
              $(“.contenedorMenu”).slideToggle();  /*SlideUp o SlideDown dependiendo de su estado*/
        });            
  });    

// ]]>
menuAnimado El funcionamiento de SlideToggle, SlideUp y SlideDown puede estudiarse en la documentación oficial de JQuery. En el siguiente post, incluiremos el uso del scroll para ocultar el menú. Gracias

Crear un menu usando elementos DIV y CSS

Generalmente la creación de menús horizontales en páginas web se realizan mediante listas (ul,ol) o mediante el uso de DIV, en algún otro momento chuyrdz ya expuso detalladamente cómo se realiza la creación de un menu (ul) desde cero.

Ahora mostraré los elementos mínimos para la creación de un menú horizontal usando solamente DIV y darle la funcionalidad necesaria sin uso de JavaScript para lograr la funcionalidad.

A partir de este código mostrado tendrán la posibilidad de personalizarlo de acuerdo al diseño que se seleccione.

La estructura en HTML es la siguiente:

<div class=”Menu”>
    <div><a href=”#”>inicio</a></div>
    <div><a href=”google.com.mx”>Google</a></div>
    <div><a href=”wordpress.com”>Word Press</a></div>
    <div>
            <a href=”#”>Correos</a>
            <div class=”SubMenu”>
                <div><a href=”gmail.com”>google</a></div>
                <div><a href=”hotmail.com”>hotmail</a></div>
                <div><a href=”yahoo.com”>yahoo</a></div>
            </div>
    </div>
    <div>
           <a href=”#”>Enlaces</a>
          <div class=”SubMenu”>
               <div><a href=”www.google.com.mx”>google</a></div>
               <div><a href=”hotmail.com”>hotmail</a></div>
                <div><a href=”yahoo.com”>yahoo</a></div>
           </div>
    </div>
</div>

La estructura de estos elementos es la siguiente:

div (menu)
    – div
            -a
    – div
            -a
    – div
            -a
            -div (submenu)
                    -div
                          -a
                    -div
                          -a
                    -div
                          -a
    – div
            -a
            -div (submenu)
                    -div
                          -a
                    -div
                          -a
                    -div
                          -a

La estructura anterior muestra los elementos principales del menú que contienen submenú, en este caso, se ejemplificará para los dos últimos elementos, sin embargo si los dos primeros elementos tuvieran submenú, solo tendría que seguirse la estructura especificada y la funcionalidad se aplicará sin realizar ninguna modificación.

Ahora, para que esta estructura tenga la funcionalidad mínima de mostrar los submenús cuando el mouse esté arriba de la opción se deberá especificar el siguiente código como parte de los estilos.

/*establecemos el alto del menú*/
.Menu

{
height:30px; 
}

/*flotamos los div que son hijos directos del div que tiene como clase Menu*/
.Menu > div
{
float:left;
}

/*se indica que los enlaces ocupen todo el espacio del DIV donde están contenidos, se les da un espacio de separación interior entre el texto y el borde (padding)*/
.Menu a
{
display:block;
padding:5px 15px 5px 15px;
}

/*se establece la funcionalidad del enlace al colocar el mouse arriba del enlace*/
.Menu a:hover
{
background-color:gray;
}

/*Se establecen las características iniciales del submenú, el cual no debe mostrarse*/
.SubMenu
{
position:absolute;
visibility:hidden;
display:none;
}

/*Se establece la funcionalidad del submenu cuando el mouse esté arriba de la opción de menu*/
.Menu > div:hover .SubMenu
{
display:block;
visibility:visible;
}

Hasta el momento se tiene solamente funcionalidad, sin embargo este código está listo para adaptarle cualquier diseño de colores, contornos, estilos de letra y demás monerías  a los elementos estáticos o dinámicos.

Saludos