Netrunning: agosto 2014

viernes, 29 de agosto de 2014

PHP (02) Cadenas y matrices (03) Creando matrices

Tenemos que tener en cuenta que en PHP las matrices son sumamente importantes, de hecho será la forma con la que más comúnmente se comunique PHP con el usuario de la aplicación.
Pero ¿que es una matriz?
Son colecciones de elementos que comparten un mismo nombre, como por ejemplo escritores, notas, alumnos, coches...
Hay varias formas de declarar un matriz, pero una de las más sencillas es hacerlo como si fuera una variable e indicando la posición donde ira el dato, contando siempre desde cero. (Esto es común a la totalidad de los lenguajes de programación, ya que el ordenador comienza a contar desde cero y no desde uno).

$escritores [0] = "Unamuno";
$escritores [1] = "Cervantes";
$escritores [2] = "Machado";
$escritores [3] = "Becquer";

En este caso hemos creado una mariz unidimensional con cuatro elementos, ya que como hemos dicho el 0 es el primero.

de hecho podríamos escribir las siguiente líneas para poder verlos:

echo "<p>".$escritores [0] . "</p>";
echo "<p>".$escritores [1] . "</p>";
echo "<p>".$escritores [2] . "</p>";
echo "<p>".$escritores [3] . "</p>";

Naturalmente hay mejores formas, pero iremos poco a poco en nuestro recorrido por PHP, pero de este modo veríamos a cada escritor en una línea, según su índice en el array.

Pero los índices no tienen por que se numéricos, también pueden ser cadenas que nos empiezan ya a mostrar como sería una matriz bidimensional:

$notas ["Jose"] = 7.4;
$notas ["Maria"] = 4.2;
$notas ["Lourdes"] = 8.0;
$notas ["Antonio"] = 5.6;

Como puedes ver es algo muy sencillo, y lo es aun más cuando se recorren....
Pero hay más formas de crear nuestros arrays, como por ejemplo:

$escritores [] = "Unamuno";
$escritores [] = "Cervantes";
$escritores [] = "Machado";
$escritores [] = "Becquer";

En esta ocasión no hemos puesto índice al array, pero no importa PHP detecta que es un array y va colocando a cada elemento al final del mismo del modo que tenemos lo mismo que en el primer ejemplo pero ahorrándonos el poner índices.

Pero hay mas formas de declarar un array, por ejemplo con el operado => que le dice a PHP la pareja posición valor, de modo que nuestros dos ejemplos quedarían:

$escritores = array (0=> "Unamuno", 1=> "Cervantes", 2=> "Machado", 3=> "Becquer");
$notas = array ("Jose"=>7.4, "Maria"=>4.2, "Lourdes"=>8.0, "Antonio"=>5.6);

Esta es una forma muy comun de declarar un array, de hecho tambien se pueden dejar espacios en blanco en el array, si por ejemplo hacemos lo siguiente:

$escritores = array (0=> "Unamuno", 3=> "Cervantes", 4=> "Machado", 5=> "Becquer");

Estamos dejando las posiciones 1 y 2 libres, pudiendo incluirlas mas tarde.

Es muy sencillo, te animo a que hagas algunos arrays/matrices y los veas en tu navegador antes de seguir avanzando ya que las matrices son muy importantes en PHP y tienen una potencia que aun no puedes ni imaginar...

Como nota final dejar esta imagen para que entendais la diferencia entre los arrays uni, bi y trimensionales...

AngularJS (07) HTML DOM

AngulaJS puede afectar a algunos elementos del DOM de HTML, para ello utiliza una serie de directivas tal y como veremos en los siguientes ejemplos...

La directiva ng-disabled

Esta directiva nos ofrece la posibilidad de poder desactivar un elemento del DOM para que el usuario no pueda trabajar con él. Veamos el siguiente ejemplo:

<!DOCTYPE html>
<html>
<body>

<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Haz Click!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>Activar botón
</p>
<p>
estado del Switch: {{ mySwitch }}
</p>
</div> 

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

</body>
</html>

Como siempre se inicializa la aplicación con ng-app
Le damos el valor inicial a la variable mySwitch, por medio de ng-init, que es true, esto hará que el elemento seleccionado esta no disponible.
Se introduce la variable mySwitch en un botón por medio de la directiva ng-disabled, que esta en true lo que viene a decir: Sí esta desactivado.
A continuación con ng-model se puede modificar el valor de la variable y de ese modo activar o desactivar la opción de clickar
Finalmente hay una expresión que nos indica el estado de la variable mySwitch

La directiva ng-show

Esta directiva que puede tomar los valores true o false es muy util para mostrar elementos del DOM o no como vemos en el siguiente ejemplo.

<!DOCTYPE html>
<html>
<body>

<div ng-app="">

<p ng-show="true">Visible.</p>

<p ng-show="false">Invisible.</p>

</div> 

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

</body>
</html>

Vemos que si ng-show es true, entonces el elemento del DOM se muestra en pantalla, mientras que si es false no.

La directiva ng-hide

De forma muy similar pero cambiando el significado de los valores true o false, funciona la directiva ng-hide, la cual se muestra cuando su valor el false y se oculta cuando su valor es true

<!DOCTYPE html>
<html>
<body>

<div ng-app="">

<p ng-hide="true">Invisible</p>

<p ng-hide="false">Visible</p>

</div> 

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

</body>
</html>

Con estas directivas ya podemos imaginar que es lo siguiente que veremos; eventos y scripts para poder ocultar y mostrar elementos del DOM.... haciendo ya cositas interesantes....

jueves, 28 de agosto de 2014

PHP (02) Cadenas y matrices (02) Conversión a y desde cadenas

Una de las tareas más importantes de interfaz dentro de PHP es el cambio de de cadenas a numeros y viceversa
Aunque es bastante sencillo, podemos verlo con un ejemplo:

<html>
<head>
 <title>
 Conversión desde cadenas y números
 </title>
</head>
<body>
 <h1>
 Conversión desde cadenas y números
 </h1>
 <?php
  $flotante = 3.1415;
  echo "<p>" .(string) $flotante ."</p>";
  echo "<p>" . strval($flotante) . "</p>";
  $valor = 1 + "19.2";
  echo "<p>$valor </p>";
  $valor = 1 + "2.5e4";
  echo "<p>$valor </p>";
  $texto = "3.0";
  $valor = (float) $texto;
  echo "<p>" . $valor / 2.0 . "</p>";
 ?>
</body>
</html>

Cuyo resultado en pantalla es:

En el ejemplo vemos que se declara una variable númerica flotante, al cual se le hace lo que se denomina un casting con la expresion (string) y en la siguiente línea se le convierte de nuevo en un número por medio de strval
Depues podemos ver como se declara la variable $valor, la cual vale 1+"19.2" y se obtiene como resultado 20, esto es debido a que PHP identifíca que es un número y al tener el operador + los suma. (debemos recordar que el operador de concatenación en php es el punto . )
Esto mismo ocurre cuando se redeclara la variable $valor como 1+"2.5e4"
Finalmente se declara un variable $texto, con la que declara $valor por medio de un casting:

$valor = (float) $texto;

por lo que $valor se considera un tipo float. (númerico decimal) con el cual se puede realizar la última operación.

AngularJS (06) Tablas

Vamos a aprender ha hacer tablas con angularjs y utilizando su directiva ng-repeat.
Para ello vamos a utilizar el mismo objeto JSON que hemos utilizado en el articulo anterior; $http
Como podemos ver en el siguiente código, hacer una tabla en angular, es realmente sencillo:

<!DOCTYPE html>
<html>
<body>

<div ng-app="" ng-controller="customersController"> 

<table>
  <tr><td><b>Nombre</b></td><td><b>País</b></td></tr>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

</div>

<script>
function customersController($scope,$http) {
  $http.get("http://www.w3schools.com/website/Customers_JSON.php")
  .success(function(response) {$scope.names = response;});
}
</script>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

</body>
</html>

Es así de simple, ya que la llamada a las cadenas en la repeticion se hace en cada celda y se van mostrando por columnas, dando una presencia mucho más atractiva a nuestra presentación, pero naturalmente se le pueden hacer muchas cosas más, ya que esta tabla responde a los estilos css que queramos ponerle y a los filtros, como vemos en este ejemplo completo:

<!DOCTYPE html>
<html>
<head>
<style>
table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
</head>

<body>

<div ng-app="" ng-controller="customersController"> 

<table>
  <tr ng-repeat="x in names | orderBy : 'Country'">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country | uppercase}}</td>
  </tr>
</table>

</div>

<script>
function customersController($scope,$http) {
  $http.get("http://www.w3schools.com/website/Customers_JSON.php")
  .success(function(response) {$scope.names = response;});
}
</script>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

</body>
</html>

Podemos observar viendo el código, que en el head se ha introducido un estilo css (lo recomendable es que el estilo se encuentre en un archivo aparte pero para ejemplo es más didactico tenerlo aquí), en el cual se se muestra el borde y el sombreado.
Una vez que entramos en la tabla podemos observar como en la directiva ng-repeat, utiliza una tubería para ordenar por país todos los casos, y dentro de la llamada a los paises se añade otro filtro para que aparezcan los nombres de los paises en mayúscula.

miércoles, 27 de agosto de 2014

AngularJS (05) $http

$http es un servicio del que dispone AngularJS para poder leer datos desde servidores remotos.

Por ejemplo, consideremos el siguiente archivo con un objeto JSON, que esta ubicado en:

http://www.w3schools.com/website/Customers_JSON.php

[
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",

"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" 
: "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial 
Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{

"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},

{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",

"Country" : "Spain"
},
{
"Name" : "Galería del gastrónomo",

"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island 
Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "Königlich 
Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{

"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",

"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",

"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : 
"North/South",
"City" : "London",
"Country" : "UK"
},
{

"Name" : "Paris spécialités",
"City" : "Paris",
"Country" : "France"

},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",

"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "København",

"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : 
"Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",

"City" : "Århus",
"Country" : "Denmark"
},
{
"Name" : "Wolski 
Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]

Utilizando la funcion: $http.get(url) se pueden leer los datos como en este ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Jason</title>
</head>
<body>
 <div ng-app="" ng-controller="customersController">

  <ul>
    <li ng-repeat="x in names">
      {{ x.Name + ', ' + x.Country }}
    </li>
  </ul>

 </div>

<script>
function customersController($scope,$http) {
    $http.get("http://www.w3schools.com/website/Customers_JSON.php")
    .success(function(response) {$scope.names = response;});
}
</script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

La aplicación comienza inicializándose con ng-app
La directiva ng-controller llama al controlador del objeto
La función costumercontroler es un constructor de javascript
$http.get(url) lee los datos JSON desde un servidor
$scope.names hace un array cuando se leen los datos JSON desde el archivo en el servidor

martes, 26 de agosto de 2014

AngularJS (04) Filtros

Los filtros sirven para procesar las información antes de que esta aparezca en pantalla, generalmente para darles algún tipo de formato o para seleccionar los elementos de un array.

Para poder utilizar los filtros tan solo hay que utilizar en carácter especial | también llamado pipe o tubería, de la siguiente forma:

<p>El nombre es:  {{ persona.nombre | uppercase }}</p>

Como podemos ver, la expresión se amplia con la tuberia y el filtro que queremos aplicar...

Existen diferentes tipos de filtros, como podemos ver en la siguiente lista:

currency: que da formato a un numero a formato moneda
filter: que selecciona un subconjunto del array
lowercase: que convierte la cadena en minúsculas
orderBy: ordena el array por una expresión
uppercase: que convierte una cadena en mayúsculas

Añadiendo filtros a un expresión

Vamos a añadair un filtro a uno de los ejemplos que ya vamos conociendo para ver su resultado:

<!DOCTYPE html>
<html>

<body>

<div ng-app="" ng-controller="personController">

<p>¿Nombre? <input type="text" ng-model="persona.nombre"></p>
<p>¿Apellido? <input type="text" ng-model="persona.apellido"></p>

<p>El nombre es:  {{ persona.nombre | uppercase }}</p>

<p>El apellido es:  {{ persona.apellido | lowercase }}</p>

</div>

<script>
function personController($scope) {
    $scope.persona = {
        nombre: "Miguel",
        apellido: "Ramirez"
    };
}
</script>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

</body>
</html>

En el ejemplo ya podemos ver mezcladas varias cosas de las que hemos visto hasta el momento, ya que recoge las variables con ng-model, llamando al objeto y a la propiedad (persona.nombre), utiliza un controlador para crear el objeto y finalmente muestra el resultado con una expresión y un filtro que convierte al nombre en mayúsculas y al apellido en minúscula.

lunes, 25 de agosto de 2014

PHP (02) Cadenas y matrices (01): Funciones de cadena

PHP esta orientado a cadenas (una serie de caracteres, donde cada caracter es un byte) e integra muchas funciones para las mismas. En muchas ocasiones, los programas en PHP contienen grandes cantidades de texto, ya que los datos obtenidos del usuario estan en este formato.
Es por ello que PHP tiene integradas una enorme cantidad de funciones para tratar a las cadenas.
A lo largo de esta entrada voy a mostrar un tabla con muchas de están funciones y después haré un script para que se vea su funcionamiento... así que dale a más información.

AngularJS (03) Controladores

Seguimos avanzando por AngularJS y llegamos a los controladores, donde ya podemos empezar a introducir código javascript, ya que se trata de un objeto.

Con esto entramos de lleno en el modelo-vista-controlador, con el que AngularJS comienza a tener mucha más fuerza. Para ello utiliza $scope que es algo así como el pegamento que une al controlador y la vista.

Angular funciona desde una vista (Todo lo que hemos hecho hasta ahora), pero es mejor no poner la lógica en la vista ya que es bastante difícil mantenerla desde el propio html (algo así como ocurre con el css, que en muy raras ocasiones se utiliza el atributo style).

En su lugar vamos a tener un objeto especial de JavaScript - un contenedor - denominado un controlador. La vista pasa los datos al controlador, el cual se encarga de tratarlos, pudiendo incluso actualizar un back-end.

El pegamento entre la Vista y el Controlador se denomina Ámbito de la aplicación, y en angular vamos a ver un montón de objetos o variables que comienzan con $.
$scope representa el ámbito del objeto.

Pero vamos a ver un ejemplo de todo esto para entenderlo mejor:

domingo, 24 de agosto de 2014

AngularJS (02) Directivas

Las directivas en AngularJS son atributos extendidos que comienzan con el prefijo ng-
Dentro de estas directivas podemos encontrar:

ng-app que inicializa la aplicación de AngularJS, que puede tener un valor para enlazarla a un modulo, como veremos más adelante.
ng-init que inicializa los datos de la aplicación
ng-model que recoge los datos de los diferentes inputs para la aplicación.
ng-repeat clona elementos html por cada elemento de una colección (array).

Hay que tener en cuenta que una web puede tener diferentes aplicaciones, y que para hacer que se ejecute la aplicación hay que inicializarla en un <div>, <article>...

En el siguiente ejemplo se puede observar como funciona una aplicación completa:

<!DOCTYPE html>
<html>
    <body>

        <div ng-app="" ng-init="algo='Mateoooo'">

            <p>Escribe algo en la caja:<input type="text" ng-model="algo"></p>

            <p>Has escrito: {{ algo }}</p>

        </div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

    </body>
</html>

Primero podemos observar como se inicia la aplicación y se le da un valor inicial a la variable algo.
En segundo lugar aparece el input de tipo text donde recoge el valor con ng-model y finalmente como el propio script recoge la variable y la muestra utilizando {{ algo }}

Enlace de datos

Una aplicación de AngularJS no tiene por que tener una sola variable, como vemos en el siguiente ejemplo los datos pueden ser varios, siempre y cuando las variables se llamen de forma diferente:

<!DOCTYPE html>
<html>
<body>

    <div data-ng-app="">

        <h2>Calculo de coste</h2>

        Cantidad: <input type="number" ng-model="cantidad">
        Precio: <input type="number" ng-model="precio">

        <p><b>Total:</b> {{cantidad * precio}}</p>

    </div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

</body>
</html>

Como se puede observar en este script, no hemos inicializado las variables (Ya que no es necesario), además hay dos variables que recogen su valor desde sendos ng-model que finalmente son utilizados para una expresión aritmética y calcular el total...

Repitiendo elementos de HTML

Un uso muy interesante en AngularJS es que se pueden añadir nuevos elementos html, como podemos ver en el siguiente ejemplo:

<!DOCTYPE html>
<html>
<body>

<div data-ng-app="" ng-init="nombres=['Pepe','Maria','Antonio', 'Paco']">
  <p>bucle con ng-repeat:</p>
  <ul>
    <li ng-repeat="x in nombres">
      {{ x }}
    </li>
  </ul>
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

</body>
</html>

Se declara un array unidimensional y luego con la directiva ng-repeat se hace que x en nombres ponga un nuevo elemento <li> con la expresion {{ x }}

De hecho esto puede ir a más, utilizando arrays bidimensionales como en el siguiente ejemplo:

<!DOCTYPE html>
<html>

<body>

<div ng-app="" ng-init="nombres=[
    {nombre:'Jani',pais:'Norway'},
    {nombre:'Hege',pais:'Sweden'},
    {nombre:'Kai',pais:'Denmark'}]">

<p>Bucle con objetos:</p>
<ul>
  <li ng-repeat="x in nombres">
  {{ x.nombre + ', ' + x.pais }}</li>
</ul>

</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

</body>
</html>

Podemos ver como el array es recorrido por su dos campos y mostrado en una lista, además podemos fijarnos de que en la expresión se coloca texto adicional, con + ', ' +

viernes, 22 de agosto de 2014

AngularJS (01) Expresiones

Las expresiones están escritas entre dobles llaves: {{expresión}}
Las expresiones unen los datos a HTML del mismo modo que lo hace la directiva ng-bind
Las expresiones en AngularJS son muy parecidas a las de JavaScript, pudiendo mantener; literales, operadores y variables.

<!DOCTYPE html>
<html>
    <body>
        <div ng-app>
            <p>Mi primera expresión: {{ 5 + 6 }}</p>
        </div>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> 
   </body>
</html>

Si eliminamos la directiva ng-app del div, el navegador solo mostrará la expresión como texto ya que no se ejecuta el script.

Variables en AngularJS
Numéricas
Las variables se deben de declarar para que podamos utilizarlas, para ello usamos la directiva ng-init como podemos ver en el siguiente ejemplo:

<!DOCTYPE html>
<html>
    <body>

        <div ng-app="" ng-init="cantidad=3;coste=5">
            <p>Total a pagar: {{ cantidad * coste }}</p>
        </div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

    </body>
</html>

Como puede verse se inicializan las dos variables con ng-init y tras ello se realiza la operación aritmetica en la expresión.
Este mismo ejemplo con ng-bind quedaría:

<!DOCTYPE html>
<html>
    <body>

        <div ng-app="" ng-init="cantidad=3;coste=5">
            <p>Total a pagar: <span ng-bind="cantidad * coste"></span></p>
        </div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

    </body>
</html>

Cadenas
De forma análoga a como se declaran las variables con números podemos declarar y usar las cadenas y trabajar con ellas:

<!DOCTYPE html>
<html>
    <body>

        <div ng-app="" ng-init="nombre='Miguel';apellido='López'">

            <p>el nombre completo es: {{ nombre + " " + apellido }}</p>
            <p>el nombre completo con ng-bind es: <span ng-bind="nombre + ' ' + apellido"></span></p>

        </div> 

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

    </body>
</html>

JSON
También podemos declarar y trabajar con objetos tipo JSON siguiendo la siguiente forma:

<!DOCTYPE html>
<html>

    <body>

        <div ng-app="" ng-init="persona={nombre:'Miguel',apellido:'López'}">

            <p>El apellido es  {{ persona.apellido }}</p>
            <p>El nombre con ng-bind es <span ng-bind="persona.nombre"></p>

        </div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

    </body>
</html>

Arrays
Y finalmente declaramos y usamos un array:

<!DOCTYPE html>
<html>

    <body>

        <div ng-app="" ng-init="puntos=[0,15,30,40]">

            <p>El tercer resultado de puntos es: {{ puntos[2] }}</p>
            <p>El cuarto resultado segun ng-bind es: <span ng-bind="puntos[3]"></span></p>

        </div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

    </body>
</html>

A pesar de esta forma de inicializar las variables, no es muy común hacerlo de este modo, aprenderemos una forma mejor cuando hablemos de los controladores, pero de momento nos es valida, ya que nos ha servido para poder mostrar como se llaman desde el propio código HTML.

AngularJS (00) Introducción

Llevo un tiempo mirando este framework de google, y he decidido aprenderlo por mi cuenta, e ir poniendo aquí mis impresiones y como funciona, como otro tutorial tipo al de PHP, de hecho la idea es ir mezclando ambos tutoriales en el blog para que tanto los interesados en back como en front end puedan ir siguiendo las dos líneas de trabajo.
La verdad es que nada vez como empieza a funcionar angularJS uno se queda un tanto perplejo, hay quien incluso dice que se ha comido a ajax y JQuery, eso el tiempo lo dirá.

Para esta serie de tutoriales, tras buscar por la red voy a seguir w3school, aunque utilizaré algún que otro material como vídeos de youtube o manuales en inglés, pero toda la información aquí contenida estará en castellano para que la comunidad hispano parlante pueda seguirlo.
También puede ser interesante hacer el curso que ofrece Google en su web oficial y que yo personalmente haré.
Así que ¿que os parece si empezamos?

Introducción a AnagularJS
Podemos empezar mostrando un ejemplo de la fuerza que tiene AngularJS, si pruebas a copiar el siguiente código y ejecutarlo en tu navegador, encontrarás solo la punta del iceberg de Angular:

<!DOCTYPE html>
<html>
    <body>
     <div ng-app="">
         <p>Escribe algo en la caja:</p>
         <p>Prueba a escribir algo: <input type="text" ng-model="texto"></p>
         <h2 ng-bind="texto"></h2>
     </div>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

    </body>
</html>

Divertido ¿verdad?
Pero...
¿que tengo que saber si quiero aprender AngularJS?
Pues en realidad hace falta saber algunas cosas:

HTML
CSS
Javascript

Un poco de historia
AngularJS es relativamente nuevo, no apareció su versión 1.0 hasta 2012 y empezó a desarrollarse por Miško Hevery en 2009, de modo que es algo aun muy muy novedoso.
La idea resulto muy buena y ahora el proyecto esta respaldado por Google con un equipo a tiempo completo...

¿Que es AngularJS?
AngularJS es un framework de javascript, de hecho es una libreria de javascript, distribuida como un archivo de JS y que se puede añadir a nuestro código con la siguiente etiqueta script:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

Es recomendable que esta etiqueta se encuentre al final del body, ya que de lo contrario podría no haber cargado todo el DOM y no funcionar correctamente.

AngularJS extiende HTML
Esto significa que lo enriquece, le da mucha más fuerza de la que tiene por si mismo para ello utiliza las denominadas ng-directivas, las cuales son:

ng-app la cual define una aplicacion de angular.
ng-model que se une al valor HTML de los inputs, textareas, selects... para los datos de las aplicaciones
ng-bind que une los datos de la aplicación a la vista HTML

Si observas el ejemplo de más arriba veras como se utilizan las tres directivas de forma sencilla:

Angular se ejecuta cuando la página es cargada por completo
La directiva ng-app contenida en la etiqueta <div> indica que se trata de una aplicación de angular
La directiva ng-model recoge el valor del input en una variable llamada texto
La directiva ng-bind introduce la variable como si fuera un innerHTML en la etiqueta h2

En las siguientes entradas hablare de expresiones, directivas, controladores, filtros... pero de momento ya puedes practicar con lo que hemos aprendido en esta introducción.

PHP (00) Fundamentos básicos (07): Constantes

Hay ocasiones en las que querremos declarar un elemento que sea constante, como el numero PI, el nombre de una ciudad... y al cual no querremos cambiarle el valor por error, y aunque su uso es muy similar a las variables, su declaración es un tanto diferente:

define ("PI", 3.141592);

De este modo siempre que usemos PI, PHP sabrá que se refiere a nuestra constante definida.
Hay que tener cuidado entre las mayúsculas y las minúsculas, ya que PHP las identifica y si queremos que PHP no distinga entre las mayúsculas y minúsculas de la variable, entonces se debe de hacer de la siguiente forma:

define ("PI", 3.141592, TRUE);

La palabra TRUE hace que PHP sea insensible a las mayúsculas y minúsculas en el nombre de la constante.

Observa que no se utiliza $ delante del nombre de la constante ya que eso la convertiría en una variable. De hecho si intentamos cambiar el valor de la constante PHP ni siquiera iniciará el script y nos dará un error.

Para acceder a una constante es tan sencillo como con una variable:

define ("PI", 3.141592);
echo pi;

Pero hay que tener cuidado con las palabras reservadas del propio PHP, ya que este trae definidas algunas variables per se:
• _LINE_ El número de línea actual del archivo
• _FILE_ La ruta completa y el nombre del archivo
• _FUNCTION_ El nombre de la función
• _CLASS_ El nombre de la clase
• _METHOD_ Nombre del método de clase
• PHP_VERSION Versión de PHP
• PHP_OS El sistema operativo
• DEFAULT_INCLUDE_PATH Donde PHP buscará lo que necesita

PHP (00) Fundamentos básicos (06): Variables

Hasta ahora todo lo que hemos hecho han sido cosas estáticas, mostrar un texto con echo que puede mostrarse con la etiqueta <p></p> en html no es que sea algo muy atractivo, pero ahora vamos a poder modificar eso utilizando variables y cuando entremos en el siguiente tema a estudiar las estructuras de control de flujo entonces ya veremos como si que es algo excepcional, mucho más cuando esas variables incluso puedan ser recogidas por un formulario... pero no adelantemos acontecimientos y basemonos ahora mismo solo en las variables...

¿qué son las variables?
Las variables en PHP, lo mismo que en cualquier otro lenguaje de programación son ubicaciones de la memoria con nombres asignados y que guardan datos.
Por ejemplo, imagina que queremos saber el número de apartamentos en alquiler en tres ciudades como Málaga, Cádiz y Córdoba, podríamos saber el numero de apartamentos disponibles en cada ciudad o en las tres utilizando variables.

¿cómo se declaran la variables en php?
PHP a diferencia de JAVA, no esta fuertemente tipado, es decir, no hace falta declarar que tipo de variable estamos declarando, simplemente hay que declararlas sin indicarles tipo, aunque es importante saber que tipo hay (ver más abajo).
Para declarar la variable simplemente hay que escribir el nombre que queremos ponerle a la variable con el signo dolar delante ($malaga).
Es interesante no poner signos de acentuación ni caracteres extraños en el nombre de las variables ya que puede llegar a producir errores, además no debemos utilizar ninguna de las palabras reservadas para ello. Afortunadamente como hispanoparlantes no hay demasiadas coincidencias entre nuestro idioma y las palabras reservadas en PHP que son en inglés.
Siguiendo con el ejemplo de los apartamentos en las tres ciudades haremos un pequeño script para el mismo:

<html>
    <head>
        <title>Declaración de Variables</title>
    </head>
    <body>
        <h2>Apartamentos disponibles en ciudades</h2>
        <?php
            //Declaramos las variables y sus valores
            $malaga = 20;
            $cadiz = 12;
            $cordoba = 5;
        ?>
    </body>
</html>

Como puedes observar, hemos introducido el php en el código html en el cual hemos hecho un comentario para advertir de que comentamos las variables y después las declaramos asignándoles un valor. Aunque de momento nuestro script no hace absolutamente nada.

Mostrando el valor de las variables
¿Recuerdas a nuestro amigo echo? pues de nuevo va ha ayudarnos, ya que es el encargado de mostrar la información como veremos a continuación:

<html>
    <head>
        <title>Declaración de Variables</title>
    </head>
    <body>
        <h2>Apartamentos disponibles en ciudades</h2>
        <?php
            //Declaramos las variables y sus valores
            $malaga = 20;
            $cadiz = 12;
            $cordoba = 5;
            $total = $malaga+$cordoba+$cadiz;
             //mostramos los valores de las variables con echo
            echo 'apartamentos disponibles en Málaga = ' . $malaga;
            echo 'apartamentos disponibles en Cádiz = ' . $cadiz;
            echo 'apartamentos disponibles en Córdoba = ' . $cordoba;
            echo 'apartamentos disponibles en total = ' . $total;
        ?>
    </body>
</html>

En el script puedes ver que hemos sumado todas las variables para obtener la total, y luego hemos mostrado varía líneas de texto donde se muestran los apartamentos disponibles por ciudades y los totales.
Habrás observado que para concatenar variables al texto y al código html <br/> se utiliza el (.) y que todo lo que PHP debe de interpretar como htm va dento de comillas, mientras que para obtener el valor de las variables estas no pueden ir entre comillas.
No te asustes, esto que en principio puede quebrar un poco la cabeza es algo realmente intuitivo y sencillo, sobre todo si utilizas un editor de textos que utiliza colores.

Importante: Siempre debes de tener una variable declarada antes de utilizarla o php dará un error como respuesta!!!!

Concatenando variables
Esto es una cuestión que surge al descubrir el operador (.), ¿podria concatenar dos variables? y la respuesta es sí, de hecho hay que diferenciar entre variables numéricas y de cadena, por ejemplo:

$numerica1 = 1234;
$numerica2 = 5678;
$cadena1 = '1234';
$cadena2 = 'Polonia';
echo '$numerica1 . $numerica2 = ' . $numerica1 . $numerica2;
echo '$numerica1 . $cadena1 = ' . $numerica1 . $cadena1;
echo '$numerica1 + $numerica2 = ' . $numerica1 + $numerica2;
echo '$numerica1 + $cadena1 = ' . $numerica1 + $cadena1;
echo '$numercia1 + $cadena2 = ' . $numercia1 + $cadena2;
echo '$cadena1 + $cadena2 = ' . $cadena1 + $cadena2;
echo '$cadena1 . $cadena2 = ' . $cadena1 . $cadena2;

Este código que podemos analizar para ver la diferencia entre + y . nos da como resultado:

$numerica1 . $numerica2 = 12345678
$numerica1 . $cadena1 = 12341234
5678
1234
Notice: Undefined variable: numercia1 in C:\xampp\htdocs\miphp\pruebadate.php on line 19 0
0
$cadena1 . $cadena2 = 1234Polonia

Observando el resultado podemos ver que los valores numéricos y las cadenas se puede concatenar pero no sumar entre ellas y tampoco se pueden sumar dos cadenas.
Esto puede dar errores, por lo que siempre es interesante tener claro si trabajamos con valores numéricos o cadenas.

jueves, 21 de agosto de 2014

PHP (00) Fundamentos básicos (05): Comentarios de código

Los comentarios en el código son muy útiles, para poder saber que hace una función, reconocer variables, dividir el código en diferentes partes que tu u otra persona que acceda a él puedan reconocer...
Es una parte escrita que el navegador ignora y no utiliza en el programa pero que están ahí para alertar, contar, avisar... al programador de algo, que puede ir desde el nombre del autor original, fecha de desarrollo... hasta explicar que valor devuelve una funcion.
En PHP hay varios tipos de comentarios:

Comentarios que ocupan diferentes líneas: que empiezan por /* y terminan por */, ignorandose todo lo que se encuentra en medio. Este tipo de comentario es muy útil para aquellos que son extensos y en los que queremos extendernos. Ejemplo

<?php
/*Esto es un comentario
que esta escrito en varias líneas
y no aparece en pantalla*/

echo 'este mensaje si aparece';
?>

El segundo tipo de comentario es aquel que ocupa una línea o mejor dicho el resto de una línea, ya que cuando el interprete lee // ignora todo lo que haya detrás y se va a la siguiente línea de código, este suele ser el más usado y algunos ejemplos son:

<?php
//Esto es un comentario
//que esta escrito en varias líneas, línea a línea
//y no aparece en pantalla

echo 'este mensaje si aparece';//este comentario está detrás del echo
?>

Pero si queremos llamar la atención sobre una parte del código podemos utilizar #, y hacer algo parecido a esto:

<?php
##############################################
#                  ATENCIÓN!!!!              #
#                   ESTO ES                  #
#                 UN COMENTARIO              #
##############################################
echo 'este mensaje si aparece';
?>

Con estas tres formas podemos hacer comentarios en nuestros códigos y hacer nuestra web mucho más legible...
En la siguiente entrada empezaremos a hablar de las variables...

PHP (00) Fundamentos básicos (04): Impresión de texto

Ya va siendo hora de que vayamos haciendo que PHP empiece a mostrar información, aunque de momento será un texto estatico, cualquiera con un poco de imaginación podrá ir dandose cuenta del potencial que esto puede suponer...
Para que PHP pueda imprimir en pantalla utilizaremos la palabra reservada echo, esta palabra tiene el poder de mostrar todo aquellos que ramos utilizando la siguiente sintaxis:
echo "texto";
o bien
echo 'texto';
Yo prefiero utilizar las comillas simples ya que cuando se introducen atributos de las etiquetas HTML nos ahorramos los posibles errores.
Tambien se pueden imprimir números directamente, o incluso variables, concatenar textos e incluso introducir en su interior código html, algo realmente interesante...
De hecho iremos viendo a lo largo de estas entradas muchas funcionalidades de echo en PHP, pero ya podemos ir creando nuestra primera página con echo:

<html>
    <head>
 <title>
     Combinación de HTML y PHP
 </title>
    </head>
    <body>
        <h2>Ahora hablará PHP</h2>
        <?php
            echo 'Hola Mundo!!!';
        ?>
    </body>
</html>

PHP (00) Fundamentos básicos (03): Combinación de HTML y PHP

Ya es hora de que empezamos ha mostrar información en nuestro navegador, PHP tiene la capacidad de mezclarse con HTML, el lenguaje web por excelencia, tan solo es necesario introducir, al menos en principio, el siguiente código en nuestro HTML:

<?php
    codigo
?>

Como podemos ver hay dos marcas extrañas, estas son:

<?php que le dice al navegador que comienza el php
?> que le dice al navegador que termina el código php

De esta forma podemos introducir PHP a nuestro código HTML y comenzar a tocar la web, aunque este ejemplo es muy sencillo, sirve para ilustrarlo.

<html>
    <head>
 <title>
     Combinación de HTML y PHP
 </title>
    </head>
    <body>
 <h2>Su información de PHP</h2>
        <?php
            phpinfo();
        ?>
    </body>
</html>

En este ejemplo podemos ver como un documento HTML engarza un código php, el cual llama a una función determinada por php, en la cual nos muestra la información de la versión de php.
De esta forma comenzáremos a trabajar desde ahora, podrás comenzar a descubrir todo lo que este lenguaje de servidor puede ofrecerte....

Bienvenido a PHP!!!

miércoles, 20 de agosto de 2014

PHP (00) Fundamentos básicos (02): Entorno de desarrollo

Para poder trabajar con PHP nos es necesario un entorno de desarrollo en el que poder trabajar, ya que no es como html o javascript que son interpretados por el navegador, sino que necesita un servidor donde estar alojado, pero esto que puede parecer muy muy complicado es realmente sencillo, ya que no recomiendo que se haga a mano, deja eso para los que tienen que hacer ese tipo de practicas del plestioceno (yo he sido uno de ellos). Mi recomendación es que uses un servidor local como XAMP o LAMP (so usas windows), ya que te instalan un paquete de herramientas muy muy útiles y que servirán en un futuro, además de que es realmente fácil de instalar; solo tienes que descargarlo (pulsa en la imagen para ir a su web oficial) y seguir las instrucciones de instalación.

Una vez que tenemos instalado nuestro xamp, que se encuentra en la raíz de C:, entramos en su directorio y en la carpeta htdocs podemos crear nuestros proyectos.

Por otro lado necesitamos un editor de textos, como sublime, notepad++ o cualquier otro, desde el cual vamos a programar.
Para que nuestras webs funcionen es necesario guardar nuestros archivos con la extensión .php y guardarlos en el directorio htdocs de xamp.

En el siguiente vídeo os explico como funciona el localhost de xamp, como activar apache desde el panel de control...

PHP (00) Fundamentos básicos (01): ¿que es PHP?

PHP es un lenguaje de programación de uso general de código del lado del servidor originalmente diseñado para el desarrollo web de contenido dinámico. Fue uno de los primeros lenguajes de programación del lado del servidor que se podían incorporar directamente en el documento HTML en lugar de llamar a un archivo externo que procese los datos. El código es interpretado por un servidor web con un módulo de procesador de PHP que genera la página Web resultante. PHP ha evolucionado por lo que ahora incluye también una interfaz de línea de comandos que puede ser usada en aplicaciones gráficas independientes. Puede ser usado en la mayoría de los servidores web al igual que en casi todos los sistemas operativos y plataformas sin ningún costo. Sirve para bases de datos, chats, libros de visitas, votaciones...
De hecho, este lenguaje, llamado de servidor, es uno de los cuales sin ellos, las webs serían solamente fronr-ends, muy bonitas pero sin posibilidad de que hubiera redes sociales, blogs, bases de datos... convirtiéndolo de este modo en algo esencial para toda web que no sea estática en lo que a contenidos se refiere..

Fue creado originalmente por Rasmus Lerdorf en 1995. Actualmente el lenguaje sigue siendo desarrollado con nuevas funciones por el grupo PHP. Este lenguaje forma parte del software libre publicado bajo la licencia PHP, que es incompatible con la Licencia Pública General de GNU debido a las restricciones del uso del término PHP.

Oficialmente significa “PHP: Hypertext Preprocessor” (o “PHP: Preprocesador de hipertexto”), pero aún sigue conociéndose en todo el mundo por su nombre original, “Personal Home Page” (o “Página de inicio personal”).

PHP (01) Control de flujo (09): break y continue

Llegamos ya a la parte final del control de flujo en php, aunque este tema en realidad se puede considerar que vale para muchos otros lenguajes de programación ya que el funcionamiento básico es el mismo en todos.

Terminación Prematura de Códigos
Como ya hemos visto en el switch esto se realiza con la palabra reservada break, la cual se utiliza para romper la ejecución de los bucles, y no solo los ya mencionados switch si no cualquier otro, como podemos ver en el siguiente ejemplo.

for ($i=0; $i<10000; $i++){
 echo ('voy a dar vueltas a menos que me pares!!!![br/]');
 if ($i == 10){
  echo ('has sido detenido!!!!');
  break;
 }
}

Como podemos ver el contador estaría dando vueltas hasta las diez mil vueltas, pero dentro del bucle for hay un if que impone la condición de que si $i es igual a 10, (recuerda que en las comparaciones igual es ==), entonces cambie el mensaje y rompa el bucle...
De este modo se pueden detener todos lo bucles que queramos y aunque no es algo muy comun si es interesante saber que podemos hacerlo.

Omisión de Iteraciones
Un caso aun más peculiar si cabe es este, el cual utiliza la palabra continue. Un ejemplo claro de su utilización puede ser al estar haciendo cálculos matemáticos que pueden dar indeterminaciones o números extraños, como por ejemplo una división entre cero, en cuyo caso se le introduce una condición y podemos saltarnos la iteración problemática del bucle.

for ($i=-5; $i<5; $i++){
 if ($i == 0){
  continue;
 }
 echo "1/$i" . 1/$i . '[br]';
}

Puedes ver que en esta división, cuando el denominador es cero se cumple la condición del if, y en ese caso salta el continue que evita que se realice la operación del echo.

Nota: si quieres ver estos códigos embebidos en un archivo html, pincha aquí y puedes verlo en mi github.

martes, 19 de agosto de 2014

PHP (01) Control de flujo (08): foreach

Esta forma de control, aunque se adelante un poco a nuestro "temario", sirve para recorrer colecciones como matrices (no te asustes, llegaremos a estas proximamente), ya que las procesa estomáticamente y no hay que tener contadores funcionando... esta es su forma de funcionamiento:

coleccion;
foreach (expresion){
    instrucciones;
}

Este bucle es un poco más complicado, por el tema de las colecciones, pero lo veremos muy claro con el siguiente ejemplo extraido del McGrawHill:

$matriz = array("pavo", "jamón", "ternera");
foreach ($matriz as $valor) {
echo "Emparedado actual: $valor<br>";
}

La primera línea nos declara el array, con tres palabras; pavo, jamón y ternera.
La segunda línea es donde tiene lugar el bucle, en la expresión nos dice que tome el valor correspondiente de $matriz y lo guarde en la variable $valor, que luego utiliza.
Una vez ha terminado la matriz el bucle termina y sigue el programa normalmente....
De este modo aunque ahora mismo no le veas mucha importancia a este bucle, descubrirás que puede tener muchas utilidades y un gran aliado a la hora de preparar los algoritmos de tus programas.

PHP (01) Control de flujo (07): do...while

Existe otro tipo de bucle llamado do...while, este bucle es exactament eigual que el bucle while, pero con una excepción, la condición siempre se comprueba al final del ciclo y nunca al principio como en el bucle while, de hecho el código del do...while siempre se ejecuta una vez ya que la comprobación se hace al final y no al principio, su forma es la siguiente.

do{
    instrucciones
}while(expresion)

Como puedes ver es muy parecida al bucle while, solo que este está al final y empieza por do.

$contador = 1;
do{
 echo('esta es la vuelta ' . $contador . ' que me doy por el while <br/>');
 $contador++;
}while ($contador<7)

PHP (01) Control de flujo (06): while

Esta forma de controlar un bucle es extremadamente sencilla, de hecho esta es su forma:

while (expresion){
    instrucciones
}

Como puede verse el bucle se realizará mientras que la expresión sea verdadera tal y como podemos ver en el siguiente ejemplo:

$contador = 1;
while ($contador<7){
 echo('esta es la vuelta ' . $contador . ' que me doy por el while <br/>');
 $contador++;
}

Mientras que $contador sea menor que 7 estará repitiéndose el bucle, de hecho si ponemos una condición que siempre se cumple como $contador>0, entonces el bucle es infinito y no se detiene nunca.

Esta forma de hacer el bucle sirve en realidad para lo mismo que el for (aunque poniendo el incremento dentro de las instrucciones), pero while tiene la particularidad de que no tiene que ser un contador de ciclos, por ejemplo se puede utilizar para mostrar datos, recorrer archivos etc, como por ejemplo:

while (not_at_end_of_file()){
 echo([este echo muestra los datos]);
}

En este ejemplo la condición es que siga recorriendo el archivo mientras no llegue al final y vaya mostrando los datos, dándonos una opción que el bucle for no puede de forma habitual.

Colocación de las redes sociales fijas en el margen con CSS

Hoy he estado pensando en como hacer de forma simple y sencilla, utilizando tan solo CSS y HTML ese efecto que hoy en día esta tan de moda como es poner las redes sociales en el margen de una web y que se queden ahí fijas, con el fin de obtener algo parecido a esto:

Con una pequeña animación cuando pasamos el ratón por encima.
Pues bien, esto es tan solo una idea, ya que seguramente haya múltiples opciones, de hecho se puede mejorar con JQuery y darle algunos toques calidad, pero para empezar y que luego ya vayas poniendo tus propios toques esta bien.

domingo, 17 de agosto de 2014

PHP (01) Control de flujo (05): for

Esta es sin duda una de mis instrucciones favoritas, ya que trata de repetir un trabajo una y otra vez, lo cual puede sacarnos de más de un apuro y de líneas y líneas de código, de hecho es sumamente simple, al menos en su funcionamiento original, siendo así:

for (desde; hasta; operador de la variable){
    instrucciones
}

Podemos observar que hay tres opciones a rellenar en un for:

desde: el valor inicial de la variable que controla el for
hasta: el valor final que indicará hasta donde llegará la variable
operador de la variable: que viene a ser un incremento de cremento de la variable por cada ciclo, aunque puede ser cualquier tipo de operación matemática lo normal es que sea $variable++ o $variable--

Un ejemplo de como funciona un bucle for puede ser el siguiente:

for($contador = 0; $contador < 6; $contador++){
    echo 'me mola el for ' . $contador . ' veces';
}

Este ejemplo nos muestra como el bucle se repetirá 6 veces mostrando desde el 0 al 5 el contador, incrementándose una vez por vuelta.

Es bastante común encontrar que la variable de los for sea variables de nombres simples como $i o $j, ya que se utilizan solo para el for en cuestión.

De hecho una operación fantástica, muy utilizada en arrays, son los for dobles, es decir, anidar un for dentro de otro y obtener resultados como el siguiente:

for($i = 0; $i <= 10; $i++){
 echo '<h2>Tabla del '. $i .'</h2>';
 for($j = 0; $j <= 10; $j++){
  $multiplo= $i * $j;
  echo $i .' * ' . $j . ' = ' . $multiplo . '[br/]';
 }
 echo '[br/]';
}

Como puedes ver con tan solo 8 líneas de código obtenemos más de 100 de resultado, con las tablas de multiplicar.... imagina el tiempo y esfuerzo de hacerlo tu a base de múltiplo por múltiplo.
el primer for nos da el primer numero de la tabla y lo muestra en su echo, el segundo nos da el segundo y muestra el resultado de la operación hasta que cumple su condición, luego sigue el primer bucle que nos da el salto de línea y repite el primer for con un aumento del contador.
¿Magia? no, simplemente algoritmia....

PHP (01) Control de flujo (04): switch

La instrucción switch se utiliza, como ya dije, para suplantar a largas cadenas de ifelseif, ya que puede ser bastante tedioso, haciendo una comparativa mucho más rápida. A mi personalmente me gusta mucho utilizarlo cuando tengo que hacer ciertas comparaciones muy largas...
La forma de trabajo que tiene es la siguiente:

switch (variable){
    case valorDeLaVariable:
        intruciones
        break;
    case valorDeLaVariable:
        intruciones
        break;
    case valorDeLaVariable:
        intruciones
        break;
...
}

Como se puede ver, la variable entra en el switch y comienza a compararse según los diferentes casos (case) hasta que encuentra su valor, entonces ejecuta las instrucciones de ese case y al llegar al break se sale de switch.
Pero puede ser que varios case tengan el mismo código a ejecutar pudiéndose unir como vemos en el siguiente ejemplo de un switch "real" donde a partir de una variable llamada dia buscará el código a ejecutar:

$dia = 'miercoles';

switch ($dia){
    case 'lunes':
 echo 'el peor día, levantese a las 7:00 am';
 break;
    case 'martes':
    case 'miercoles':
    case 'jueves':
 echo 'levantese a las 7:00 am';
 break;
    case 'viernes':
 echo 'Por fin es viernes!!!, levantese a las 7:00 am';
 break;
    case 'sabado':
 echo 'disfrute de un buen dia de diversion, no hay hora de levantarse';
 break;
    case 'domingo':
 echo 'relajese y descanse, hoy puede levantarse cuando quiera';
 break;
}

En este ejemplo podemos observar como funciona el control, el switch compara la variable con los case, y ejecuta el código, cuando llega al martes miércoles y jueves considera que el código para cada todas estas posibilidades del valor de la variable es el mismo ya que no existe la instrucción break. De hecho si por ejemplo en martes hubiera algo de código sin el break, realzaría esas instrucciones además de las que se encuentran en el jueves.

Como se puede ver es una forma muy sencilla de hacer comparaciones y que tiene mucha más velocidad y ocupa menos recursos que las largas cadenas de ifelseif, siendo muy recomendable para su uso

PHP (01) Control de flujo (03): elseif

Esta estructura es un continua comparación de variables, es decir mira la primera comparación si ve que es falsa pasa al else, el cual contiene otra comparación si es correcta entra en esa parte del código y si es falsa pasa al siguiente... según la siguiente forma:

if (expresión 1){
    instrucciones 1
}else if (expresión 2){
    instrucciones 2
}else if (expresión 3){
    instruciones 3
}else if ....

Como se puede ver la expresión se puede ir alargando y alargando y alargando, y se puede terminar con un else o simplemente cerrar la llave del if.

En el siguiente ejemplo podemos ver como se van haciendo estas comparaciones, mirando el día de la semana que es y obteniendo el resultado correspondiente al mismo....

$dia = 'sabado';

if ($dia == 'lunes'){
    echo 'el peor día, levantese a las 7:00 am';
} else if ($dia == 'martes'){
    echo 'levantese a las 7:00 am';
} else if ($dia == 'miercoles'){
    echo 'levantese a las 7:00 am';
} else if ($dia == 'jueves'){
    echo 'levantese a las 7:00 am';
} else if ($dia == 'viernes'){
    echo 'Por fin es viernes!!!, levantese a las 7:00 am';
} else if ($dia == 'sabado'){
    echo 'disfrute de un buen dia de diversion, no hay hora de levantarse';
} else if ($dia == 'domingo'){
    echo 'relajese y descanse, hoy puede levantarse cuando quiera';
}

Este tipo de expresión (elseif) es muy útil, pero en ocasiones se utiliza mal, ya que existe otro comando llamado switch que veremos más adelante y que es mucho más rápido.

martes, 12 de agosto de 2014

PHP (01) Control de flujo (02): else

Continuando con el if de la entrada anterior, este puede ampliarse con la instrucción else, que viene a decir lo siguiente de forma coloquial:

Si no se cumple la condición, no realices este código; haz este...

De esta forma se puede ejecutar un trozo de código u otro dependiendo de si la expresión da como resultado true o false y luego seguir con el programa.

$nombre = 'maria';
$clave = '12345';
echo 'identifiquese';
if ($nombre == 'maria' && $clave == '12345' || $nombre == 'antonio' && $clave == '54321' ){
 echo 'Hola ' . $nombre;
}else {
 echo 'no te conozco';
}
echo 'adios' . $nombre;

En este caso el programa analizará si el nombre y la clave coinciden, si es correcto, nos dirá Hola y luego adiós, saltándose el código en el else. Pero si la expresión nos devuelve false, entonces entraría directamente en el código del else y nos diría, no te conozco, adiós...
Esto que puede resultar complicado, es en realidad muy sencillo, tan solo tienes que probarlo un par de veces e iras cogiendo como funciona.

Recuerda que la forma de trabajar de este control de flujo es:

if expresión{
    instrucciones
}else{
    instrucciones
}

PHP (01) Control de flujo (01): if

Voy a explicar como funciona el control de flujo con if, naturalmente doy por sobreentendido que el lector de esta entrada conoce los fundamentos mínimos de PHP sobre asignación de variables, echo, instalación de un servidor local...

La expresión if es una condición que nos dice:

si ocurre esto haz lo siguiente, de lo contrario, sáltalo.

Por ello su estructura es:

if (expresión){
    código a ejecutar
}

De este modo nuestro código llega a la expresión if y comprueba si se cumple o no (True o False), sí es true ejecuta el código y si no lo cumple salta todo el ámbito del if (el espacio entre las llaves).
La expresión puede tener una condición o varias como iremos viendo, pero un ejemplo simple podría ser el siguiente (ten en cuenta que aun no estamos tomando valores del usuario.)

$edad = 17;
echo 'Es usted mayor de edad?';
if ($edad >= 18){
 echo 'bienvenido';
}

En este ejemplo podemos ver que tomando la variable edad como 17 no cumple la mayoría de edad que es $edad >= 18, por lo que no entra en el if y se salta el código de su interior.
Como bien he dicho antes se pueden hacer varios tipos de separación, por ejemplo en un rango de edad:

$edad = 17;
echo 'que edad tiene?';
if ($edad >= 18 && $edad <= 60){
 echo 'bienvenido';
}

En este ejemplo podemos ver el operador && que significa si se cumple la primera condición y también la segunda entonces es true.
Del mismo modo se pueden utilizar diferentes variables o diferentes comparadores como or || en nuestra instrucción if, por ejemplo:

$nombre = 'maria';
$clave = '12345';
echo 'identifiquese';
if ($nombre == 'maria' && $clave == '12345' || $nombre == 'antonio' && $clave == '54321' ){
 echo 'Hola ' . $nombre;
}

En este caso vemos que hay varias cosas nuevas, la comparación == nos dice que la variables tiene que ser igual a la condición, se debe de usar == y nunca = ya que el igual simple es una asignación y no una comparación, algo que no se puede hacer en la condición de un if.
Podemos observar que deben de coincidir nombre y clave para acceder al if (así se pueden hacer logins) y que esta comparando dos usuarios especificando:

Si eres maria y tu clave es 12345 o eres antonio y tu clave es 54321, entonces entras en el código, de lo contrario salta el if.

Las posibilidades de las condiciones son practicamente infinitas, ya que puedes comprobar casi cualquier cosa, desde funciones, tipos de variables, respuestas... todo muy simple y devolviéndote siempre un true o un false.

Los operadores de comparación que podemos encontrar de forma común son los siguientes:

Dentro de los operadores lógicos podemos tener los siguientes:

lunes, 11 de agosto de 2014

Colocando el botón de google+

Hacer +1 es una forma de mostrar aprecio por cualquier cosa que atraiga tu atención en Google+ o en tus sitios web favoritos. Cuando leas una publicación que te dé ganas de aplaudir, el +1 representa tu aplauso; cuando veas un vídeo que haga que te partas de risa, el +1 es como una carcajada; cuando veas una foto que muestre perfectamente ese momento tan especial, hacer +1 equivale a darle cinco estrellas.

Hacer +1 en Google+

Cuando haces +1 en una publicación de Google+, su autor y las personas con las que se ha compartido lo ven. El creador de la publicación recibirá una notificación que le informará de que has hecho +1 en su publicación. Si la publicación se ha compartido con las personas de tus círculos ampliados que también te tienen en sus círculos, puede estas que vean tus +1 en sus novedades. Para eliminar tu +1, solo tienes que volver a hacer clic en el botón +1.

Hacer +1 fuera de Google+

Cuando haces +1 en algún elemento de un sitio web, dicho +1 se añade al número total de +1 que se muestra. Cuando alguien que te tiene en sus círculos ve el contenido en el que has hecho +1, tu +1 puede aparecer destacado junto al número total de +1. Los +1 son públicos, por lo que una buena regla general es hacer +1 solo en aquellas páginas que no te importe compartir con todo el mundo.
Una vez que hayas hecho +1 en algún elemento de la Web, puedes compartir el contenido con tus círculos de Google+.

La Cuestión es cuando queremos poner este botón en la web que estamos en producción y la realidad es que es muy sencillo, tan solo hace falta introducir el siguiente código en nuestra web:

<!— Añade esta etiqueta en la cabecera o delante de la etiqueta body. —>
<script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script>
<!— Añade esta etiqueta donde quieras colocar el botón +1 —>
<g:plusone></g:plusone>

Lo cual nos da como resultado:

Hay que tener en cuenta que cuando estamos en producción de nuestra web, si lo estamos haciendo en una carpeta local puede dar errores y no aparecer, por lo que es recomendable, aunque no siempre necesario, hacer esta implementación desde nuestro localhost para poder obtener los resultados.

Fuente: support.google.com