Archive for programación

HTML5: SEO y Web Semántica

Fuente: compilando.es


El pasado miércoles 22 de Junio 2011 tuve el placer de asistir a un taller introductorio de HTML5 y CSS3 impartido por Miguel Jiménez en el Aula Vulcan de los amigos de DotNetMania en Madrid.

 

Este pequeño curso tenía el objetivo de mostrar las novedades de HTML5 y CSS3 desde un punto de vista práctico haciendo hincapie en las características y ventajas frente al ya obsoleto modelo de web actual.

 


HTML5

 

En futuros post iré expicando por encima las principales características de este nuevo lenguaje así que hoy empezamos por uno de los aspectos que me parecieron más importantes: Facilidad para crear una buena Web Semántica.

Una Web Semántica no es más que una página web cuyo código html es facilmente legible y entendible por robots, buscadores y lectores de web.

Actualmente no se presta mucha atención a este aspecto a menos que tu web tenga que pasar los controles de accesibilidad para ciegos o tenga una alta importancia a nivel de indexación en buscadores. Y es que actualmente la estructura de nuestro código html es caótica, sin relación entre cada elemento y, lo que es peor, desestandarizada ya que cada uno pone lo que quiere.

¿Cómo puede un buscador saber, por ejemplo, qué parte de tu código html es el menú principal o la cabecera? La respuesta es simple: No puede.

Os pongo un ejemplo de una página típica con una cabecera, un menú superior de navegación, un cuerpo, lateral y pie de página. Si somos un poco ordenados podríamos tener una estructura como esta:

HTML:
  1. <div class="main">
  2.  <div class="cabecera"></div>
  3.  <div class="menu"></div>
  4.    <div class="cuerpo">
  5.        <div class="seccion"></div>
  6.    </div>
  7.  <div class="lateral"></div>
  8.  <div class="pie"></div>
  9. </div>

Cómo veis tenemos una serie de div para crear nuestros controles y cada uno con su clase css asignada dónde indicamos el tamaño, la posicón, etc...

Este código a simple vista parece ordenado y se sabe cada div a qué parte de la web corresponde, ¿no? Bueno, a tus ojos si que puede parecerlo pero para un buscador o para un lector de web para ciegos un div con una clase "menu" es lo mismo que "cabecera" o "estilo1", ¿cómo se supone que debe saber Google dónde está nuestro menú principal así?

Esto es lo que HTML5 resuelve con el uso de etiquetas semánticas para identificar cada uno de estos elementos de forma única e inequívoca: header, nav, article, section, aside y footer (entre otros).

Estos nuevos elementos se muestran en tu navegador como un div con la salvedad de que, al tener un nombre único, los lectores automáticos son capaces de entender que contiene y para que sirven cosa que hasta ahora era imposible.

  • <header> es la etiqueta utilizada para albergar los elementos que forman la cabecera de nuestra web. Tomando como ejemplo esta misma web sería el título "Compilando.ES", subtítulo y fondo azul de la parte superior.
  • <nav> representa el contenedor de nuestro menú de navegación. Es de vital importancia resaltar este contenedor para que Google pueda generar los enlaces automáticos que aparecen debajo de tu web al buscarla. Por ejemplo:


Domitienda

  • <article> representa un elemento independiente y con sentido propio dentro de la web. El ejemplo es claro, cada post de este blog debería estar embebido en una etiqueta <article>.
  • <section> define una sección dentro del contenedor en el que se anida. Por ejemplo, una <section> en un post de este blog sería el listado de tags al pie.
  • <aside> representa la información que no está directamente relacionada con el resto de la web como la barra lateral con el blogroll o una banner de publicidad.
  • <footer> es el contenedor que alberga los elementos del pie de la página.

 

En nuestro ejemplo usando estas nuevas etiquetas semánticas de HTML5 la cosa quedaría así:

HTML:
  1.   <header></header>
  2.   <nav></nav>
  3.   <article>
  4.     <section></section>
  5.   </article>
  6.   <aside></aside>
  7.   <footer></footer>
  8. </body>

Como veis el código queda más simple y entendible, no solo por ojos humanos si no por los buscadores que ahora ya sabrán dónde buscar los links o que parte de la web corresponde al texto o cabecera.

Además, al tener cada etiqueta un identificador único el estilo CSS se simplifica ya que basta con sobreescribir el estilo del "header" para dar formato a la cabecera sin tener que asignarle una clase con un nombre inventado por nosotros.

 

Espero que el ejemplo haya quedado claro y veais que es muy sencillo cambiar la vieja y desestructurada metodología de divs por esta nueva estructura semántica de HTML5.

 

¡¡Nos vemos Compilando!!

Comentarios

Hola Mundo en Perl bajo Plesk Windows

El tutorial de hoy explica cómo realizar un script de prueba en Perl utilizando un hosting compartido bajo plataforma Plesk en Windows como los que ofrecemos en domitienda.com

Perl es un lenguaje de programación muy útil para el procesado de texto y es ampliamente utilizado en los desarrollos web junto con PHP.

Para activar el soporte para Perl en el Panel de control Plesk basta con que naveguemos hasta la configuración del dominio en :

Inicio > [Tu dominio] > Configurar

Y activar el soporte Perl:

Una vez configurado el hosting basta con que creemos un fichero de prueba (por ejemplo "hola.perl" con el siguiente código:

PERL:
  1. $ip = "$ENV{REMOTE_ADDR}";
  2. print &lt;HTTP/1.0 200 OK
  3. Content-Type: text/html</p>
  4.  
  5. Hello World!
  6. <h4>Hello World!</h4>
  7. Eres la IP: $ip
  8.  
  9. ENDOFTEXT
  10. exit(0);

Lo subimos por ftp y listo! Ya tenemos nuestro primer script en Perl alojado en un hosting Windows con Plesk!

OJO: La sintaxis cambia en base al operativo. Es importante remarcar que este código funciona solo bajo Windows

Saludos!

Fuente: http://support.microsoft.com/kb/245225

Comentarios

Envío de correo en ASP clásico con JMAIL

Componente para enviar e-mails directamente desde una página web ASP a través del servidor. Muy fácil de utilizar. Similar a CDONTS pero con más prestaciones. Permite enviar e-mails formateados en HTML desde sus páginas ASP.
Funcionamiento en general
Definimoslas variables necesarias
<%

Dim ObjMail

Creamos una instancia del objeto de ' JMail ' en el servidor.
Set objMail = Server.CreateOBject("JMail.Message")

Una vez que el objeto de JMail se haya creado en el servidor podemos utilizar varias características y métodos del objeto de JMail para construir el email.

Vamos utilizar la propiedad from para dejar saber de quién es el email. Si usted no especifica esta propiedad o no tiene un formato correcto el email fallará.
objJMai.From = " E-mail@Domain.com "
La propiedad SenderName no es necesaria y se puede prescindir de ella. Esta propiedad se puede utilizar para especificar el nombre del remitente.
objJMail.FromName = " nombre "
Para poder enviar a través de nuestro servidor necesita autenticarse, está medida de seguridad esta implementada actualmente en la mayoria de servidores. La cuenta que envía es la que debe autenticar.
objJMai.mailServerUserName="E-mail@Domain.com"

objJMai.MailServerPassWord="contraseña"

En la propiedad AddRecipient se debe especificar la dirección de la persona que desea que reciba el email. Ésta necesita ser una dirección de e-mail correctamente ajustada al formato, ( observa la carencia del = muestra )
objJMail.AddRecipient " Email@Domain.com "
La propiedad siguiente AddRecipientCC sirve para enviar copias a otras direcciones e-mail, puede enviar el e-mail a tantas direcciones como desee, introduciendo la característa tantas veces como a direcciones desee enviarla. Si la dirección no tiene un formato correcto el email fallará.
Esta característica se puede omitir si no desea enviar copias.
objJMail.AddRecipientCC= "otra@Domain.com"
Si desea enviar copias ocultas deberá utilizar la propiedad AddRecipientBCC
objJMail.AddRecipientBCC = "otra@Domain.com"
En la propiedad Subject se debe especificar el asunto del E-mail
objJMail.Subject= "E mail desde la Web"
El componente de JMail se puede utilizar para enviar el correo en texto llano o formato del HTML. Para enviar un email en formato de texto llano utilizaremos la propiedad Body. Si deseán enviar un email en formato del HTML puede utilizar la propiedad HTMLBody o añadir una línea especificando la propiedad ContentType ="text/html" .

'Contenido del email en texto llano

objJMail.Body = " hola. " & el vbCrLf & " esto es mi email en formato de texto llano"

'Contenido del email en Html existen dos posibilidades de especificarlo


'1)

objJMail.HTMLBody = "<body bgcolor='#C6D9EC' text='#000000'> "

'2)

msg.ContentType ="text/html"
msg.Body = "<body bgcolor='#C6D9EC' text='#000000'> "

'Para añadir más líneas utilizaremos la propiedad appendText, tanto sea texto llano como HTML
' vbCrLf , equivale a un retorno de carro (Intro)

objJMail.appendText "Enviado el " + CStr(now())+" por :" & vbCrLf
msg.appendText " <p> <font face='Verdana,Arial, Helvetica, sans-serif' size='1'> el texto </font></p>"

La propiedad Priority dice el sistema la prioridad de este mensaje. Para esta propiedad se pueden especificar 3 valores.

5 - Prioridad Baja
3 - Prioridad normal
1- Prioridad Alta

Si no se establece el valor por defecto es 3.

objJMail.Priority = 3
Necesitamos especificar la dirección del servidor del smtp que usted está utilizando para enviar el correo.
Al estar en nuestro servidor deberían poner mail.nombre_desudominio.P.e: Si su dominio fuese elmio.com pondría mail.elmio.com

objJMail.Send (" mail.su_dominio ")
Finalmente una vez que se haya enviado el email debemos cerrar todas las variables creadas.
Set objJMail = nothing %>
más información en www.dimac.net

EJEMPLOS

OJO: Tenga en cuenta que en estos ejemplos no está implementada la autenticación.

Ejemplo 1
Un ejemplo sencillo utilizando Jmail. enviando los datos de un formulario.
Descargar Ejemplo 1
Ejemplo 2
Un ejemplo sencillo utilizando Jmail. enviando los datos de un formulario y adjuntando un archivo del servidor
Descargar Ejemplo 2
Ejemplo 3
Un ejemplo sencillo utilizando Jmail. enviando los datos de un formulario en HTML.
Descargar Ejemplo 3

Comments (2)

Datasets ¿Sí o no?

Los Datasets forman parte de ADO.NET. Una librería de acceso a datos que se usa en el framework. Desde la versión 2.0 del framework tomaron si cabe más protagonismo debido al nuevo enfoque. Se completaron con los TableAdapters, clases concebidas para trabajar en conjunto y que exponen una serie de consultas de casi cualquier tipo que pueden ser diseñadas de manera muy cómoda a través del Visual Studio.

Los puntos a favor son muchísimos, seguro que muchos fuera de mi conocimiento por falta de uso. Nos limitamos a utilizarlos a través de un Access o SQL Server pero van más allá. Queda ya para la historia su capacidad de integrar mediante un mismo modelo de programación el acceso a tantos orígenes de datos distintos, además de permitirnos trabajar en nuestra aplicación directamente y de manera desconectada con variables debidamente tipadas. Esencial también y punto estrella para mí, el haber ofrecido de manera transparente y casi desconocida para muchos programadores la parametrización de las consultas SQL evitando de esta manera infinidad de errores de Inyección SQL y comodidad extrema a la hora de pasar parámetros a la query (¿acaso alguien recuerda ya pasar una fecha al formato SQL correcto?).

Hago incapié en la seguridad y en la inyección SQL por la peligrosidad de este tipo de fallos de los que tan solo el programador se puede proteger (no hay política directa de seguridad que tu compañía de hosting te pueda ofrecer). Especialmente peligroso en motores potentes como SQL Server, Oracle, etc. que son capaces de ejecutar varios comandos en una misma sentencia simplemente separando por punto y coma. Un atacante hábil en una consulta mal parametrizada puede manipular la SQL completándola y añadiendo detrás la query más dañina que se le ocurra. No os costará nada encontrar muchísima literatura sobre el tema y algunos casos famosos.

Por desgracia, todas estas ventajas no son gratis o baratas desde el punto de vista de la eficiencia. Los Datasets son objetos complejos que no solo representan tablas si no que además representan relaciones entre tablas. Esto que no deja de ser ideal en muchos escenarios supone que al realizar operaciones sobre el DataSet es necesario comprobar que las restricciones de integridad referencial se cumplen, con el coste computacional asociado.

He visto en muchos proyectos además, la manía de arrastrar tantas tablas como se pueda. En muchas ocasiones no hace más que provocar una caida de rendimiento en varios aspectos. En primer lugar en tiempo de ejecución. Un DataSet mal dimensionado es más lento al cargarse y mucho más lento al operar sobre él. Además, en el trabajo del día a día del programador, manejar uno de estos a través del Visual Studio puede ser una odisea.

Desde un punto de vista transaccional y si no proponemos una estructura mejor cada operación con un TableAdapter inicializa una nueva conexión. Ello nos limita a la hora de utilizar transacciones, ya sea a nivel del motor de base de datos, o a un nivel superior utilizando clases como TransactionScope del framework. Sobra decir que cada vez cuesta más encontrar aplicaciones donde se pueda pasar sin entender una infinidad de operaciones de manera atómica y más en un entorno tan distribuido como el actual.

Para terminar, desde el punto de vista de la interoperabilidad. Probablemente te interese esta parte si te estás iniciando en WCF o tecnologías similares. El hecho de que un Dataset se serialice automáticamente como XML no quiere decir que todas las aplicaciones sean capaces de interpretarlo. De hecho, será difícil de ver si la aplicación consumidora del servicio no es .NET. El schema del DataSet es complicado de procesar y en la mayoría de los casos tremendamente pesado en comparación con serializar una clase formada por tipos básicos, definidos por el programador o con una serialización personalizada.

Comentarios

Cómo enviar correo SMTP autenticado con PHP

Despues de recibir varias dudas vuestras de como enviar un correo autenticado desde PHP, os hemos pegado un fragmento de codigo simple para realizar el envio. Como muy bien nos indica nuestro amigo Pablo Enjuto mas abajo, aqui teneis un enlace a las clases phpmailer.php y smtp.php que se importan en el codigo. 

http://sourceforge.net/project/showfiles.php?group_id=26031

Elegid la version que mas se adecue a vuestro Php y listo, es muy sencillo de utilizar y esperamos que os sea de mucha utilidad.

 

require('class.phpmailer.php');
require('class.smtp.php');

$nombre = $_POST["nombre"];
$telefono = $_POST["telefono"];

$mail = new PHPMailer();

$body = "Hola es una prueba";
$body .="ojalá funcione";

$mail->IsSMTP(); 

/* Sustituye (ServidorDeCorreoSMTP)  por el host de tu servidor de correo SMTP*/
$mail->Host = "ServidorDeCorreoSMTP";

/* Sustituye  ( CuentaDeEnvio )  por la cuenta desde la que deseas enviar por ejem. prueba@domitienda.com  */

$mail->From = "CuentaDeEnvio";

$mail->FromName = "Domitienda";

$mail->Subject = "prueba de envio";

$mail->AltBody = "prueba"; 

$mail->MsgHTML($body);

/* Sustituye  (CuentaDestino )  por la cuenta a la que deseas enviar por ejem. admin@domitienda.com  */
$mail->AddAddress("CuentaDestino", "Domitienda");

$mail->SMTPAuth = true;

/* Sustituye (CuentaDeEnvio )  por la misma cuenta que usaste en la parte superior en este caso  prueba@domitienda.com  y sustituye (ContraseñaDeEnvio)  por la contraseña que tenga dicha cuenta */

$mail->Username = "CuentaDeEnvio";
$mail->Password = "ContraseñaDeEnvio"; 

if(!$mail->Send()) {
echo "Mailer Error: " . $mail->ErrorInfo;
} else {
echo "Message sent!";
}
 

Saludos.

Comments (10)

MSChart Controls instalado en domitienda.com

Recientemente hemos instalado en los servidores de domitienda las extensiones mschart del Service Pack 1 de ASP .NET 3.5

 

Estos controles te permiten crear gráficas dinámicamente de una forma sencilla  y que dan un resultado muy vistoso tal y como podeis ver en las imagenes de ejemplo:

mschart1

 

mschart2

 

Entre las distinas opciones de gráfica se incluyen las típicas de barras, rangos, lineas, tartas hasta otras más potentes como de Acumulación, Distribución o Splines en 3D!

Todas las gráficas son compatibles con AJAX y puedes ser declaradas de forma estática o dinámica enlazandolas con un DataSource.

Otro punto fuerte de este control es que el restultado que el motor de .Net genera es una imagen png o jpg por lo que el navegador lo reconocerá como una etiqueta < img> cacheandola y haciendo que se cargue mucho más rápido las proximas veces que se refresque la web.

Si quereis probarlo tan solo teneis que instalaros el Add-on para el Visual Studio 2008, descargaros los ejemplos y la documentación y empezar a programar!

Comentarios

Soporte para jQuery proximamente en VS2008

jQuery es una de las mejores librerias de Javascript que existen. Con tan solo unas pocas lineas de código puedes hacer verdaderas virguerías! 

Pues bien, hace poco leí una noticia donde anuncianban que una próxima revisión de Visual Studio 2008 vendría con jQuery instalado por defecto, Intellisense, soporte e integración para el Ajax Toolkit y compilación!!

 

 

Vamos, que ya no tendremos escusa para hacer cosas con Javascript porque "queda feo en el código".

El hecho de que Microsoft empiece a dar soporte nativo a librerias externas me llena de alegría ya que hasta ahora solo se limitaban a copiar la funcionalidad de ciertos proyectos Open-Source y cambiarlo de nombre, ¿Qué significa este cambio en la política de Microsoft? ¿Qué será lo próximo que veremos en VS2008?

¡Estaremos muy atentos!

Para todo aquel que no sepa que es jQuery o quiera saber más os recomiendo que visiteis su sitio web que esta lleno de documentación y ejemplos.

Comentarios

Actualizando parcialmente nuestras páginas en ASP.Net

Ya hemos comentado anteriormente cómo publicar nuestras páginas ASP.Net en Domitienda a través del asistente que nos ofrece Visual Studio. Sin embargo, este proceso automatizado nos obliga a subir la web entera en cada ocasión en lugar de poder actualizar tan solo la parte que haya cambiado.

Antes de realizar este proceso, es necesario averiguar en que modo está compilada ya que existen dos modos en los Web Sites de Visual Studio 2005. Esto lo podemos averiguar en el menú Build > Publicar sitio web. Para poder cumplir nuestro objetivo y actualizar solo la parte que hemos cambiado de la página web deberá estar activada la opción "Utilizar nomenclatura fija y ensamblados de una sola página". Si no teníamos esta opción activa será necesario volver a subir la web entera una vez mas.

Una vez realizado esto, procederemos a publicar nuestra web (Build > Publicar sitio web de nuevo) pero especificaremos una carpeta local en lugar de un FTP. De este modo la web entera se generará en la carpeta indicada de nuestro equipo. Hay varios tipos de archivos:

  • Páginas ASPX. Tendremos que subir manualmente a través de un cliente FTP como FileZilla tan solo aquellas que hayamos modificado.
  • Archivos DLL. Se encuentran dentro de la carpeta BIN y veremos que aunque con una nomenclatura algo extraña, tenemos uno por cada página. Subiremos solo aquellos que hayamos modificado. Si tenemos clases, datasets, o cualquier elemento con código externo a las páginas en nuestro proyecto y realizamos alguna modificación en ellos deberemos volver a subir el archivo App_Code.dll
  • Web.config y PreCompiledApp.config: Configuran aspectos de la página y tan solo será necesario volver a subirlos en caso  de realizar algún cambio en ellos.


Archivos generados en la publicación

Archivos generados en la publicación



Recordad que esto funcionará correctamente si tenemos la opción "Utilizar nomenclatura fija y ensamblados de una sola página" activa y evidentemente habiendo subido una primera vez la web entera con este modo activado. De este modo evitamos estar "machacando" la web en cada ocasión, con el consiguiente ahorro de tiempo y disminución de problemas.

Un saludo a todos!

Comments (2)

Propagar Title de la Master a todas las páginas en ASP .Net

Hoy un pequeño pero útil truco de programación.

Si usais páginas Master en vuestras aplicaciones web ASP .NET y quereis que todas las páginas tengan el mismo Title y, como yo, estais cansados de tener que escribir en cada pagina el título aqui teneis la solución.

 

En el código asp de la página Master añadimos al tag "head" el runat="server" para que podamos modificarlo desde el código fuente:

ASP:
  1.  <head runat="server">

Y, en el Load de la Página Master sobreescribimos el atributo Title para que se propague en todas las páginas que usen esa Master

ASP:
  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3. this.Page.Title = "domiblog. El blog de Domitienda";
  4. }

¡Espero que os sea tan útil como a mi!

Saludos desde el otro lado de la pantalla!

Comentarios

Disponible para descargar el Service Pack 1 de Visual Studio 2008 y Framework 3.5

Nuestro amigo el Guille nos cuenta en su web que ya están listos para su descarga el primer Service Pack para el Framework 3.5 de ASP .NET y Visual Studio 2008.

En esta dirección puedes ver un listado de los cambios de esta nueva versión. Básicamente se ha agregado compatibilidad con Sql Server 2008, algunos componentes como el Shape y DataRepeater y se han solucionado un porrón de problemas.

¡Y Recuerda! En domitienda.com ofrecemos hosting para ASP .NET 3.5 desde 4.95€ al mes

Comentarios

« Noticias Anteriores Página siguiente »

Add to Technorati Favorites