sábado, 21 de noviembre de 2015

HTML5 - Estructura del Cuerpo (Capítulo 02)



En el HTML tradicional se acostumbraba a dividir las zonas de una página mediante  etiquetas <div> o <table>. Pero estas dos etiquetas, no nos facilitaban las posiciones de cada parte del cuerpo(ubicación de cada estructura fácilmente).  En la nueva tecnología de HTML% se considero estos punto, la detección de cada estructura y el reconocimiento de los navegadores.

Teniendo como estructura primitiva.



En la actualidad la mayoría de los desarrolladores de web siguen la estructura siguiente:

Donde se observa las partes comunes.
1. Cabecera
2. Barra de Navegación
3. Sección de Información Principal
4. Barra Lateral
5. El pie o la barra Institucional




Terminando el código de esta manera:
<html lang="es">
 <head>
  <meta charset="iso-8859-1">
  <meta name="description" content="Ejemplo de HTML5">
  <meta name="keywords" content="HTML5, CSS3, JavaScript">
  <title>Este texto es el título del documento</title>
  <link rel="stylesheet" href="misestilos.css">
 </head>
 <body>
  <header>
   <h1>Este es el título principal del sitio web</h1>
  </header>
  <nav>
   <ul>
    <li>principal</li>
    <li>fotos</li>
    <li>videos</li>
    <li>contacto</li>
   </ul>
  </nav>
  <section>
  </section>
  <aside>
   <blockquote>Mensaje número uno</blockquote>
   <blockquote>Mensaje número dos</blockquote>
  </aside>
  <footer>
   Derechos Reservados © 2010-2011
  </footer>
 </body>
</html>

HTML5 - Estructura Global (Capitulo 01)






Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y determinada por etiquetas específicas. En esta parte del capítulo vamos a ver cómo construir la estructura global de un documento HTML y los nuevos elementos semánticos incorporados en HTML5.

<!DOCTYPE>

En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es extremadamente sencillo:


<html>

Luego de declarar el tipo de documento, debemos comenzar a construir la estructura HTML. Como siempre, la estructura tipo
árbol de este lenguaje tiene su raíz en el elemento <html>. Este elemento envolverá al resto del código:
< !DOCTYPE html>
<html lang=”es”>
</html>
El atributo lang en la etiqueta de apertura <html> es el único atributo que necesitamos especificar en HTML5. Este atributo define el idioma humano del contenido del documento que estamos creando, en este caso es por español.


<head>

El elemento <head> va primero, por supuesto, y al igual que el resto de los elementos estructurales tiene una etiqueta de apertura y una de cierre:
< !DOCTYPE html>
<html lang=”es”>
 <head>
 </head>
</html>

<body>

La siguiente gran sección que es parte principal de la organización de un documento HTML es el cuerpo. El cuerpo representa la parte visible de todo documento y es especificado entre etiquetas <body>. Estas etiquetas tampoco han cambiado en relación con versiones previas de HTML:</body>
< !DOCTYPE html>
<html lang=”es”>
 <head>

 </head>

 <body>

 </body>

</html>

<meta>

Es momento de construir la cabecera del documento. Algunos cambios e innovaciones fueron incorporados dentro de la cabecera, y uno de ellos es la etiqueta que define el juego de caracteres a utilizar para mostrar el documento. Ésta es una etiqueta <meta> que especifica cómo el texto será presentado en pantalla:
< !DOCTYPE html>
<html lang=”es”>
 <head>
  &ltmeta charset=”iso-8859-1”>
 </head>

 <body>
 </body>
</html>

<title>

La etiqueta <title>, como siempre, simplemente especifica el título del documento, y no hay nada nuevo para comentar:
< !DOCTYPE html>
<html lang=”es”>
 <head>
  &ltmeta charset=”iso-8859-1”>
  <title>Tutorial 01</title>
 </head>

 <body>
 </body>
</html>

<link>

Otro importante elemento que va dentro de la cabecera del documento es <link>. Este elemento es usado para incorporar estilos, códigos Javascript, imágenes o iconos desde archivos externos. Uno de los usos más comunes para <link> es la incorporación de archivos con estilos CSS:
< !DOCTYPE html>
<html lang="es”>
 <head>
  <meta charset="iso-8859-1”>
  <title>Tutorial 01</title>
  <link rel=”stylesheet” href="misestilos.css”>

 </head>

 <body>
 </body>
</html>

viernes, 20 de noviembre de 2015

WinZip Gratis para MAC

Hola Chicos

En esta ocasión les voy a enseñar a como instalar WinZip gratis.
Para ello vamos a tener que primero instalar el WinZip y luego tendremos que generar el código para poder activar el producto.

Aquí les dejo los link para que descarguen los Programas

WinZip: http://www.mediafire.com/download/v12g2dlz8y4te4f/Winzip.dmg


Generador de Código Para activar: http://www.mediafire.com/download/zh4mvd4flyb47v2/GeneradordecodigodelWinZip.dmg

Después de descargar los dos archivos vamos a instalar el WinZip normalmente.

Una vez instalado el archivo vamos a abrir el generador de código y copiaremos el Usuario y la contraseña. Para terminar , pondremos el usuario y contraseña que  indique el generador y LISTO.

Espero que les ayude este tutoría.

Nos vemos para la próxima.

Reporte PHP y MySQL con la libreria PHPExcel




En la actualidad existen muchas posibilidades de poder realizar un reporte en distintos formatos(Excel, PDF, Word). Hoy tocaremos los reportes en Excel.

Asimismo, se han presentado en el mundo de desarrollo distintas maneras de crear los reportes. Una de esas es la siguiente:
&lt?php  
define(db_host, "xxxxx");  
define(db_user, "xxxxxx");  
define(db_pass, "xxxxxx");  
define(db_link, mysql_connect(db_host,db_user,db_pass));  
define(db_name, "registro");  
mysql_select_db(db_name);  

$qry =mysql_query("SELECT * from descargas");  

$campos = mysql_num_fields($qry);    
$i=0;   

ob_start();  
echo "&ltcenter&gt&lttable border="1" align="center"&gt";  
echo "&lttr bgcolor="#336666"&gt  
  &lttd&gt&ltfont color="#ffffff"&gt&ltstrong&gtID&lt/strong&gt&lt/font&gt&lt/td&gt  
  &lttd&gt&ltfont color="#ffffff"&gt&ltstrong&gtNOMBRE&lt/strong&gt&lt/font&gt&lt/td&gt  
  &ltTD&gt&ltfont color="#ffffff"&gt&ltstrong&gtDESCRIPCION&lt/strong&gt&lt/font&gt&lt/TD&gt  
  &lttd&gt&ltfont color="#ffffff"&gt&ltstrong&gtRUTA&lt/strong&gt&lt/font&gt&lt/td&gt  
  &lttd&gt&ltfont color="#ffffff"&gt&ltstrong&gtTIPO&lt/strong&gt&lt/font&gt&lt/td&gt  
  &lttd&gt&ltfont color="#ffffff"&gt&ltstrong&gtTAMAÑO&lt/strong&gt&lt/font&gt&lt/td&gt 
  &lttd&gt&ltfont color="#ffffff"&gt&ltstrong&gtCATEGORIA&lt/strong&gt&lt/font&gt&lt/td&gt 
&lt/tr&gt";  
while($row=mysql_fetch_array($qry))  
{    
    echo "&lttr&gt";    
     for($j=0; $j&lt$campos; $j++) {    
         echo "&lttd&gt".$row[$j]."&lt/td&gt";    
     }    
     echo "&lt/tr&gt";          
}    
echo "&lt/table&gt";  



$qry2 =mysql_query("SELECT * from noticias");  

$campos2 = mysql_num_fields($qry2);    
$i2=0;    
 
//ob_start();  
echo "&lt center &gt &lt table border='1' align='center' &gt";  
echo "&lt tr bgcolor='#33666' &gt  
  &lt td &gt &lt font color='#ffffff' &gt &lt strong &gt ID &lt /strong &gt &lt /font &gt &lt /td &gt  
  &lt td &gt &lt font color='#ffffff' &gt &lt strong &gt TITULAR &lt/strong &gt &lt /font &gt &lt/td &gt  
  &lt td &gt &lt font color='#ffffff' &gt &lt strong &gt RESUMEN &lt/strong &gt &lt /font &gt &lt/td &gt  
  &lt td &gt &lt font color='#ffffff' &gt &lt strong &gt NOTICIA &lt/strong &gt &lt /font &gt &lt /td &gt  
  &lt td &gt &lt font color='#ffffff' &gt &lt strong &gt IMAGEN &lt/strong &gt &lt /font &gt &lt/td &gt  
  &lt td &gt &lt font color='#ffffff' &gt &lt strong &gt FECHA &lt/strong &gt &lt /font &gt &lt /td &gt 
&lt /tr &gt"; 
while($row2=mysql_fetch_array($qry2))  
{    
    echo "&lttr&gt";    
     for($j2=0; $j2&lt$campos; $j2++) {    
         echo "&lttd&gt".$row2[$j2]."&lt/td&gt";    
     }    
     echo "&lt/tr&gt";          
}    
echo "&lt/table&gt";  

$reporte = ob_get_clean(); 

header("Content-type: application/vnd.ms-excel");  
header("Content-Disposition: attachment; filename=consulta.xls");  
header("Pragma: no-cache");  
header("Expires: 0");   

echo $reporte; 

?&gt


En efecto, esto se puede usar pero en mi caso prefiero usar la libreria PHPExcel(la cual se descarga free desde su pagina oficial).

Esta libreria nos facilita el manejo de los archivos Excel:
  1. ◘ Setear meta data (autor, título, descripción, ...).
  2. ◘ Crear una hoja de cálculo de la representación en memoria.
  3. ◘ Añadir pestañas a la hoja de calculo.
  4. ◘ Agregar valores y formulas a las celdas (individual o grupal).
  5. ◘ Combinar celdas, protegerlas.
  6. ◘ Darle diseño, tamaño y tipo de letra, 
  7. ◘ Validación, seguridad de las hojas de calculo, libros.
  8. ◘ Entre otras más(disponibles en la pagina oficial.
DESCARGA DIRECTA


Ahora utilizaremos la libreria:

Crearemos una Base de datos para las pruebas:
CREATE DATABASE prueba;
Ahora implementaremos una tabla:
CREATE TABLE IF NOT EXISTS Cliente (
  idCliente INT NOT NULL AUTO_INCREMENT,
  Nom_Cliente VARCHAR(25) NOT NULL,
  Dni_Cliente VARCHAR(45) NOT NULL,
  Apellido_Paterno VARCHAR(45) NOT NULL,
  Apellido_materno VARCHAR(45) NOT NULL,
  Fecha_Nacimiento DATE NOT NULL,
  Sexo CHAR(1) NOT NULL,
  Direccion VARCHAR(90) NOT NULL,
  Telf VARCHAR(10) NOT NULL,
  email VARCHAR(45) NOT NULL,
  PRIMARY KEY (idCliente))
A continuación el archivo html(index.html):
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Reporte con PHPExcel</title>
   </head>
   <body>
      <div>
        <header>
           <h1>REPORTE con PHPexcel</h1>
        </header>
        <div>
           <a href="reporte.php">Descargar el reporte</a>
        </div>
      </div>
   </body>
</html>
Lo emocionante comienza ahora ...

Implementaremos un archivo reporte.php

Primero al comenzar el código. Verificamos si la conexión existe en caso contrario el proceso terminaría.
<?php
$conexion = new mysqli('localhost','usuario','contraseña','prueba',3306);
if (mysqli_connect_errno()) {
   printf("La conexión falló: %s\n", mysqli_connect_error());
   exit();
}
Si todo va bien. El siguiente paso es realizar la consulta necesaria para poder obtener los datos:
$sql = "SELECT * FROM cliente";

//enviamos la consulta a la db

$resultado = mysql_query ($sql, $conexion) or die (mysql_error ());

//resivimos la respuesta de la db
$registros = mysql_num_rows ($resultado);
Una vez obtenido los datos llamaremos a la librería PHPExcel y crearemos un objeto de la misma.
//importamos
require_once 'PHPExcel/PHPExcel.php';

//crearemos un objeto de la libreria
$objPHPExcel = new PHPExcel();
Ahora colocaremos algunas propiedades del archivo Excel y nombraremos a cada columna y el título

  • ◘  Primero seleccionamos la hoja con "setActiveSheetIndex(Indice de la hoja)".
  • ◘  Luego el contenido de la celda "setCellValue(coordenada_celda, value)".

// Colocaremos propiedades del archivo
$objPHPExcel->getProperties()
->setCreator("Dexter")
->setLastModifiedBy("Dexter")
->setTitle("Reporte de Clientes")
->setSubject("Reporte de Clientes")
->setDescription("Reporte de Clientes")
->setKeywords("Excel Office 2007 openxml php")
->setCategory("Reporte de Clientes");

//Señalaremos que nombre llevara cada columna
$objPHPExcel->setActiveSheetIndex(0)
->setCellValue('A1', 'REPORTE DE CLIENTES') //Titulo del reporte
->setCellValue('A3', 'ID') 
->setCellValue('B3', 'NOMBRE')
->setCellValue('C3', 'APELLIDO PATERNO')
->setCellValue('D3', 'APELLIDO MATERNO')
->setCellValue('E3', 'FECHA NACIMIENTO')
->setCellValue('F3', 'SEXO')
->setCellValue('G3', 'DIRECCION')
->setCellValue('H3', 'EMAIL')
->setCellValue('I3', 'TELEFONO')
->setCellValue('J3', 'DNI');
Ahora con un While obtendremos los datos almacenados anteriormente en la variable $registros
$i = 4;   // inicializamos el contador para empezar en la fila 4 
   while ($registro = mysql_fetch_object ($resultado)) {
     $objPHPExcel->setActiveSheetIndex(0)
 ->setCellValue('A'.$i, $registro->idCliente)
  ->setCellValue('B'.$i, $registro->Nom_Cliente)
  ->setCellValue('C'.$i, $registro->Apellido_Paterno)
  ->setCellValue('D'.$i, $registro->Apellido_Materno)
  ->setCellValue('E'.$i, $registro->Fecha_Nacimiento)
  ->setCellValue('F'.$i, $registro->Sexo)
  ->setCellValue('G'.$i, $registro->Direccion)
  ->setCellValue('H'.$i, $registro->Email)
  ->setCellValue('I'.$i, $registro->Telefono)
  ->setCellValue('J'.$i, $registro->Dni_Cliente);
      $i++;
   }
Hay dos maneras de poder dar el tamaño a las columnas.

  1. Automatica:
  2. for($i = 'A'; $i <= 'J'; $i++){
        $objPHPExcel->setActiveSheetIndex(0)->getColumnDimension($i)->setAutoSize(TRUE);
    }
    
  3. Manual:
  4. $objPHPExcel->getActiveSheet()->getColumnDimension('A')->setWidth(10);
    $objPHPExcel->getActiveSheet()->getColumnDimension('B')->setWidth(20);
    $objPHPExcel->getActiveSheet()->getColumnDimension('C')->setWidth(26);
    $objPHPExcel->getActiveSheet()->getColumnDimension('D')->setWidth(29);
    $objPHPExcel->getActiveSheet()->getColumnDimension('E')->setWidth(30);
    $objPHPExcel->getActiveSheet()->getColumnDimension('F')->setWidth(12);
    $objPHPExcel->getActiveSheet()->getColumnDimension('G')->setWidth(26);
    $objPHPExcel->getActiveSheet()->getColumnDimension('H')->setWidth(26);
    $objPHPExcel->getActiveSheet()->getColumnDimension('I')->setWidth(20);
    $objPHPExcel->getActiveSheet()->getColumnDimension('J')->setWidth(15);  
    
Por ultimo daremos unas configuraciones para culminar y colocaremos el código para que se descargue.
//Nombre a la hoja
$objPHPExcel->getActiveSheet()->setTitle('Alumnos');
 
//Se selecciona la hoja de indice 0 para mostrar
$objPHPExcel->setActiveSheetIndex(0);
 
// Inmovilizar paneles
$objPHPExcel->getActiveSheet(0)->freezePaneByColumnAndRow(0,4); 

// Se manda el archivo al navegador web
header('Content-Type: application/vnd.ms-excel');
header('Content-Disposition: attachment;filename="ejemplo1.xlsx"');
header('Cache-Control: max-age=0');
 
$objWriter=PHPExcel_IOFactory::createWriter($objPHPExcel,'Excel2007');
$objWriter->save('php://output');
exit;
mysql_close ();
?>