Para este tutorial usaremos el ejemplo más sencillo que hay para “custom fields” que es el de la imágenes de vista previa de nuestros post, con estas imágenes podemos dar un aspecto personalizado a nuestros themes y jugar mucho más con el diseño de nuestro sitio.

Entonces definimos en la etiqueta Name y la llamamos thumbnail y en value ponemos la url completa de la imagen que queremos mostrar… nos quedaría algo así

Hacemos click en el botón Add custom field y veremos cómo se agrega en la parte de arriba

Ok, ya tenemos definido el custom field, ya le hemos asignado nombre y valor… ahora viene la parte interesante ¿cómo lo mostramos en WordPress? bien, vamos a abrir nuestro archivo index.php de nuestro theme y agregamos la siguiente línea después del while…

Lo que hacemos aquí es asignarle a la variable $thumbnail el valor del “meta” ó custom field llamado “thumbnail” es más simple de lo que parece.

Ahora finalmente lo que hacemos es integrarlo dentro de nuestro theme de la siguiente manera para que todo funcione correctamente y en caso de no haber imagen para mostrar que muestre una imagen de sustitución que nosotros queramos.

Muy sencillo como pueden ver y seguro que si buscamos más ejemplos en Google podemos encontrar muchísimos más y más completo, el fin de esta guía es simplemente mostrar la funcionalidad para que vosotros mismos podáis ampliar esta idea a vuestros propios proyectos.

Ejemplos:

En Vectoralia: hay un tutorial de como crear una guía de contacto usando custom fields y algunos plugins.

Bueno y como este muchos más, un saludo chicos y espero vuestros comentarios.

Muy interesante la aplicación USBWebServer 8 un pequeño sistema que apenas ocupa 32MB, donde tendrás una solución de Apache-MySQL-PHP listo para usar.

Esto se hace ideal para instalarlo en nuestro pendrive o en CD-R para presentaciones de webs, sistemas PHP o cualquier cosa que se te ocurra. Sólo se requiere un pendrive con un mínimo de 32MB, PHP (El autor usa 5.0.3 sin problemas), Apache (2.0.50) y MySQL. Un buen editor de textos, preparar los ficheros de configuración y listo.No hay que hacer absolutamente nada mas que seguir las instrucciones del  instalador y ya tenemos nuestro servidor listo para llevar a todas partes en nuestros pendrive para realizar presentaciones o demostraciones de nuestros programas sin necesidad de que tengamos una conexión a Internet.

Sin duda una interesante idea para todos aquellos que trabajan con sistemas WAMP, XAMPP o LAMP, que tienen ahora una alternativa más rápida, Descarga: USBWebServer 8

TinyMCE es un editor HTML On-Line que es capaz de convertir los textarea de un formulario en campos WYSIWYG traspasando todo el trabajo a HTML automáticamente.

Características

• Es sencillo de integrar en las páginas web, ya que solo tiene dos líneas de código.
• Se puede personalizar a través de temas y plugins.
• También se pueden instalar paquetes de idiomas.
• Es compatible con la mayoría de los navegadores como Firefox, Internet Explorer, Opera y Safari, aunque este último esta en fase experimental.
• Con el compresor GZip para PHP/.NET/JSP/Coldfusion, hace que TinyMCE sea un 75% más pequeño y mucho más rápido de cargar.
• Se puede utilizar AJAX para guardar y cargar el contenido.

Integración de TinyMCE

Para poder utilizar TinyMCE es las páginas web, el navegador tiene que ser compatible y tener Javascript habilitado.

Primero hay de descargar TinyMCE desde la siguiente página de descargas: http://tinymce.moxiecode.com/download.php. Después hay que descomprimirlo y guardarlo en el servidor de la página web para poder utilizarlo en los textarea de los formularios.

En la página que se vaya a utilizar, primero hay que incluir la librería tiny_mce.js incluyendo el archivo externo de código Javascript.

A continuación hay que inicializar TinyMCE para convertir los textarea en campos de texto WYSIWYG editables.

Ejemplo de integración de TinyMCE

En este ejemplo primero hemos incluido la librería tiny_mce.js dentro de las etiquetas . También dentro de estas etiquetas también hemos inicializado TinyMCE para que en el textarea del formulario se convierta en un campo de texto WYSIWYG.

Via: Desarrolloweb.com

No me había tocado trabajar con grandes cantidades de gráficas generadas de manera dinámica en una web, pero en un proyecto relacionado con un backend para una aplicación on-line salto la idea de poder obtener ciertos datos estadísticos de manera dinámica y vistos en forma de gráficas.

Y pensando en la manera de hacer esto de una forma mas menos organizada y tratando de usar solo un paquete, en un momento pense en varias opciones como php y gd está jpGraph, html como las de Google, o varias en Flash y otras tantas en Javascript. Pero al final me decidí a buscar un plugin para jQuery que es la librería que ocupamos en el proyecto en cuestión.

Algunas razones, utiliza pocos recursos y se generan en el cliente liberando recursos del servidor, en momentos de máximos de trabajo.

Tuve una grata sorpresa al ver que hay una gran cantidad de plugins para esta tarea tan especifica y ademas de muy buena calidad.

1.- El primero de la lista es Flot

Flot desarrollado por Ole Laursen, es una libreria Javascript para gráficos de lineas usando jQuery. Esta permite crear gráficas del lado del cliente con funciones como el seno, coseno, etc.

Es potente, fácil de implementar y la estética, al igual que en otros productos para jQuery, es muy buena. Le falta soportar gráficos de torta, pero podemos utilizar la modificación de Flot que se encuentra aquí.

Ejemplos: demos
Descargar: jquery.flot-0.1.pack.js

2.- jQuery Visualize – Para crear gráficos accesibles

jQuery Visualize permite crear gráficas accesibles desde una tabla de datos estándar haciendo uso de canvas. Se pueden crear varios tipos de gráficas como: torta (pie), lineal, área y de barras.

En su sitio podemos encontrar ejemplos muy bien explicados (en ingles). Muy funcional, práctico y sencillo de implementar, jQuery Visualize, una excelente opción.

Sitio: Filament Group

3.- HighCharts – Completo sistema de gráficas

HighCharts, uno de los mas completos sitesmas de graficas, este magnifico plugin para jquery incorpora los más conocidos formatos para mostrar graficas y con una presentación impecable. Animaciones y colores realmente agradables, todo esto con muy bajo consumo.

Sitio: HighCharts
Ejemplos: www.highcharts.com/demo/

4.- Sparklines – Gráficas inline con jQuery

Sparklines es un plugin de jQuery que facilita la creación de gráficos inline. Los datos pueden ser pasados por parámetro o sino a través de funciones JavaScript.

Dispone de una buena cantidad de tipos de gráficos y en su sitio a pesar de estar en Ingles esta muy bien documentado.

Sitio: Sparklines
Descarga: jQuery Sparklines

5.- jqPlot – Gráficos Profesionales con jQuery

jqPlot tambien usa la canvas para generar los gráficas, posee multiples funcionalidades como – Gráficos de Torta – Entradas para una pares de datos X/Y – Entradas para series de datos x1,x2,… – Series de Datos Multiples – Multiples ejes Y – Gráficos Logaritmicos – Ejes con fechas etc…

Las imagenes generadas son de gran calidad y con muy buena presentación. Buenos colores, no están muy cargados y lo mejor es muy simple de usar.

Sitio: Web Oficial jqPlot
Ejemplos: jqPlot

Bien finalmente la decisión es de ustedes hay para todos los gustos y colores. Todo dependerá de lo que esperemos conseguir como resultado.

Si tienes algun proyecto o simplemente te interesa saber como funciona un poco la API de Twitter este es tu tutorial. Vamos a personalizar un mensaje usando PHP y el API de Twitter para luego plubicarlo.

En realidad es algo muy sencillo y solo vamoa utilizar un par de lineas de codigo nada muy complejo, pero nos servira como introducción.

Para el siguiente ejemplo usaremos dos archivos PHP.

# insertarMensaje.php ( contiene la interface de nuestro ejemlo )
# twitterApi.php ( contiene el codigo nesesario para usar el API )

Bien manos a la obra el codigo explicado y los parametros de configuración:

En primer lugar en el archivo insertarMensaje.php tenemos que modificar dos parámetros:
$twitter_user, con tu nombre de usuario de Twitter y $twitter_psw, con tu contraseña de Twitter.

/* Esto lo dejamos tal cual
/* —————————————- */
require(‘twitterApi.php’);

if(isset($_POST['twitter_msg'])){
$twitter_msge=$_POST['twitter_msg'];
if( strlen($twitter_msge)<1 ){
$error = 1;
} else {
$twitter_status = postToTwitter($twitter_user, $twitter_psw, $twitter_msge);
}
}
?>

Bien la parte que esta comentada indica donde esta el codigo PHP que no debemos tocar y que es el que procesa la instrucción.

El siguiente es el codigo de nuestra interface donde ponemos nuestro mensaje a Twitter.
Como veran es muy basico y solo contiene un par de lineas de PHP para verificar si ha habido un error en el mensaje.

< ?php } else if(isset($error)){?>

< ?php }?>

¿Que estas haciendo?

Finalmente podemos poner esto en nuestro servidor local o nuestro hosting y probarlo directamente.

Archivos del tutorial: twitter (248)
Articulo original: Antonio Lupetti

jQuery como plataforma de desarrollo es grande y vemos el resultado de esto cada día. Casi es difícil de creer pero cada vez que decido buscar un nuevo plugin jQuery para resolver una tarea concreta en mi trabajo me doy cuenta de que la comunidad proporciona constantemente nuevas soluciones de alta calidad de forma gratuita.

El número de contribuciones es muy alto y a mi como desarrollador esto me hace volver cada vez a por más. Supongo que a muchos desarrolladores les ocurrirá algo similar. A veces no somos conscientes del trabajo que todo esto implica y las horas de duro trabajo que conlleva. Muchas gracias a todos por gastar su precioso tiempo en la creación de cosas que todos podemos utilizar.  A continuación una lista de 10 plugins de gran ayuda, que te puedes encontrar actualmente.

Form extensions
jQuery Form extensions es un pequeño plugin para ayudar en forma rapida en las tareas relacionadas con jQuery. Realmente simple, pero para muy útil para cualquier desarrollador, es muy bueno tener a mano para llevar a cabo tareas, especialmente si ya están encapsulados como este.

SimplePager – jQuery paging plugin
La premisa detrás de SimplePager es permitir la creación de la paginación o la configuración con el menor esfuerzo posible. Este plugin localiza los divs, párrafos, elementos de la lista o casi cualquier otro contenido. Simple pero muy poderoso!

El articulo original se encuentra en Ingles pero para el caso de este tipo de plugins, las guías son muy sencillas de seguir. En todo caso si hay alguno que os interese y necesitan alguna ayuda, postearla aquí en los comentarios para ver si les puedo ayudar de alguna manera.

Via: www.tripwiremagazine.com (Ingles)

A la hora de desarrollar con PHP nos encontramos con que gran cantidad de programadores o diseñadores están usando herramientas como el Dreamweaver, incluso el block de notas de windows, y subiendo y probando sus resultados contra un servidor web.

Si bien esto está bastante extendido, obviamente no es la mejor manera de trabajar ni de lejos. Tradicionalmente, PHP no contó con el apoyo total de grandes marcas de software por su gratuidad, algo que no ha impedido su rápida y total expansión entre la comunidad desarrolladora. Esto deriva en grandes ventajas como por ejemplo el precio asequible que tiene contratar un servicio de hosting con PHP + MySQL, en comparación con otras alternativas Java.

Os propongo aquí algunas herramientas que de seguro harán vuestro trabajo más sencillo y productivo, así como que disminuya de manera radical el tiempo empleado para realizarlo y los errores cometidos.

Comenzaré con la plataforma de implementación y depuración de código. Aquí tenemos dos claros exponentes:

PDT Project (http://www.eclipse.org/pdt)

Este es el proyecto de Eclipse para el desarrollo en PHP. Para mí sin duda la aplicación más recomendable de todas. Conocido es de sobra en la comunidad que todo lo desarrollado por Eclipse es garantía de éxito.

Además de incluir la tradicional interfaz que apoya la productividad y corrige numerosos errores, incluye funciones de depuración de código con el Zend Debugger.

Otra opción es el Zend Studio, también muy conocido y basado en el motor de eclipse. Es una magnífica aplicación para el desarrollo profesional, aunque en este caso es de pago. Incluye capacidades de análisis y optimización de código, depuración y edición avanzada.

Tercera opción os propongo Aptana, desarrollada también bajo la plataforma Eclipse, y que tiene un gran editor con cosas tan curiosas como son la comprobación en caliente de la compatibilidad de un código entre navegadores.

Más allá de WYSIWYG TurboPHP apoya la presentación de datos dinámica que está más allá del WYSIWYG. Como los paneles o bloques de datos se generan en tiempo real, la disposición de ampliar, mantener intacto el diseño. El enfoque de diseño utiliza las tablas de HTML y estilos CSS para lograr una amplia gama de compatibilidad del navegador, sin secuencias de comandos complejos.

Por otra parte están los entornos de producción. Desaconsejo totalmente la instalación manual de Apache, PHP y demás. Para ellos hay magníficas soluciones integradas como las siguientes.

XAMPP (para Linux y Windows)
WAMP (para Windows) o MAMP (para Mac)
EASYPHP (para Windows)
VERTIGOSERV (para Windows)

Todos estos entornos nos instalan de una sola vez todo lo necesario para comenzar a programar sin problemas, todos incluyen como mínimo ademas detener un pequeño panel de administración desde donde poder hacer cambios en la configuración de Apache y PHP:
Apache 2.2.11
PHP 5.3.0
MySQL 5.1.36
Phpmyadmin
Espero que esto les ayude a mejorar el desarrollo de sus proyector creando un mejor flujo de trabajo.

Via: www.corpas.info

Hola a todos hoy respondere a un correo con una consulta de un amigo, que me preguntaba por programas para, generar menúes desplegables con CSSy JavaScript. Bien tratare dos puntos antes de comenzar,

El primero es que no soy nada partidario de los generadores de menús, uno por que muy sencillo crearlos nosotros mismos, segundo quedan obsoletos rapidamente ya que internet cambia demasiado a prisa y a menos que el programa se actualice lo veo dificil que aprenda una manera nueva de generar el menu ademas como extra el hecho de suelen generar mucho codigo realmente inecesario.

Punto dos, son las formas que veremos de generar menus desplegables mediante CSS y JavaScript, supongo y doy por hecho de que quienes sigan la guia tendran unos conocimientos minimos hacerca de los procedimientos que realizaremos, ya que si hay que explicar paso a paso cada una de las cosas que haremos el Post se alargaria demasiado, tampoco es la idea de hacer una clase magistral sobre CSS.

Nota: lo que aqui veamos noes ni mucho menos la mejor de las mejores maneras y tampoco creo que este exenta de errores, tan solo son metodos de trabajo y formas de hacer algo puntual si haceís una busqueda en Google sobre (menu desplegable en CSS) os aseguro que hay una buena cantidad de guias con las cuales podeís complementar esta pequeña reseña.

Luego de esta pequeña intro ons vamos de cabeza al tema que nos trae a la cancha. Primero comenzaremos con los programas para generar menues CSS.

CSS Tab Designer : Creo que es uno de los más conocidos en esta area y de los que mas se utiliza, lo he probado y cumple perfectamente su cometido sin dejarnos un bodrio muy grande de codigo para su funcionamiento.

Con CSS Tab Designer puedes:

- Diseñar rápidamente tu lista visualmente.
- Elegir una variedad de estilos y colores grande (más de 60 diseños y colores).
- Generar el código final de xhtml con un solo click.

Enlace de Descarga: CSS Tab Designer

PureCSSMenu.com : Es un generador en línea de menús desplegables del tipo CSS, se ofrece en forma gratuita. Este software es capaz de crear un menú desplegable sin JavaScript, en un 100% en CSS, ofrece menús CSS horizontales y también menús del tipo vertical. El usuario simplemente necesitará realizar tres sencillos pasos para poder construir sus menús CSS.

Enlace de descarga: PureCSSMenu

IzzyMenu : es una aplicación web desarrollada en Ajax que nos permite crear menus css de una manera por demas sencilla. Tiene una lista de diseños predefinidos entre los cuales hay unos muy buenos y que de seguro te serviran para tus diseños y desarrollos web.
Podemos escoger entre crear un menú horizontal y un menú vertical, asi como configurar el tamaño de fuente, el estilo de fuente, color, color de fondo entre muchas otras opciones.

Enlace de descarga: IzzyMenu

CSSmenubuilder.com : Otra herramienta que además genera código bastante más “limpio”. Su galería de menús predefinidos en mucho más corta pero a cambio podemos modificarlos totalmente sin necesidad de tocar el código.
La única desventaja que le encuentro es que no podemos generar la estructura de enlaces desde la propia herramienta. Aunque tampoco es ningún drama pues la propia herramienta nos permite crearla a mano.

Enlace de descarga: CSSmenubuilder.com

Ahora veremos como crear nosotros mismos esto que nos generan estos programas de manera tan sencilla, obiamente tardaremos algo más, pero estoy seguro de que aprenderemos mucho más y lo mas importantes que el limite lo pone nuestra imaginación y no la cantidad de diseño que trae incorporado algun programa. jejejje estuve a punto de decir programa cutre.

Muchas veces, nuestras páginas tienen tantos contenidos que si quisiéramos que apareciesen todos estos en un determinado lugar de nuestra página, en un menú, este abarcaría casi la totalidad del espacio que tenemos para nuestra web. En estos casos es muy útil insertar uno o varios de estos menús desplegables, apareciendo por encima del propio contenido de la página para mostrar todas sus partes y desapareciendo posteriormente.

Preparamos el codigo CSS para las cajas del menu

Como pueden ver esta parte no es muy compleja aun que si un poco extensa.
Ahora los estilos para los enlaces y el submenu.

Ahora el HTML donde pondremos nuestro menu
Como puene ver en el codigo HTML se ha aplicado un hack para poder har funcional el menu en navegadores antiguos como IE6

Bueno espero vuestros comentarios y sugerencias como siempre.

Descarga del ejercicio: Archivos del Menu CSS (641)