Programando la Net

viernes, 19 de julio de 2013

Pseudo-clases CSS3 - Lección 13

Pseudo-clases

hover:

Las pseudo-clases se utilizan para añadir efectos especiales a algunos selectores. Este se activa cuando el cursor del mouse pasa sobre el elemento con la pseudo-clase "hover".

Tenga presente que los dispositivos móviles pueden tener un trato diferente con respecto a esta propiedad.

<!DOCTYPE html>

<html>

      <head>

           <style>

           a:hover{

                 background-color:yellow;

                 }

           </style>

      </head>

      <body>

           <a href="http://programandolanet.blogspot.mx/">Programando la Net</a>

           <a href="http://psicowiki.blogspot.mx/">Portal de Psicología</a>

      </body>

</html>

focus:

Esta pseudo-clase se activa cuando un elemento de tipo "input" está a punto de recibir información.

<!DOCTYPE html>

      <html>

      <head>

           <style>

           input:focus{

                 background-color:yellow;

                 }

           </style>

      </head>

      <body>

           <form>

                 Nombre: <input type="text" name="nombre" /><br>

                 Apellido: <input type="text" name="apellido" />

           </form>

      </body>

</html>

active:

Los estilos se aplicaran a el elemento de un formulario que se encuentre activo, es decir al que se esté ocupando.

<!DOCTYPE html>

<html>

      <head>

           <style>

                 a:active{

                       background-color:yellow;

                 }

      </style>

      </head>

      <body>

           <a href="http://programandolanet.blogspot.mx/">Programando la Net</a>

           <a href="http://psicowiki.blogspot.mx/">Portal de Psicología</a>

      </body>

</html>

miércoles, 17 de julio de 2013

Variables - PHP y MySQL Lección 3

Iniciación a las Variables

Las variables también llamadas pares nombre-valor, las cuales nos permiten almacenar temporalmente datos, que como su nombre lo dice, pueden variar durante la ejecución del código.

En PHP, a diferencia de otros lenguajes, las variables no necesitan ser declaradas, ya que al momento de asignarles su valor, automáticamente se declaran he inicializan.

En PHP las variables van precedidas por el símbolo de dolar ($).

Entonces la forma correcta de asignarle a un nombre de variable un valor es:

Escribir el símbolo de dolar ($)
El nombre de la Variable
El Operador de Agnación (=)
El valor que se le asigna a dicha variable
Y el punto y coma al final

$nombreDeVariable = valor;

Aprendiendo C - Lección 1

INTRODUCCIÓN

Bienvenidos sean todos ustedes a este nuevo tutorial sobre los lenguajes de programación C y C++.

Dos de los lenguajes mas potentes y de mas uso para programar, y uno de los tantos que nos permite adentrarnos de manera muy completa a este mundo de la programación.

Si usted mi estimado lector, esta iniciando en el mundo de la programación, y se encontró al igual que yo en momentos de no saber por donde empezar, déjeme decirle que hoy se sentirá feliz de saber que no debe ir, por el momento a ningún otro lugar.

Podrá sonar muy aventurado o pretencioso decir esto pero, bien déjeme decirle que como los demás tutoriales de este blog, iremos poco a poco y desde cero, para que de manera sistemática comprenda la lógica de programar, y sea usted capaz en poco tiempo de realizar sus propios programas.

Para el estudio de estos lenguajes de programación iremos viendo en primer lugar el lenguaje de programación C y posteriormente veremos la versión extendida de este programa con C++, el cual surgió después y nos proporciona mayores opciones para programar, además de compartir similitudes con su antecesor C, y seguir desarrollando nuestra habilidades.

Que necesitamos

Bien ara este curso, usted no necesita nada mas que su computadora su complet disposicion y entusiasmo y un IDE (integrated development environment - entorno de desarrollo integrado), el cual proporciona un ambiente parara desarrollar "x cosa" con una gran variedad de herramientas, y un compilador (No se preocupe por estos términos en breve los iremos explicando).

Entonces lo primero que haremos será descargar nuestro ambiente de desarrollo el cual ademas consta con su propio compilador y nos servia tanto para C como para C++.

Instalación de nuestro entorn de desarrollo IDE

Valla a esta dirección para descargar nuestro IDE "Zinjai" dando clic aquí.
En esta página usted tendrá la opción de descargar la versión para Windows, Mac o Linux. (Yo empleo Windows)
Para su instalación no creo que exista algún problema, (siguiente-siguiente-siguiente, etc XD). Pero bueno puede ver el siguiente vídeo dando clic aquí para ver como instalarlo.

Entrando en Materia

Bien a continuación necesitamos conocer algunos conceptos básicos que usted debe tener presente, ya que estos procesos se llevan a cabo durante la creación de un programa.

"No se preocupe lo veremos de manera breve y consistente, para entrar de lleno ya a programar en nuestra siguiente lección.

Edición:

La Edición es el proceso de crear y modificar el código de nuestro programa C.

Compilado

Es el proceso de convertir el código que nosotros editamos en lenguaje máquina, es decir un lenguaje de ceros y unos "lenguaje binario"
Durante el proceso del compilado, es posible detectar una amplia variedad de errores, pero esto no nos asegura que nuestro programa funcionará adecuadamente.
El archivo de salida del compilador recibe el nombre de "object code" con la extensión .o en Linux o .obj en Windows

Anclaje o Enlace

En este proceso se combinan los módulos de objeto generados por el compilador y los demás recursos de código proveídos por las librerías.
También durante este proceso, el proceso nos puede señalar alguna librera inexistente, necesaria para correr el programa
Finalizando estos pasos, nosotros obtendremos nuestro archivo ejecutable.

En Windows tendríamos nuestro archivo con la extensión .exe
En Linux no tendrá extensión, pero será de formato ejecutable.

Ejecución

Por ultimo este paso consiste en correr nuestro programa y si todo salió bien, podremos disfrutar de nuestra creación.

martes, 16 de julio de 2013

Posición Absoluta - CSS3 Lección 12

Posición Absoluta

CSS permite diferentes maneras de posicionar un elemento, como los anteriormente vistos de margin, padding, text-align, float, etc. y otro es la posición absoluta.

La posición absoluta nos permite desprender de las propiedades de inline/block a nuestro elementos y colocarlos en la posición que nosotros queramos.

Aunque no es recomendable para establecer la vista de una página, generalmente se emplea esta propiedad junto con JS par realizar una determinada animación o movimiento de un determinado elemento.

Veamos un ejemplo con el siguiente código HTML y CSS.

<!DOCTYPE HTML>

<html lang = "es">

      <head>

           <title>absolute.html</title>

           <meta charset = "UTF-8" />

           <style>

                 #bug {

                       position: absolute;

                       left: 100px;

                       top: 50px;

                 }

           </style>

      </head>

      <body>

           <h1>Absolute Positioning Example</h1>

           <p>

           Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />

           Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />

           Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />

           Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />

           Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />

           Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />

           Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />

           Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />

           Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />

           Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />

           </p>

           <p id = "bug">

                 <img src = "img/bug.gif" alt = "bug picture" />

           </p>

      </body>

</html>

Esta página contiene un párrafo ordinario y otro párrafo para la imagen para el cual necesita una carpeta en el directorio de su archivo llamada img con una imagen con extensión (.gif) llamada bug.

Si no colocásemos estilos a nuestra página solo vería un párrafo y una imagen en el inferior, sin embargo al aplicar los estilos, los cuales se encuentran en azul, y le damos el atributo de absolute a la propiedad position , la imagen se sitúa en la posición que nosotros especificamos sin importar los demás elementos.

Con el ejemplo anterior lo que veremos será:

lunes, 15 de julio de 2013

text-align CSS3 - Lección 11

text-align

La propiedad text-align especifica la alineación horizontal del texto de un elemento.

Los valores que puede asumir esta propiedad serán:

text-align: center;

text-align: justify;

text-align: right;

text-align: left;

Este atributo nos permite ajustar los ya conocidos: centrado, justificado. alineado a la derecha o alineado a la izquierda, este último es el que los navegadores tienen por defecto.

Veamos esta propiedad en practica dentro de nuestro código del ejemplo del formulario:

<!DOCTYPE HTML>

<html lang = "es">

<head>

<title>Formulario</title>

      <meta charset = "UTF-8" />

<style>

      fieldset {

           width: 80%;

           margin: auto;

      }

      form{

           width: 30%;

      }

      label {

           float: left;

           width: 30%;

           margin-left: 15%;

           padding-right: 1em;

text-align: right;

      }

      input {

           display: block;

      }

      button {

           display: block;

           margin: auto;

      }

</style>

</head>

<body>

      <form action = "">

           <fieldset>

                 <label>Nombre</label>

                 <input type = "text" id = "txtNombre" />

                 <label>Dirección</label>

                 <input type = "text" id = "txtDirec" />

                 <label>Teléfono</label>

                 <input type = "text" id = "txtTel" />

                 <button type = "button">

                       Enviar

                 </button>

           </fieldset>

      </form>

</body>

</html>

Recuerde que usted debe de experimentar todas las opciones posibles, para que se familiarice con esta propiedad.

Padding - CSS3 Lección 10

Padding

Las propiedades de padding CSS definen el espacio entre el borde del elemento y el contenido del elemento.

El padding crea un área alrededor de los contenidos (en el interior del elemento). El padding se ve afectado por el color de fondo del elemento.

Esta propiedad nos permite alejar los elementos del borde que los contiene.

Como vimos en el caso de margin podemos especificar el padding con el valor auto, el cual nos ajusta el contenido con la configuración predefinida del navegador de manera abreviada o especificando cada padding individualmente.

En CSS, es posible especificar diferentes tipos de pading para diferentes lados:

padding-top: 25px;/*Establece el padding superior*/
padding-bottom: 25px;/*Establece el padding Inferior*/
padding-right: 50px;/*Establece el padding Derecho*/
padding-left: 50px;/*Establece el padding Derecho*/

Para acortar el código, es posible especificar todas las propiedades de padding en una propiedad. Esto se llama una propiedad abreviada.

padding:25px 50px 30px 50px;

La propiedad de relleno puede tener de uno a cuatro valores.

padding: 25px 50px 75px 100px;

relleno superior es 25px
relleno derecho es 50px
relleno de fondo es 75px
margen izquierdo es 100px

padding: 25px 50px 75px;

relleno superior es 25px
rellenos derecha e izquierda son 50px
relleno de fondo es 75px

padding: 25px 50px;

rellenos superior e inferior son 25px
rellenos derecha e izquierda son 50px

padding: 25px;

los cuatro rellenos son 25px

Apliquemos el padding a nuestro ejercicio de del formulario que traemos desde las lecciones anteriores.

<!DOCTYPE HTML>

<html lang = "es">

<head>

<title>Formulario</title>

      <meta charset = "UTF-8" />

<style>

      fieldset {

           width: 80%;

           margin: auto;

      }

      form{

           width: 30%;

      }

      label {

           float: left;

           width: 30%;

           margin-left: 15%;

           padding-right: 1em;

      }

      input {

           display: block;

      }

      button {

           display: block;

           margin: auto;

      }

</style>

</head>

<body>

      <form action = "">

           <fieldset>

                 <label>Nombre</label>

                 <input type = "text" id = "txtNombre" />

                 <label>Dirección</label>

                 <input type = "text" id = "txtDirec" />

                 <label>Teléfono</label>

                 <input type = "text" id = "txtTel" />

                 <button type = "button">

                       Enviar

                 </button>

           </fieldset>

      </form>

</body>

</html>

Bien note en azul el pequeño código que fue añadido

Copie el código en su editor de texto y corralo en su navegador y vea el cambio con la propiedad padding y sin la propiedad para que note la diferencia,

Experimente colocando el padding en diferentes lugares para que note los cambios.

En este ejemplo ocupamos la unidad de medida "em", la cual representa la unidad previamente especificada, por defecto en la mayoría de los navegadores sería 16px; Bajo esta medida:

1em - 16px
2em - 32px
así...

domingo, 14 de julio de 2013

Margin - CSS3 Lección 9

Margin

En la lección anterior vimos como manipular la posición de un formulario haciendo uso del atributo float, a continuación veremos una serie de atributos que nos ayudaran a darle mas formatos de disposición a nuestro formulario.

En esta lección veremos la propiedad margin.

El margen despeja un área alrededor de un elemento (fuera de este). El margen no tiene un color de fondo, y es completamente transparente.

La propiedad margin puede recibir diferentes valores:

auto: el navegador calcula el margen automáticamente
dimensiones: puede ser en pixeles, pulgadas o porcentajes.

Podemos especificar los margenes de manera individual de la siguiente manera:

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

O podemos hacerlo de manera abreviada, de las siguientes maneras.

margin: 25px 50px 75px 100px;

margin superior es 25px
margin derecho es 50px
margin inferior es de 75px
margin izquierdo es de 100px

margin: 25px 50px 75px

margin superior es 25px
los márgenes derecho e izquierdo son 50px
margin inferior es de 75px

margin: 50px 25px;

márgenes superior e inferior son 25px
los márgenes derecho e izquierdo son 50px

margin: 25px;

todos los cuatro márgenes son 25px

Ahora aplicaremos estilos a nuestro ejemplo del formulario

<!DOCTYPE HTML>

<html lang = "es">

<head>

<title>Formulario</title>

      <meta charset = "UTF-8" />

<style>

      fieldset {

           width: 80%;

           margin: auto;

      }

      form{

           width: 30%;

      }

      label {

           float: left;

           width: 30%;

           margin-left: 15%;

      }

      input {

           display: block;

      }

      button {

           display: block;

           margin: auto;

      }

</style>

</head>

<body>

      <form action = "">

           <fieldset>

                 <label>Nombre</label>

                 <input type = "text" id = "txtNombre" />

                 <label>Dirección</label>

                 <input type = "text" id = "txtDirec" />

                 <label>Teléfono</label>

                 <input type = "text" id = "txtTel" />

                 <button type = "button">

                       Enviar

                 </button>

           </fieldset>

      </form>

</body>

</html>

En el formulario anterior aplicamos un margen con un valor auto, el cual le permite al navegador ajustar un margen predefinido.

Después le colocamos un margen izquierdo a los elementos label, lo cual lo separa del borde del "fieldset".

Y también le colocamos un margen con valor auto al elemento button.

Desde luego usted puede implementar diferentes formas para el margen, sin embargo el objetivo de este tutorial es que usted vea el uso de la propiedad margin.