Tipos de Selectores en CSS

Los selectores en CSS son aquellos que identifican elementos dentro de una página web para así poder aplicar estilos a sus elementos.

Los tipos de selectores abarcan desde el nombre de las etiquetas usadas en HTML hasta combinaciones que permiten diversos selectores de la página.

Existen diferentes tipos de selectores como lo son:

  • universal
  • de etiqueta
  • descendentes
  • de clase
  • de id.

TIPOS:

Selector Universal

Es aquel que se puede utilizar para identificar y modificar a todos los elementos de la pagina web.

El selector universal se declara con un asterisco (*) y dentro de las llaves se colocan las características que tomarán los elementos como se muestra a continuación.

Creamos nuestro selector * {} en el que daremos el mismo estilo margin y padding ademas de el color aqua a todos los elementos.

Selectores de Etiqueta

Los selectores de etiqueta seleccionan a los elementos cuyo nombre coincida con el nombre del elemento html.

Cuando existen diferentes etiquetas con propiedades iguales se puede enlazar separando los nombres por comas.

Ejemplo: Se le asigna un color y un formato al texto de los títulos h1, h2 y h3.

Podemos observar en el ejemplo estamos asignando un mismo estilo a las tres etiquetas.

Selectores descendentes

Son aquellos que seleccionan los elementos que se encuentran dentro de uno o mas elementos creando una mayor precisión para la selección de la etiqueta a la que se le aplicara el estilo. Estos selectores se separan por espacios en blando.

Ejemplo: Se modificara el color y la fuente de los elementos dentro de una etiqueta <p> que a su vez este dentro de la etiqueta <div>.

Un elemento no tiene que ser descendente directo de otro si no que la única condición es que el elemento debe estar dentro del otro elemento sin importar el nivel de profundidad en el que se encuentre

Selectores de Clase

Son prácticos para aplicar estilos a un solo elemento de la página ya que utilizando el atributo class se puede indicar directamente la regla CSS

Se diferencia este tipo de selector con la notación de un punto (.) antes de la palabra usada con el prefijo “class”.

Ejemplo: Al elemento <p> en su atributo class asignamos el nombre del selector creado .DeClase

Selectores de ID

Se utilizan para dar estilo a un solo elemento según su identificador único (id). Se utiliza con el atributo de id.

La sintaxis es muy parecida con los selectores de clase; la diferencia es que se utiliza el símbolo (#) en vez del (.). La diferencia  es que no se puede repetir en una misma página web.

Por ejemplo: Al elemento h3 se le da como identificador único #DeId por lo cual solo se le aplicara el estilo a este elemento. 

Es importante no confundir este selector con los anteriores:

p#DeId : Todos los elementos de tipo p con identificador unico DeId

p DeId : Todos los elementos con identificador único DeId y este dentro de alguna etiqueta p

p, DeId : Todos los elementos p y todos los elementos con identificador único DeId

Selectores Específicos

Pero ¿Cómo es posible aplicar estilos a solamente al párrafo cuyo atributo class sea igual a Estilo?

Combinando el selector de clase y el selector de tipo, para obtener un selector mucho mas especifico:

Como podemos observar el estilo solo se aplico al párrafo y no a los otros elementos. “Se puede interpretar el selector p.Estilos como Elementos de tipo <p> que dispongan de un atributo class con un valor de Estilos”

Estos fueron los diversos selectores CSS que puedes utilizar en la creación de tu página web.

 

Los mejores Frameworks para tu sitio web

Los Frameworks web son una herramienta utilizada  para el desarrollo de sitios web.

Proporciona una esqueleto o una estructura para ser rellenado por el desarrollador y de esta manera crear una aplicación.

Algunas de las ventajas al utilizar frameworks son:

  • Ahorro de tiempo y trabajo
  • Facilita el entendimiento de código si se desarrolla en una aplicación por mas de una persona.
  • Es mas sencillo encontrar herramientas o librerías para el framework.
  • Facilita la funcionalidad en diferentes navegadores para que luzca similar.

Mientras que entre las desventajas se encuentran:

  • Limita la libertad de diseño
  • Fuerza a usar la semántica propia del framework

Para decir que framework utilizar, se necesita plantear que lenguaje de programación se utilizará y el tipo de aplicación que se realizará.

A continuación te presentamos una lista de los framework, mas utilizados por los desarrolladores

LARAVEL

Laravel es uno de los mejores Frameworks de desarrollo PHP utilizados para desarrollar una aplicación web.

Es una aplicación web con una sintaxis expresiva y elegante. Algunos de los beneficios para los usurarios son:

  • Proporciona un serie de instalaciones a los desarrolladores
  • Cuenta con bibliotecas orientadas a objetos
  • Seguridad, contraseña y cifrado
  • Migración de bases de datos
  • Almacenamiento en cache y varias características mas.

DJANGO

Django es un framework gratuito de código abierto para el desarrollo de aplicaciones web, escrito en Python, un conjunto de componentes que te ayudan a desarrollar sitios web de manera mas rápida y fácil.

Este framework fue diseñado para ayudar al llevar las aplicaciones desde el concepto hasta su finalización, es tranquilo y seguro evitando errores en la seguridad ademas Django es escalable.

 

ANGULAR.JS

Un framework basado en JavaScript, que permite ampliar el vocabulario HTML para la aplicación. El entorno resultante es expresivo, legible y rápido de desarrollar.

AngularJS es un conjunto de herramientas completamente extensible. Cada característica se puede modificar o reemplazar para adaptarse a su flujo de trabajo de desarrollo.

METEOR

Meteor es una framework javascript diseñada para agilizar el proceso de desarrollo de aplicaciones.

Las ventajas de usar este framework son:

  • Meteor simplifica el proceso de desarrollo al ofrecer la posibilidad de crear una aplicación solo con Javascript.
  • Funciona a base de modulos.
  • Es una framework sencilla de manejar, se puede aprender a manejar en cuestión de horas.
  • Para comenzar a utilizar Meteor se necesita de un nivel básico de JavaScript.
  • Para desarrolladores más experimentados en JavaScript, Meteor les da la oportunidad de escribir código y ver resultados de manera inmediata.
  • Es un framework de respuesta rápida, de manera que todos los elementos se actualizan automáticamente.
  • Por ultimo, cuanta con el apoyo de una gran comunidad activa, con la que se pueden resolver dudas que surjan respecto al funcionamiento de meteor.

RUBY ON RAILS

Es un entorno de desarrollo web de codigo abierto que permite escribir un código eficaz, evitando que se repita.

Ruby es un lenguaje de scripts, multiplatarfoma orientado a objetos.

Entre las carecterísticas del lenguaje se encuentran:

  • Posibilidad de hacer llamadas directamente al sistema operativo.
  • Muy potente para el manejo de cadenas y expresiones regulares.
  • No se necesita declarar las variables.
  • La sintaxis es simple y consistente.
  • Gestión de memoria automática.
  • Todo es un objeto.
  • Métodos Singleton.

Rails permite crear aplicaciones con acceso a bases de datos como lo son Twitter, Scribd, Hulu, Soundcloud, xing, github entre otras.

 

YII

Es un framework PHP de alto rendimiento, y el mejor para desarrolar aplicaciones web 2.0, permite la maxima reutilizacion y asi acelerar el proceso de desarrollo.

El requerimiento para poder utilizar este framework es tener un servidor web con soporte PHP 5.1.0 o superior, ademas del entendimiento de la programación orientada a objetos.

Como la mayoría de los frameworks PHP, Yii es un framework MVC (modelo-vista-controlador) y sobresale del resto por su eficiencia y gran cantidad de características y su clara documentación

 

Ahora ya conoces algunos frameworks que te pueden ayudar a facilitar el desarrollo de un sitio web.

 

Contador de visitas en un sitio web utilizando PHP

En esta publicación vamos a realizar un script en “php” que nos servirá como un contador de visitas para nuestro sitio web.

Un contador de visitas sirve para indicar el número de visitantes que ha tenido un sitio web de forma que incrementa cada vez que una persona acceda al sitio.
Actualmente se puede ver esta “estrategia” en sitios web personales ya que muestran la cantidad de lectores que tienen un interés en común.

Existen muchas formas de realizar un contador de visitas.

  • Obtener un servicio gratuito en Internet y pegar el código con un script ya establecido.
  • Crear un propio script y manipularlo directamente en una tabla de una base de datos enlazada a nuestro sitio web.
  • Crear un propio script y guardarlo en un archivo de texto plano el contador.

A continuación realizaremos un script y lo guardaremos en un archivo de texto plano, este método es el más sencillo de implementar y se puede visualizar el objetivo general de tener un contador de visitas.

Pasos:

  1. Crear un archivo de texto plano con cualquier extensión ya sea .txt, .contador, etc. Y escribir el numero 0 como único contenido y guardarlo en el mismo directorio del archivo .php que crearemos a continuación.
  2. Crear un script que llamaremos “contador_visitas.php” para aumentar el número que está almacenado en el archivo que creamos anteriormente ya que se activara cada vez que cargue el sitio web y sea llamado el script.

a.- Ubicamos el archivo que creamos anteriormente. (1)
b.- 
Abrimos el archivo en modo de lectura con la letra “r”. (2)
c.- 
Verificamos si el archivo vea abierto exitosamente. (3)
d.-
 Leemos el archivo y guardamos su contenido en la variable “contador”. (4)
e.-
 Aumentamos 1 a nuestro variable contador. (5)
f.-
 Abrimos nuevamente el archivo pero ahora en modo de escritura con “w+”. (6)
g.- 
Escribimos en el archivo el nuevo número de visitantes. (7)

4.- Ahora podremos utilizar este script en cualquier sitio web que queramos. Podremos ejecutarlo desde el inicio al cargar el sitio.

Cambiar formato de elementos Font Awesome, botones y texto al colocar el puntero

En esta practica vamos a cambiar el formato de elementos Font Awesome, ademas de un texto y un botón, cada que el puntero se posicione sobre el elemento.

Anteriormente aprendimos a añadir elementos Font Awesome, recordemos un poco.

Para utilizar los íconos Font Awesome es necesario:

1.-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.woff

2.- Una vez que tengas la estructura de directorios mencionada en la carpeta de tu proyecto, es necesario incluir las referencias CSS en las páginas desde donde se utilizarán los iconos:

<link type=”text/css” rel=”stylesheet” href=”css/font-awesome.min.css”/>
<link type=”text/css” rel=”stylesheet” href=”css/font-awesome.css”/>

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

<span>
<img class="fl-icon" src="my-icons-collection_1/png/001-food.png" alt="foto"/>
</span>

Ya que hemos recapitulado la manera de añadir elementos Font Awesome, Comencemos con el ejercicio.

Pasos:

1.- Como anteriormente lo mencionamos añadimos las referencias al archivo css.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Practica</title>
<link rel="stylesheet" href="FA/css/font-awesome.min.css"/>
</head>

2.-Ahora armemos nuestro body en el que insertamos el elemento Font Awesome con la etiqueta <span>, ademas de insertar texto y un botón.

< div class="services-div">
 <span> 
    <img class="fl-icon" src="my-icons-collection_1/png/001-food.png" alt="foto"/> 
 </span>
 <p class="services-title">
   <a href="#">Services</a>
 </p>
 <p class="services-title">
   <a href="#">Services</a>
 </p>
 <hr width="50%" align="center"/>
 <p class="services-desc">Look through an extensive catalog of our services including everything from cloud messaging to remote sensing equipment.</p>
 < div class="boton">
   < div class="capa"></div>
   < a href="#">More</a>
 </div>
</div>

3.-El siguiente paso sera insertar el código css

  • Usaremos .services-title para dar formato al Titulo
  • .service-title a para dar formato a los hiperenlaces que colocaremos.
  • .services-title a:hover para especificar los cambios que tendra el titulo al momento de color el cursor sobre el.
  • .services-desc para dar formato al parrado de texto.
  • .fl-icon para dar formato en este caso tamaño y una transición a los iconos Font Awesome.
  • Y por ultimo .services-div:hover .fl-icon para señalar que cada que el cursor pase en el contenedor cambie el formato de los iconos Font Awesome dentro de este.
<!--Código CSS--> 
<style type="text/css">

.services-title{ 
    font-family:"Arial Narrow", "Times New Roman", Times, serif; 
    text-transform:uppercase; color:white; 
    text-align:center; font-size:2.3em; 
}
.services-title a{ 
    color:white;
    text-decoration:none;
    transition:all .5s; 
}
.services-title a:hover{ 
     color:#50ADE7;
 }
.services-desc{ 
      text-align:center; 
      color:white; font-family:Tahoma; 
      width:80%; margin:0px auto; 
      font-size:0.95em;
}
.fl-icon{ 
      transform:scale(.4);
      transform:scale(.4); 
      transition:all 1s;  
      margin-top:-140px; 
      margin-bottom:-150px;  
      margin-left:30px
}
.services-div:hover .fl-icon
{ transform:scale(.5);}

.
.
.
  • También usaremos .boton para dar estilo al boton
  • .boton a para dar estilo al hiperenlace dentro del botón
  • .capa para el estilo a una capa que que tendrá el botón
  • Y por ultimo .boton:hover .capa para cambiar el tamaño de la capa y así crear el efecto en el botón.
.
.
.
.boton{ 
width:155px; 
height:50px; 
background:linear-gradient(to bottom, #429fe2, #5ebbeb); 
overflow:hidden; 
border-bottom:2px solid #a5dbfa; 
margin:0px auto;
 margin-top:50px; 
margin-bottom:50px}

.boton a{ 
text-align:center; 
padding-top:15px; 
padding-bottom:15px; 
color:white; 
text-decoration:none; 
text-transform:uppercase; 
font-weight:100; 
font-family:"Arial Narrow"; 
display:block; 
position:absolute; 
width:155px;}

.capa{ 
height:0px; 
transition:all  0.5s  ease; 
position:absolute; 
width:155px; 
background-color:rgba(76,80,81,1);}

.boton:hover .capa{ 
height:50px;}

</style>

A continuación se muestra el resultado final

Resultado Final:

See the Pen Elementos by Maria Gpe. Velázquez Martínez (@MarieVelmart7) on CodePen.

Crea tu propio Slider para tu página web con HTML, CSS Y JS

Hola, en esta nueva publicación te mostraremos una manera sencilla de crear tu propio slider de imágenes para tu página web.

Comencemos con una pequeña introducción de lo que es un slider.

Un slider es un recurso que se utiliza para dar un diseño mas novedoso a la presentación de imágenes en un sitio web además de ser una manera de atraer la atención de los visitantes y usuarios que accedan a ella.

Requisitos:

Para realizar esta práctica necesitaras de algunas imágenes, así como también haremos uso de conocimientos en HTML, CSS y Javascript.

  • Definiremos el código HTML en el cual crearemos un contenedor donde se creara el slider, lo llamaremos “caja”.
  • Declararemos en el código CSS la apariencia que tomara el contenedor.
  • Y por ultimo utilizaremos Javascript para el funcionamiento de este con un degradado.

Procedimiento:

  1. Iniciemos la práctica colocando el código HTML, dentro de la etiqueta <body>  colocamos onload=”javascript:Aparecer()” para que se ejecute automáticamente al cargar la página.
  2. Ahora crearemos el contenedor con la etiqueta <div> en la que declararemos las imágenes  <img  src= dirección de imagen  id= identificador de imagen>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Practica</title>
</head>
<!--Código HTML-->
<body onload="javascript:Aparecer();">
.
.(imagenes)
.
</body>

 

Es importante que dentro de la etiqueta <img> se declare un identificador ya que se utilizara mas adelante.

3.- Para definir la apariencia utilizaremos CSS el cual definimos de la siguiente manera dando formato al contenedor de las imágenes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Practica</title> 
<!--Código CSS--> 
<style type="text/css">
#caja{
width:262px; 
height:192px; 
color:white; 
font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; 
margin:0px auto; 
margin-top:30px;}

img{     
width:350px;    
height:200px; 
position:absolute;}
</style>
</head> 
<!--Código HTML--> 
.
.
.
</html>

Asignamos un tamaño a las imágenes con un width y height además de la posición en la que se ubicarán las imágenes dentro del slider.

Ahora estamos listos para comenzar a introducir el código javascript.

4.- Comenzaremos creando la función Aparecer en la que utilizaremos un interval=setInterval(muestra, 20) para llamar cada 20 milisegundos una nueva función llamada muestra.

La función Aparecer llamara:

  • La función detener  la cual manejara un clearInterval(interval) para limpiar el intervalo.
  • Y la función elige la cual se encargara de elegir y activar la visibilidad entre las imágenes del slider.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Practica</title> 
<!--Código CSS-->
.
.
. 
<!--Código Javascript--> 
 
var interval; 
var i=1; 
var ver=0; 

function Aparecer() { 
detener(); 
elige(); 
interval=setInterval(muestra, 20); } 

function muestra() { 
if(i>6) { 
   i=1; 
    Ocultar(); } 
if(ver==0) 
   document.getElementById("arbol").style.opacity=i; 
else 
   document.getElementById("nieve").style.opacity=i; 
i+=0.05; } 

function detener() { 
clearInterval(interval); } 

function elige() { 
if(ver==0) { 
document.getElementById("arbol").style.visibility="visible"; 
document.getElementById("nieve").style.visibility="hidden"; } 
else { 
document.getElementById("arbol").style.visibility="hidden"; 
document.getElementById("nieve").style.visibility="visible"; } }


</head> 
<!--Código HTML--> 
.
.
.
</html>

5.- La función muestra jugara un papel muy importante a la hora de mostrar y ocultar ya que manejara la transición entre imágenes jugando con la opacidad de la imagen que se muestra en el slider.

function Ocultar() { 
detener(); 
interval=setInterval(desvanecer,20); } 

function desvanecer() { 
if(i<=0) { 
i=0; 
if(ver==0) 
ver=1; 
else ver=0; 
elige(); 
Aparecer(); } 
if(ver==0) 
document.getElementById("arbol").style.opacity=i; 
else document.getElementById("nieve").style.opacity=i; 
i-=0.05; } 
<!--Código HTML--> 
.
.
.
</html>

6.- Mientras que la función de Ocultar se encargara con un interval=setInterval(desvanecer,20) de llamar cada 20 milisegundos a la función desvanecer esta se encargara de modificar la opacidad de la imagen que se ocultara.

De esta manera tendremos el efecto de un transición entre cada imagen del slider. Listo esta es una manera secilla de realizar un slider para tu sitio web.

Resultado:

See the Pen slider1 by Maria Gpe. Velázquez Martínez (@MarieVelmart7) on CodePen.

Crear un reloj utilizando Javascript, HTML Y CSS

A continuación se muestra la creación de un reloj, un  ejercicio en que utilizaremos elementos html, css y javascript.

Con este ejercicio podremos aprender la utilización de la hora y fecha del sistema para implementarla en una pagina web.

Iniciaremos con la creación de un nuevo documento de tipo html, y dentro de body crearemos el contenedor con la etiqueta <div></div> donde colocaremos nuestro reloj el cual llamaremos “caja”. Ademas agregaremos un enlace utilizando la etiqueta <a></a> con la cual daremos inicio a nuestro reloj.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
</head>
<!--Código HTML-->
<body>
 <a href="javascript:iniciarReloj();">Iniciar Reloj</a>
<body>
</html>
 A continuación le daremos un formato a la caja utilizando elementos css.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
<!--Código CSS-->
<style type="text/css">
#caja{ 
width:300px; 
height:200px;
background-color:blanchedalmond;
color:black; 
font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; font-size:2.0em; 
text-align:center;}
a{ 
border:1px solid brown;}
</style>
</head>
<!--Código HTML-->
<body>
 <a href="javascript:iniciarReloj();">Iniciar Reloj</a>
</body> </html>

Ya que tenemos nuestro código CSS y HTML comenzaremos con nuestro código. Utilizaremos la función de iniciarReloj() en la que con setInterval(reloj, 1000)  según el valor indicado la función sera ejecutada en este caso 1000 milisegundos es el tiempo que se ejecutara la función reloj().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
<!--Código CSS-->
.
.
.
<!--Código JS-->
 
var interval;
function iniciarReloj(){
interval=setInterval(reloj, 1000);//1000 milisegundos = 1 segundo  }

function reloj() { 
var d= new Date(); 
var t= d.toLocaleTimeString();
document.getElementById("caja").innerHTML= t;
} 

</head>
<!--Código HTML-->
.
.
.
</html>

Posteriormente en la función reloj() es donde se inyectara el código js en HTML con document.getElementById(“caja”).innerHTML= t  utilizaremos t en caso de utilizar solo la hora, y d si se requiere la fecha completa.

También podemos incluir un enlace con la etiqueta <a></a> para detener el reloj esto en nuestro código HTML y creando una nueva función en el código CSS en la cual marcamos el clearInterval(interval); que limpiara el intervalo que anteriormente se había declarado para el intervalo de ejecución en el iniciarReloj().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
<!--Código CSS-->
.
.
.
<!--Código JS-->
 
var interval;
function iniciarReloj(){ ... }
function reloj() { ... } 

function detenerReloj() { 
clearInterval(interval);
 }

</head>
<!--Código HTML-->
<body>
 <a href="javascript:iniciarReloj();">Iniciar Reloj</a>
 <a href="javascript:detenerReloj();">Detener Reloj</a>
 </body> </html>

De esta manera concluimos el ejercicio con el cual aprendimos a utilizar la hora del sistema, y la implementan del setinterval y el clearinterval ademas del innerHTML.

See the Pen reloj by Maria Gpe. Velázquez Martínez (@MarieVelmart7) on CodePen.

Seleccionar Row en un ASP.NET GridView

Al utilizar un GridView en ASP.NET podrás observar que no se pueden seleccionar las tuplas de dicho control, o cual es necesario cuando se requiere seleccionar un indice de dicho controlador.

A continuación te mostramos una práctica donde se requiere seleccionar un row de un GridView  para extraer los datos de un socio de gimnasio (id_Socio, nombre_Socio, direccion_Socio, peso_Socio, altura_Socio, ocupacion_Socio, vigencia) y de esta manera mostrar los datos en su textBox correspondiente,  los pasos que te mostramos a continuación son necesarios para lograr dicha funcionalidad.

Para esta práctica necesitaras:

-Visual Studio 2008+
-ASP.NET
-Formulario donde se implementara la práctica con un GridView.

Bien, comencemos.

Paso 1:

Dentro de la vista de diseño de Visual Studio, seleccionamos el GridView en el que deseamos implementar el seleccionado y en sus propiedades, seleccionamos los eventos.

Paso 2:

Seleccionamos el evento llamado SelectedIndexChange, este evento puede crear un controlador de eventos para determinar cuando el indice seleccionado de una herramienta, en este caso del GridView ha cambiado.  

Esto puede ser útil cuando se necesita mostrar información en otro control basado en la selección actual del GridView.

El evento puede utilizar el controlador de eventos para este evento para cargar la información en los demás controles.

Paso 3:

Para esta práctica es necesario agregar la librería Drawing escribiendo using System.Drawing; que proporciona acceso a funcionalidades de gráficos.

Paso 4:

Dentro del evento anteriormente agregado agregaremos un foreach el cual se encargara de recorrer los rows del GridView, y adentro debemos de crear una condición con la que revisaremos si la tupla seleccionada sea igual a la tupla en la que se encuentra el recorrido.

Si coincide a continuación cambiaremos el color de la tupla una vez encontrada:
row.BackColor =ColorTranslator.FromHtml(color_deseado); 

Y se coloca donde se desea colocar la información recuperada en este caso recuperaremos la información en text.
textoClave.Text = tablaSocios.SelectedRow.Cells[0].Text;

Si no coinciden las tuplas se regresara al color que anteriormente se tenia, esto es para evitar dejar el color en las tuplas cuando fueron seleccionadas antes y es cambiada la tupla en selección actual.
row.BackColor =ColorTranslator.FromHtml(color_anterior); 

Paso 5:

Para terminar se agrega el evento RowDataBound  en este evento cada fila en el control debe estar enlazado a un registro en el origen de datos. 

El evento se desencadena cuando una fila de datos esta enlazado a datos en otro control. Dentro del evento colocaremos e.Row.Attributes[“onclick”] = Page.ClientScript.GetPostBackClientHyperlink(tablaSocios, “Select$” + e.Row.RowIndex);

Esto para recuperar los atributos de la tabla en este caso tablaSocios, con un Select y el indice.

Ahora podemos seleccionar la tupla del GridView que queramos y se recuperaran los datos.

 

Y de esta manera terminamos una práctica mas, donde aprendimos como seleccionar y recuperar datos del GridView .

 

 

 

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.

 

 

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.