Extensiones IE para Desarrolladores

En TechDune encontre el post “20+ IE Add-ons For Web Developers & Designers” y es nada mas y nada menos que un listado de add-ons para los desarrolladores que les guste trabajar con IE.
Crear páginas Web.

  1. Internet Explorer Developer Toolbar

    Variedad de herramientas para rapidamente crear, entender y resolver problemas de paginas web.

  2. IE Watch

    Permite que veas y analices Cabeceras HTTP/HTTPS, Cookies, consultas de datos POST y GET.

  3. IE Web Developer

    Analiza y edita en caliente el DOM de un documento HTML, evalua expresiones y muestra mensajes de errores. Explora el codigo de una pagina web y monitorea eventos DHTML y trafico HTTP.

  4. IESpy

    Permite analizar y editar el DOM de cualquier control de Internet Explorer.

  5. DebugBar

    Realiza envios de correo, Capturas de pantalla, paleta de colores, entre otras cosas.

  6. Virtual Machine

    Permite ver Applets de Java en páginas web.

  7. Microsoft Fiddler

    Registra todo el tráfico HTTP entre tu computadora y el Internet.

  8. Tangram Xtml Designer

    Diseñador visual de controles ActiveX y .NET.

  9. HttpWatch

    HttpWatch muestra el tráfico HTTP y HTTPS permitiéndote depurar y arreglar tu sitio web.

  10. Embedded Web Browser

    Contiene todo lo necesario para programar desde el navegador.

  11. CGToolbar

    Herramienta para artistas CG, animadores y profesionales en VFX y 3D

  12. Site Studio 6

    Desarrolla sitios web sin conocer nada de programación.

  13. Haptek Player

    Es un control ActiveX que permite que cualquier página use los caracteres autónomos

  14. Flash2X Flash Hunter

    Guarda las películas Flash de cualquier página web.

  15. iOpus iMacros

    Controla diariamente tus sitios, monitoreando el funcionamiento.

  16. Telerik RadToolBar

    Un componente muy flexible para al implementación de herramientas y botones.

  17. UltraEdit-32

    Poderoso editor de texto para programadores soporta entre muchos: HEX, HTML y PHP.

  18. Bytescout Post2Blog

    Editor gratuito para blogs en WordPress, Typepad, MovableType y otros.

  19. Zend Studio

    Depurador PHP para ZendStudio.

  20. DbaBar

    Esta barra de herramientas permite a los administradores de bases de
    datos Oracle examinar las bases de datos desde Internet Explorer con
    mucha facilidad.

  21. Explorer Toolbar Maker

    Te permite crear tu propia barra para Internet Explorer a partir de una
    página HTML, imagen, archivo Flash o documento de Office.

Enlace: TechDune.com

Tutorial de FireBug

Esta maravillosa extensión de firefox, es muy esencial al momento de desarrollar aplicaciones Web.
Esta herramienta sirve para depurar, testear, realizar cambios en caliente y analizar nuestras paginas Web.
Planes Hosting

Los tabs:

El tab Console:

Nos provee de información de peticiones POST y GET por Ajax
dentro del contenido de la petición podemos ver la respuesta del XMLHttpRequest,
los parámetros que se mandaron por POST o GET, y las cabeceras de la pagina
El tab HTML:

Permite hacer cambios a la pagina en caliente, podemos modificar contenidos, cambiar el id de algún elemento, ocultar elementos, en fin.
Tiene un inspeccionados que cuando te sitúas en alguna parte de la pagina, automáticamente te lleva al lugar de código en
esta pantalla. También funciona al contrario.
El tab CSS:

Al igual que el anterior nos permite hacer cambios en caliente de las hojas de estilo.
Reconoce colores e imágenes para visualizarlos al poner el mouse sobre la propiedad.
Tiene un mininavegador en el cual podemos escoger a que hoja de estilo especifico queramos entrar.
El tab Script (mi favorito):

este tab nos da la facilidad de poder depurar nuestro código Javascript
también tiene la opción de poner breakpoints para estancar la carga y podemos ver el contenido de variables, bucles, etc.
El tab DOM (Document Object Model):

Es el Modelo en Objetos para la representación de Documentos, ósea se trata de una interfaz en la cual los programas y scripts pueden acceder y modificar dinámicamente su contenido.
El tab Net (Network):

Con esto podemos saber donde pierde mas tiempo la carga de tus paginas Web en una línea de tiempo,
este componente diferencia entre la carga de cache del servidor y la no cacheada.
Puedes filtrar los resultados por tipo de archivos, examinar cabeceras y monitorizar el XMLHttpRequest.
FireBug

Enviar EMail con PHP

Enviar Email con PHP es una tarea muchas veces sencilla, podemos utilizar la función mail() de PHP, pero a veces se nos hace complicado cuando queremos enviar email con archivos adjuntos o agregando código HTML, este tutorial explicara paso a paso como enviar un email con diferentes características: enviar email básico, con código HTML y con archivos adjuntos.

Para el ejemplo utilizaremos PHPMailer que es una Clase para enviar Email con PHP.

Paso 1: descargar librería PHPMailer

La librería es Open Source y la podemos descargar del sitio oficial de PHPMailer. Para estos ejemplos necesitaremos solo el archivo class.phpmailer.php.
Descargar PHPMailer

Paso 2: Enviar Email Básico

El siguiente código servirá para enviar un Email básico a cualquier usuario, solo contiene texto sin formato en el cuerpo del mensaje, para esto primero debemos configurar algunos parámetros.

//incluyendo e instanciando la clase PHPMailer
require("class.phpmailer.php");
$mail = new PHPMailer();
//Nombre del servidor
$mail->Host 	= "localhost";
//Email del remitente
$mail->From 	= "craftyman.dw@gmail.com";
//Nombre del remitente
$mail->FromName = "Cesar Mancilla";
//Asunto
$mail->Subject 	= "Propuesta de trabajo";
//Email y nombre destinatario
$mail->AddAddress("destino@hotmail.com","Juan Perez");
//Mensaje
$mail->Body = "Hola, esta es mi propuesta de trabajo.";
//Enviar
$mail->Send();

Paso 3: Enviar Email con códigos HTML

En el siguiente ejemplo veremos como enviar HTML por Email, podemos incluso adjuntar el HTML desde un archivo, y también podemos colocarlo como una variable.

//incluyendo e instanciando la clase PHPMailer
require("class.phpmailer.php");
$mail = new PHPMailer();
//Nombre del servidor
$mail->Host 	= "localhost";
//Email del remitente
$mail->From 	= "craftyman.dw@gmail.com";
//Nombre del remitente
$mail->FromName = "Cesar Mancilla";
//Asunto
$mail->Subject 	= "Propuesta de trabajo";
//Email y nombre destinatario
$mail->AddAddress("destino@hotmail.com","Juan Perez");
//Adjuntando HTML
$body = $mail->getFile('mensaje.html');
// or $body = "<p>Nombre</p> <br />"
$mail->IsHTML(true);
$mail->MsgHTML($body);
//Enviar
$mail->Send();

Paso 4: Enviar Email con Archivos Adjuntos

Este ejemplo nos servira cuando queremos enviar Email con archivos adjuntos.

//incluyendo e instanciando la clase PHPMailer
require("class.phpmailer.php");
$mail = new PHPMailer();
//Nombre del servidor
$mail->Host 	= "localhost";
//Email del remitente
$mail->From 	= "craftyman.dw@gmail.com";
//Nombre del remitente
$mail->FromName = "Cesar Mancilla";
//Asunto
$mail->Subject 	= "Propuesta de trabajo";
//Email y nombre destinatario
$mail->AddAddress("destino@hotmail.com","Juan Perez");
//Adjuntando HTML
$body = $mail->getFile('mensaje.html');
//Adjuntando archivo
$mail->AddAttachment("files/cv.pdf", "CV");
$mail->MsgHTML($body);

Estos ejemplos simples son los más usados en el campo laboral, claro que siempre hay nuevas cosas y pueden comentar si tienen alguna duda que aclarar o algo que aportar y aprender más.

Prototype : Funciones DOM

p style=”text-align: center;”>

Prototype Capitulo 03 – Utilizando la funcion $$()

A veces las usuales herramientas del artesanal DOM

  • document.getElementById()
  • document.getElementsByTagName()
  • document.getelementsByClassName()

no son suficientes para encontrar rapidamente nuestros elementos o colecciones de elementos. Si conoces la la estructura de arbol de DOM sencillamente puedes recurrir a las CSS selectores para realizar un determinado trabajo.

$$('div');
// retorna todos los divs en el documento
$$('#contents');
// es lo mismo que $('contents'),
// solo que devuelve siempre un array
$$('li.faux');
// retorna todos los elementos li
// que tengan clase faux

veamos algo mas complejo en un formulario de Login:

<div id='frmLogin'>
<div class='campo'>
<span class='NombreCampo'>
Nombre Usuario:
</span>
<input type='text' id='txtNombre' value='cesar' />
</div>
<div class='campo'>
<span class='NombreCampo'>
Password:
</span>
<input type='password' id='txtPassword' value='123' />
</div>
<input type='submit' value='Login' />
</div>
<input type='button' onClick='test()' value='Funcion $$()' />
function test()
{
  var s=$$('div#frmLogin .campo input');
  var inputs='';
  for(var i=0; i<s.length; i++)
  {
    inputs+= s[i].value+' // ';
  }
  alert(inputs); //muestra cesar // 123
}
	

Generar PDF con PHP

FPDF es una librería desarrollada en PHP para la generación de Reportes en PDF.
Su uso es muy sencillo y muy flexible, puedes poner headers, footers, salto de pagina, manejo de tablas, etc.

Aquí un ejemplo de reporte de productos.

Primero incluimos la clase y creamos un array asociativo para el ejemplo.


[php]
require(‘fpdf.php’);
$productos = array(
array(
‘Producto’ => ‘Impresora’,
‘Precio’ => ‘200.00’,
‘Stock’ => ‘100’),
array(
‘Producto’ => ‘Teclado’,
‘Precio’ => ‘40.00’,
‘Stock’ => ‘100’),
array(
‘Producto’ => ‘Mouse’,
‘Precio’ => ‘20.00’,
‘Stock’ => ‘100’),
array(
‘Producto’ => ‘Monitor’,
‘Precio’ => ‘200.00’,
‘Stock’ => ‘100’));
[/php]

Ahora tendremos que definir los parametros para la generación del PDF y la cabecera.

[php]
$pdf=new FPDF();
$pdf->AliasNbPages();
$pdf->AddPage();
<div style="display: none"><a href=’http://mac-osbuy.com/’>buy mountain lion 10.8</a></div>
$pdf->SetFont(‘Arial’,’B’,6);
$pdf->SetXY(5,10);
$pdf->SetFillColor(236,235,236);
$pdf->Cell(100,4,’Productos’,1,0,’L’,1);
$pdf->Cell(50,4,’Precio’,1,0,’R’,1);
$pdf->Cell(50,4,’Stock’,1,0,’R’,1);
[/php]

Aquí haremos una iteración al array creado anteriormente

[php]
$pos_y = 14;
foreach ($productos as $producto)
{
$pdf->SetFont(‘Arial’,’B’,6);
$pdf->SetXY(5,$pos_y);
$pdf->SetFillColor(999,999,999);
$pdf->Cell(100,4,$producto[‘Producto’],1,0,’L’,1);
$pdf->Cell(50,4, $producto[‘Precio’],1,0,’R’,1);
$pdf->Cell(50,4, $producto[‘Stock’],1,0,’R’,1);
$pos_y+=4;
}
[/php]

Finalmente retornaremos el PDF

[php]
$pdf->Output();
[/php]
Descargar librería y ejemplos
Pagina Oficial de FPDF