Crea formularios rápidamente con Formee

2webfacil — Wed, 12 May 2010 04:34:42 +0000

Formee es un framework CSS que te ayudará a crear estilos de manera sencilla y con acabado de calidad. Este framework de uso sencillo permite la creación de formularios que tengan la misma apariencia en los diferentes navegadores y sin complicaciones.

Características

Permite la creación de formularios compatibles con multiples navegadores
Es muy flexible para adaptar a cualquier web con el cambio del ancho del formulario.
Puedes integrarlo rápidamente con dos líneas de código.
Cumple con los estándares xHTML.
Puedes personalizarlo con pocas líneas de código
Incluye estilos para mensajes de confirmación, error, advertencia.

Como Utilizar Formee

Utilizar Formee es sencillo, lo primero es descargar la ultima versión, en donde encontrarán una carpeta llamada css que contiene los archivos necesarios para su funcionamiento. Luego debes incluir las siguientes líneas en tu archivo HTML.

1 2	<link rel="stylesheet" href="form-structure.css" type="text/css" media="screen" /> <link rel="stylesheet" href="form-style.css" type="text/css" media="screen" />

Pueden ver un ejemplo de uso de este framework en: http://www.formee.org/demo/index.htm.

Tags: CSS, formulario, framework, gratuito, HTML

Crear botón “Follow Me” en Twitter

2webfacil — Wed, 07 Apr 2010 04:00:25 +0000

Promocionar nuestra es cuenta de Twitter es una tarea importante para incrementar el numero de lectores y presencia de nuestra web o marca en Internet. Twitter “Follow” Badge es una servicio que te permitirá crear rápidamente un botón flotante con el enlace a tu cuenta de Twitter.

Como crear tu botón “Follow Me”
El primer paso es acceder al servicio en Twitter “Follow” Badge en donde puedes configurar los siguientes parámetros.

Twitter account: el nombre de tu cuenta de Twitter.
Label: es el texto que aparecerá en el botón.
Color: es el color de fondo del botón.
Side: puedes elegir si el botón se muestra a la derecha o izquierda.
From top: es la separación de la parte superior.

Luego de configurar estos parámetros hacen click en el botón “Update Code” el cual generará un codigo Javascript de la siguiente forma:

<script src='http://files.go2web20.net/twitterbadge/1.0/badge.js' type='text/javascript'></script>
<script type='text/javascript' charset='utf-8'></script>

Esto código debes colocarlo en el código fuente de tu página o blog, debes colocarlo antes de la etiqueta .

Tags: badge, blog, boton, HTML, javascript, Twitter

Personalizar títulos en Blogger

2webfacil — Wed, 29 Jul 2009 03:19:30 +0000

El título de una página es muy importante pues indica de manera directa el contenido de nuestro web, además es mostrado por los buscadores en los resultados de las búsquedas por lo cual es necesario tener títulos adecuados en nuestras páginas.

Sintaxis del título en una Página
El titulo en una página se encuentra encerrado entre los tags los cuales se ubican entre los tags <head> de nuestro HTML, entonces la sintaxis sería de la forma: <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1 </pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><title>Titulo de tu Web</title></pre></td></tr></table></div> Observaciones Es recomendable tener títulos diferentes por cada página, de esta manera los buscadores las reconocerán como páginas diferentes. Este es un error común por lo cual los buscadores solo devuelven un resultado para nuestra página obviando loas demás paginas. Otro punto a tener en cuenta es no dejar paginas con titulo vacío o con los títulos por defecto como “Untitled Page 1″, esta muy improbable que los usuarios nos encuentren mediante los buscadores. Personalizando los títulos en Blogger Lo que haremos es cambiar los títulos concatenando el nombre de la página con el titulo del blog para las páginas internas y dejando intacto el titulo de la página principal. Entonces buscamos el titulo por defecto de nuestro blog: <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1 </pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><title><data:blog.pageTitle/></title></pre></td></tr></table></div> Ahora lo reemplazamos por el siguiente código que cambiará los títulos para las páginas internas dejando intacto el titulo de la pagina principal. <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1 2 3 4 5 </pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><b:if cond='data:blog.pageType == "index"'> <title><data:blog.pageTitle/></title> <b:else/> <title><data:blog.pageName/> - <data:blog.title/></title> </b:if></pre></td></tr></table></div> Este tip sencillo de implementar hará que todos los posts de nuestro blog sean indexados por los buscadores y por lo tanto obtener mayor cantidad de visitas. Tags: <a href="http://2webfacil.com/tag/blog/" title="blog" rel="tag">blog</a>, <a href="http://2webfacil.com/tag/blogger/" title="Blogger" rel="tag">Blogger</a>, <a href="http://2webfacil.com/tag/codigo-fuente/" title="codigo fuente" rel="tag">codigo fuente</a>, <a href="http://2webfacil.com/tag/html/" title="HTML" rel="tag">HTML</a>, <a href="http://2webfacil.com/tag/seo/" title="SEO" rel="tag">SEO</a> </article> <article> <h1>Como crear enlaces en HTML</h1> 2webfacil — Tue, 28 Jul 2009 02:32:12 +0000 Los enlaces o links son la base fundamental de las páginas webs pues permiten desplazarse entre las diferentes páginas. Si eres un blogger o tienes tu propia pagina tendrás la necesidad de crear enlaces, para ello les presentamos una pequeña guía para hacerlo correctamente. Creando enlaces básicos Los enlaces se crean utilizando el tag <a> en donde debemos colocar a donde queremos enlazar y el texto que servirá de enlace. Por ejemplo si deseamos enlazar al buscador Google lo hacemos con el siguiente código: <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1 </pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><a href="http://www.google.com">Google</a></pre></td></tr></table></div> La ruta a la que deseamos enlazar puede ser de dos tipos: absoluta y relativa. <ul> <li>Absoluta: es decir la ruta completa, sirve para cuando deseamos enlazar sitios externos al nuestro, por ejemplo: http://www.google.com</li> <li>Relativa: es la ruta relativa a la página que estamos visitando, se utiliza cuando deseamos enlazar páginas de nuestro mismo dominio, por ejemplo: contacto.php</li> </ul> Respecto a las rutas relativas, vemos que sucede si la página esta en una carpeta diferente a la de nuestro archivo actual: <ul> <li>folder/pagina.html para cuando la pagina se encuentra en una carpeta llamada folder.</li> <li>../pagina.html para cuando la pagina se encuentra en una carpeta superior.</li> <li>/pagina.html cuando el destino se encuentra en el root de nuestro servidor.</li> </ul> Enlazando desde Imagenes Si deseamos que el enlace sea una imagen en lugar de un texto, debemos colocar el tag con las propiedades de la imagen de la siguiente forma: <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1 </pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><a href="contact.php"><img src="btcontact.gif" width="120" height="24" /><a></pre></td></tr></table></div> Agregando la propiedad target La propiedad target sirve para indicar donde deseamos abrir el enlace, para ello tenemos las siguiente posibilidades: <ul> <li>_blank para abrir en enlace en una ventana nueva.</li> <li>_parent si usas frames para abrir en el frame padre.</li> <li>_top para abrir en el frame principal de la página.</li> <li>_self abrir en enlace en la misma ventana.</li> </ul> Entonces si deseamos poner enlaces para que abran en ventana nueva podemos colocarlo de la forma: <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1 </pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><a href="http://www.google.com" target="_blank">Google</a></pre></td></tr></table></div> Como pueden ver es sencillo la creación de enlaces y con ello ayudarán a sus visitantes a desplazarse cómodamente en el contenido de su página web. Tags: <a href="http://2webfacil.com/tag/blog/" title="blog" rel="tag">blog</a>, <a href="http://2webfacil.com/tag/blogger/" title="Blogger" rel="tag">Blogger</a>, <a href="http://2webfacil.com/tag/contacto/" title="contacto" rel="tag">contacto</a>, <a href="http://2webfacil.com/tag/google/" title="Google" rel="tag">Google</a>, <a href="http://2webfacil.com/tag/html/" title="HTML" rel="tag">HTML</a> </article> <article> <h1>Publicar SWF en Blogger</h1> 2webfacil — Tue, 28 Jul 2009 01:25:10 +0000 Publicar archivos Flash o SWF es una tarea común para la mayoría de Bloggers, aunque <a href="http://blogger.com">Blogger</a> no permite publicar estos archivos nativamente hay formas sencillas de hacerlo y lograr que nuestro blog muestre contenido Flash el cual es muy vistoso. <a href="http://2webfacil.blogspot.com/2009/07/publicar-swf-en-blogger.html"></a> Donde Alojar los SWFs El primer problema radica en que Blogger no permite subir archivo con extensión SWF, entonces es necesario subir estos archivos a un hosting y luego enlazarlos desde nuestro blog. Ahora si no tienes un hosting pagado puedes hacerlo en algunos servicios gratuitos como: <ul> <li><a href="http://sites.google.com">Google Sites</a></li> <li><a href="http://www.fileden.com/">FileDen</a></li> <li><a href="http://imageshack.us/">Imageshack</a></li> </ul> En mi caso prefiero Google Sites, pues me puedo crear una cuenta utilizando la misma que tengo para Blogger, es sencilla de utilizar y sin publicidad. Entonces nos registramos y creamos un nuevo site (el cual solo nos servirá para alojar nuestros archivos). Una vez creado el site deben acceder al menú More Actions < Manage Site < Attachments. En esta opción podremos visualizar todos los archivos que hemos subido y hacer upload de los archivos que deseamos publicar. Entonces para mi ejemplo he subido una archivo llamado 7762.swf tenemos el URL de nuestro archivo: <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1 </pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;">http://sites.google.com/site/2webfacil/7762.swf</pre></td></tr></table></div> Publicando SWF en Blogger Ahora que ya tenemos el archivo SWF es hora de utilizar código html para mostrar nuestro archivo flash en el blog. Para ello utilizamos el siguiente código: <div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1 2 3 4 5 </pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><object id="movie" type="application/x-shockwave-flash" data="ruta-archivo.swf" width="ancho" height="alto"> <param name="movie" value="ruta-archivo.swf"> <param name="wmode" value="transparent" /> </object></pre></td></tr></table></div> Donde ruta-archivo.swf es la ruta del archivo SWF, ancho y alto las dimensiones del SWF. Luego siguiendo este código podemos mostrar nuestro Flash con el siguiente código: data="http://sites.google.com/site/2webfacil/7762.swf" width="231" height="132"><param name="movie" value="http://sites.google.com/site/2webfacil/home/7762.swf"><param name="wmode" value="transparent" /></object> Asi de sencillo, pueden ver el ejemplo funcionando en nuestro blog de prueba en Blogger: <a href="http://2webfacil.blogspot.com/2009/07/publicar-swf-en-blogger.html">http://2webfacil.blogspot.com/2009/07/publicar-swf-en-blogger.html</a>. Tags: <a href="http://2webfacil.com/tag/blog/" title="blog" rel="tag">blog</a>, <a href="http://2webfacil.com/tag/blogger/" title="Blogger" rel="tag">Blogger</a>, <a href="http://2webfacil.com/tag/flash/" title="Flash" rel="tag">Flash</a>, <a href="http://2webfacil.com/tag/hosting/" title="hosting" rel="tag">hosting</a>, <a href="http://2webfacil.com/tag/html/" title="HTML" rel="tag">HTML</a>, <a href="http://2webfacil.com/tag/swf/" title="swf" rel="tag">swf</a> </article> <article> <h1>Publicar Código fuente en Blogger</h1> 2webfacil — Mon, 27 Jul 2009 22:35:33 +0000 Para los que deseamos compartir información de como personalizar webs es muy importante publicar código fuente donde se resalten con colores la sintaxis para poder entenderlo rápidamente. Veamos como publicar código fuente en Blogger. <a href="http://2webfacil.blogspot.com/2009/07/codigo-fuente-en-blogger.html"></a> SyntaxHighlighter 2.0 <a href="http://alexgorbatchev.com/wiki/SyntaxHighlighter">SyntaxHighlighter</a> es un script creado por Alex Gorbatchev para resaltar código fuente en páginas HTML hecho completamente en Javascript por lo cual la solución ideal para integrarlo con Blogger. Instalando SyntaxHighlighter Normalmente se debe alojar este script en nuestros servidores, pero como Blogger no permite subir archivos .js, utilizaremos la versión hosteada que nos brinda SyntaxHighlighter. Entonces lo primero es incluir la librería en nuestro template, para ello editamos nuestro template y colocamos el siguiente código justo antes de la etiqueta <head>. <div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="'text/javascript'"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="'text/javascript'"></script> <script type="'text/javascript'"></script></pre></div></div> Donde las dos primeras líneas incluyen las estilos y las dos siguientes los scripts para interpretar el código fuente. En mi caso he incluido la librería shBrushXml.js pues yo deseo publicar solo HTML. Pueden agregar otros lenguajes con solo agregar mas scripts, para una lista detallada de los scripts que puedes incluir pueden leer <a href="http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes">SyntaxHighlighter/Brushes</a>. Publicando Código Fuente Ahora que ya tenemos instalado nuesro script, el siguiente paso es publicar código fuente, para ello debemos colocar el código que deseamos publicar entre los tags <pre> pero además debemos indicar que tipo de código estamos mostrando esto lo hacemos de la forma: <div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><pre class="brush: xml"> // codigo fuente < /pre></pre></div></div> Nuevamente en mi caso utilizo XML para indicar que deseo publicar HTML. Entonces si por ejemplo deseamos publicar parte de un formulario en html, podriamos hacerlo de la siguiente forma: <div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><pre class="brush: xml"><form method="post"> Nombre: <input id="nombre" name="nombre" type="text" /> Email: <input id="email" name="email" type="text" /> <input name="btsend" type="submit" value="Enviar" /> </form> < /pre></pre></div></div> NOTA Hay que tener en cuenta que para evitar errores de HTML al momento de publicar el código fuente debemos cambiar los caracteres < y > por sus equivalentes en HTML: <ul> <li>< por su equivalente <</li> <li>> por su equivalente ></li> </ul> Además de ello pueden ver el ejemplo funcionando en nuestro blog de prueba en Blogger: <a href="http://2webfacil.blogspot.com/2009/07/codigo-fuente-en-blogger.html">http://2webfacil.blogspot.com/2009/07/codigo-fuente-en-blogger.html</a> Tags: <a href="http://2webfacil.com/tag/blog/" title="blog" rel="tag">blog</a>, <a href="http://2webfacil.com/tag/blogger/" title="Blogger" rel="tag">Blogger</a>, <a href="http://2webfacil.com/tag/codigo-fuente/" title="codigo fuente" rel="tag">codigo fuente</a>, <a href="http://2webfacil.com/tag/html/" title="HTML" rel="tag">HTML</a>, <a href="http://2webfacil.com/tag/javascript/" title="javascript" rel="tag">javascript</a>, <a href="http://2webfacil.com/tag/seo/" title="SEO" rel="tag">SEO</a> </article> </main></body></html>

2WebFacil » HTML

Crea formularios rápidamente con Formee

Crear botón “Follow Me” en Twitter

Personalizar títulos en Blogger