Posts Tagged: HTML

Febrero 24th, 2010

Comprimir nuestro HTML

WordPress, por defecto, envía al ordenador del usuario nuestro site en HTML descomprimido. Es decir, tal cual, de modo que el navegador de nuestros visitantes debe realizar algo más de trabajo que si nuestro HTML estuviera totalmente compactado.

Usando zlib, una librería nativa de PHP, podremos comprimir los archivos que enviemos de forma notable y con ello dar más potencia y rapidez a nuestro site.

Para ello, vamos primero a hacer un test y comprobar que nuestro servidor tiene instalado el módulo de zlib para nosotros: creamos un archivo llamado index.php y pegamos en él lo siguiente:

<? php phpinfo (); ?>

Recordemos quitar el espacio en la apertura del php, añadido aquí a efectos de muestra. Luego lo subimos a una nueva carpeta en nuestro host llamada /test-zlib, y apuntamos nuestro navegador hasta dicho archivo, para ver si nuestra configuración tiene disponible zlib o no.

Si es el caso, iremos al header.php de nuestro tema en uso y pegaremos, antes del DOCTYPE (inicio del HTML), lo siguiente :

<? php
ini_set ('zlib.output_compression', 'On') ;
ini_set ('zlib.output_compression_level', '1') ;
?>

Guardamos y regresamos a nuestro site. Ahora deberíamos poder disfrutar de nuestro HTML ‘comprimido’ de más rápida carga.

Si queréis verificar con detalle cuánto ancho de banda nos ahorra este truco, podréis hacer la comparación por ejemplo en: http://www.port80software.com

Esperamos vuestros comentarios comentarios.

Febrero 24th, 2010

Comprimir nuestro HTML

WordPress, por defecto, envía al ordenador del usuario nuestro site en HTML descomprimido. Es decir, tal cual, de modo que el navegador de nuestros visitantes debe realizar algo más de trabajo que si nuestro HTML estuviera totalmente compactado.

Usando zlib, una librería nativa de PHP, podremos comprimir los archivos que enviemos de forma notable y con ello dar más potencia y rapidez a nuestro site.

Para ello, vamos primero a hacer un test y comprobar que nuestro servidor tiene instalado el módulo de zlib para nosotros: creamos un archivo llamado index.php y pegamos en él lo siguiente:

<? php phpinfo (); ?>

Recordemos quitar el espacio en la apertura del php, añadido aquí a efectos de muestra. Luego lo subimos a una nueva carpeta en nuestro host llamada /test-zlib, y apuntamos nuestro navegador hasta dicho archivo, para ver si nuestra configuración tiene disponible zlib o no.

Si es el caso, iremos al header.php de nuestro tema en uso y pegaremos, antes del DOCTYPE (inicio del HTML), lo siguiente :

<? php
ini_set ('zlib.output_compression', 'On') ;
ini_set ('zlib.output_compression_level', '1') ;
?>

Guardamos y regresamos a nuestro site. Ahora deberíamos poder disfrutar de nuestro HTML ‘comprimido’ de más rápida carga.

Si queréis verificar con detalle cuánto ancho de banda nos ahorra este truco, podréis hacer la comparación por ejemplo en: http://www.port80software.com

Esperamos vuestros comentarios comentarios.

Enero 27th, 2010

WordPress 2010

Si quieres ver el aspecto del que será el nuevo tema por defecto de WordPress, conocido como WordPress 2010, ya puedes seguir su desarrollo en el blog que irá mostrando sus cambios y evolución: 2010 Theme Development.

Personalmente me parece un acierto el aspecto claro, una tipografía mayor, los elementos HTML, el menú desplegable de páginas, el ancho mayor que Kubrick y el CSS utilizado para imágenes y la galería, no así la tipografía utilizada (serif) y, quizás, la excesiva altura de la cabecera.

Y a ti ¿que te parece?

Contenido exclusivo para suscriptores al Feed

¡Gracias por seguirnos a diario!. Premiamos tu fidelidad ofreciéndote habitualmente contenidos exclusivos. Hoy puedes descargar:

Clic aquí para iniciar la descarga Guía para Administrar Wordpress

¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Enero 11th, 2010

WP Smart Image II: mejorando la gestión de imágenes

Si no conoces WP Smart Image II estoy seguro de que te estás perdiendo, no solo un gran plugin creado por Darío Ferrer, sino muchas de las posibilidades que WordPress ofrece para la gestión adecuada de imágenes, pues se integra y mejora enormemente la funcionalidad de inserción de imágenes en tu sitio, aprovechando las funciones internas y vitaminando sus posibilidades.

Ya la primera versión del plugin era una maravilla, pero cuando Darío revisó su trabajo previo decidió remozar completamente el plugin y crear WP Smart Image II, convirtiéndolo en su razón de ser: un recurso imprescindible para el diseñador web, pero no solo para el diseñador sino para cualquiera que habitualmente utilice imágenes en su sitio creado con WordPress.

Es importante que sepas que WP Smart Imagen II viene a ser una sustitución de la función 'post_thumbnail', pero no solo la sustituye sino que la mejora. En esta entrada tienes la lista completa de funcionalidades frente a la función nativa de WordPress.

Tan comprometido está Darío con el proyecto que hasta ha creado un Wiki en el que documentar - incluso más allá de lo razonable - el uso y motivos de WP Smart Image II, otro motivo por el que merece la pena apoyar este proyecto, de un desarrollador hispano, de un amigo, de un compañero de comunidad que ayuda a que WordPress sea cada día mejor ¿no os parece?.

Y puede que te preguntes ¿como ayudar a este proyecto?, pues el mejor modo es usar el plugin en tus sitios, probarlo, informar a Darío de cualquier fallo que encuentres o mejora que se te ocurra, también puedes ayudar en el desarrollo, descargando las últimas versiones en su propio Trac.

Si aún no estás convencido de lo que aporta WP Smart Imagen II, aquí tienes sus virtudes …

Diseño y maquetación

  • Agregar atributos "width" y "height" mediante métodos CSS o HTML.
  • Personalizar los atributos "alt" y "title" de las imágenes en caso de que éstas no los tengan.
  • Elegir entre todos los tipos de tamaños predeterminados disponibles de Wordpress: Miniatura, Medio, Grande y Full. Adicionalmente puedes crear nuevos tamaños predeterminados con el plugin Max Image Size Control y manipularlos Fácilmente con WP Smart Image II.
  • Configurar y mostrar imágenes predeterminadas si la entrada no tiene una. También puedes optar por no usar imágenes predeterminadas.
  • Enlazar la imagen al artículo o versión full de la imagen (desde cualquier tamaño), o bien dejarla sin enlace.
  • Agregar un enlace hacia la versión Full de la imagen desde el tamaño Miniatura o cualquier tamaño.
  • Mostrar imágenes aleatorias por cada entrada (en lugar de sólo una).
  • Adaptar el tipo de etiqueta al DTD de tu sitio para una correcta validación W3C.

Desarrollo web

  • Elegir el tipo de salida de la función: echo o return.
  • Añadir clases e ID personalizados a las imágenes, a fin de procesarlas apropiadamente mediante CSS, javascript, PHP y otros recursos..
  • Obtener la URL de la imagen en lugar de la etiqueta completa.
  • Añadir y definir atributos a los enlaces, tales como "rel", "class", "id" y "target".
  • Separar los datos de las imágenes en piezas y mostrarlos individualmente (Alto, ancho, tipo de archivo, ID, etc).
  • Puedes poner a funcionar el plugin en el Modo PHP, ahorrándote así unos cuantos queries para tareas comunes del sistema.

Blogging

  • Elegir la imagen a mostrar a través de una amigable caja en tu editor de texto.
  • Mostrar miniaturas en feeds RSS.
  • Personalizar tamaños en feeds RSS.
  • Asignar títulos a las imágenes directamente de la caja de tu editor.
  • Elegir cualquier imagen de tu librería multimedia y asignarla al artículo, aún si dicha imagen no está vinculada a éste.

¿Aún te quedan dudas para darle una oportunidad al que puede ser el futuro en la gestión de imágenes en WordPress?. Luego no digas que no te he avisado.

Contenido exclusivo para suscriptores al Feed

¡Gracias por seguirnos a diario!. Premiamos tu fidelidad ofreciéndote habitualmente contenidos exclusivos. Hoy puedes descargar:

Clic aquí para iniciar la descarga Guía Domina tu Blog

¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Enero 11th, 2010

Insertar un archivo php / html en una página de WordPress

Hola a todos, este es mi primer post aquí en Ayuda WordPress, y quería comentarles que hace varios meses atrá que me inicié en wordpress y hace un par de semanas que me decidí a crear mis propios themes con algo de éxito; y en el diseño personalizado, quise poder cargar un archivo html guardado en mi theme para que muestre una página en html que había creado, ya que muchos tenemos el problema de que wordpress cambia el código y bueno he buscado por varios lugares con Google, pero no encontré nada que me pueda servir.

Hace poco aquí en Ayuda WordPress encontré un post de códigos para wordpress; y tomando como referencia uno que permitía rotar los header según la página, logré llamar x archivo php cuando accediera a la página x. Para ello, en el page.php de mi theme, después de:

 

PHP:
  1. <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Inserté el siguiente código:

 

PHP:
  1. <?php if (is_page(‘paginax’) ) { include (TEMPLATEPATH .’/paginax.php’); } ?>

Logrando así poder incluir una archivo externo. Si alguien tiene una mejor opción, espero su respuesta. Muchas gracias a todos y que Dios les bendiga.

¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Diciembre 3rd, 2009

Backup de WordPress

Secure Data

Bueno, ya sabemos que hay que hacer copia de seguridad con regularidad ¿no?. Lo que pasa es que hay veces que se nos olvida. Pero imagina que te cargas algo y no dispones de un backup reciente ¿a que duele?.

Principalmente, como hemos dicho en varias ocasiones, hay que hacer copia de seguridad – preferentemente – de dos cosas:

  • la base de datos, que es donde están las configuraciones y el contenido
  • la carpeta wp-content, donde están los plugins, los themes y los archivos que hayas subido.

Si dispones de acceso a phpMyAdmin en tu servidor puedes hacer backups muy fácilmente. PhpMyAdmin tiene una función de Exportar que hace copia de toda la base de datos, una tabla, lo que quieras.

Eso si, si tu base de datos es muy grande entonces deberías usar otra herramienta de backup, normalmente disponible en el lado del servidor, si tienes acceso a sistemas como CPanel o Plesk.

Por otro lado, para los más avanzados, puedes usar SSH, del que ya he hablado, y que una vez controlas facilita enormemente las copias de seguridad, y otras acciones.

Para hacer backup con SSH solo tienes que acceder con tus datos (normalmente los datos FTP), moverte en línea de comandos a la carpeta donde quieras hacer backup y, una vez ahí, ejecutar este comando:

mysqldump –opt -u dbuser -p dbname> dbname.sql

Con esto reemplazas el dbuser y dbname con el tuyo. Ahora solo queda comprimir el backup:

gzip -c dbname.sql>dbname.sql.gz

Una vez hecho esto ya queda menos, pero también puedes hacer los dos pasos anteriores en solo uno así:

mysqldump –opt -u dbuser -p dbname> dbname.sql | gzip > ficheroresultante.sql.gz

Ahora ya tienes hecho el backup de la base de datos. Si hiciste bien los pasos anteriores la tendrás en un zip y en SQL

Lo siguiente es comprimir la carpeta wp-content:

zip -r wp-content-backup-Dec-3.zip wp-content/

Esto pone todo lo que haya en wp-content dentro de un zip. El modificador '-r' es precisamente el que usamos para que “recoja” todas las subcarpetas.

Luego podemos subir el zip a la carpeta de backups, por ejemplo:

mv wp-content-backup-Dec-3.zip ../backups

Si hacemos esto de vez en cuando, y no te preocupes por los comandos, puedes copiarlos y pegarlos en la ventana de comandos, tendrás backup de tu sitio a buen recaudo.

¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Octubre 1st, 2009

La NASA promueve el uso de WordPress

nasa-wordpress

Me avisa nuestro amigo Héctor Russo de una interesantísima página, reflejo de la relevancia que ha adquirido WordPress, en la que la NASA, en concreto el NASA Glenn Research Center, para utilizar WordPress en los sitios del centro de investigación, usando la plantilla que han creado al efecto.

En este sitio especial dedicado a WordPress, además de posts con guías de uso tienen todo un arsenal de promoción de WordPress, como la lista de ejemplos de sitios creados o los beneficios de usar WordPress, un argumentario muy bien elaborado que no puedo menos que reproducir (abreviado):

  • Solo requiere un conocimiento básico de HTML. Si sabes usar Word sabes usar WordPress, aunque un poco de HTML siempre ayudará a aprovecharlo al máximo.
  • No necesitas más software, solo tu navegador. Si acaso un editor de fotos básico para crear o modificar tus imágenes antes de subirlas y, en casos concretos, un editor visual como Dreamweaver si quieres convertir tablas de Excel antes de cargarlas en WordPress (muy buena idea, por cierto).
  • Amigable para los motores de búsqueda: Los básicos de optimización para buscadores ya están incluidos en el sistema, incluyendo la generación automática de metas de títulos y descripciones, así como la capacidad de mejorar las meta tags en cualquier página sin tener que usar HTML.
  • Avisos a los buscadores: incluido en el sistema dispones de avisos del nuevo contenido a los principales buscadores mediante el uso de sitemaps XML (supongo que habrán incluido algún plugin ya).
  • Buscador integrado
  • Contenido separado del diseño, de manera que aunque se cambie el diseño del sitio tu contenido permanece inalterado, sin tener que rediseñar todo el sitio completo. Tu contenido está en una capa separada, por decirlo de alguna manera
  • Feeds RSS automáticos, para que los visitantes puedan suscribirse a tu contenido o incluso a los comentarios
  • Bajo coste, más bajo mantenimiento y con amplio soporte: Wordpress es un software open source ampliamente utilizado, y cuesta menos mantenerlo y mostrar a los usuarios como usarlo que el resto de CMS open source (ahí queda eso).

Hay más detalles, relativos a los plugins que han incluido. No me negarás que es una fuerte apuesta por WordPress ¿no?.

Si conoces algún ejemplo más de promoción de WordPress por parte de instituciones pon el enlace, será interesante hacer una lista para otro post ¿os parece?

Contenido exclusivo para suscriptores al Feed

¡Gracias por seguirnos a diario!. Premiamos tu fidelidad ofreciéndote habitualmente contenidos exclusivos. Hoy puedes descargar:

Clic aquí para iniciar la descarga Guía para Administrar Wordpress

¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Octubre 1st, 2009

Lista de tablas de ayuda rápida para diseñadores y desarrolladores

A través de WebDesignDev podemos encontrar una completa lista de tablas de ayuda rápida para lenguajes de programación, son páginas con trucos de referencia rápida para diseñadores web y desarrolladores. Esta lista es realmente completa incluye páginas de ayuda y trucos para Ruby, JAVA, Python, jQuery, PHP, CSS, HTML5, … y muchos más.

Aquí tenéis un resumen con sus enlaces para descargar:

vía: WebHostingSearch y WebDesignDev

Original Post / Entrada Original: Carrero.es. Si quieres Juegos Gratis disfruta aquí o decora tu casa.

Lista de tablas de ayuda rápida para diseñadores y desarrolladores

Septiembre 21st, 2009

Posts relacionados con imagen en miniatura

posts relacionados con miniatura

El fin de semana pasado estuve buscando opciones para mostrar una lista de posts relacionados en un sitio creado con WordPress, pero no al estilo habitual de lista de enlaces sino de manera que mostrara miniaturas de imágenes de los posts relacionados.

Y aunque hay muchos plugins y maneras de mostrar posts relacionados no hay tantos modos de hacerlo con imágenes, o al menos yo no lo he encontrado.

Curiosamente, lo primero que descubrí no es precisamente un sistema exclusivo para WordPress, pero ofrece un plugin para este CMS.

» LinkWithin

Este script está disponible para varias plataformas. Su uso es relativamente sencillo …

  1. Rellenas los datos de tu sitio en la web oficial
  2. Eliges la plataforma, por supuesto “WordPress (self hosted)”
  3. Si usas una plantilla de texto claro con fondo oscuro marcas la casilla correspondiente (por defecto entiende que tu plantilla usa un fondo claro)
  4. Haces clic en “Get widget”
  5. Descargas el plugin que te ofrece, personalizado para tu sitio
  6. Lo subes a tu WordPress desde ‘Plugins -> Añadir -> Subir
  7. Lo activas
  8. Configuras sus opciones
  9. Si no te gusta el sitio por defecto puedes añadirlo manualmente añadiendo este código: <div class="linkwithin_div"></div>
  10. No requiere campos personalizados, coge la primera imagen de los posts y las redimensiona

Me ha gustado:

  • Sencillo de usar y configurar
  • Multiplataforma
  • CSS por defecto bastante agradable

No me ha gustado:

  • Si no hay imágenes solo muestra texto
  • Sistema externo, requiere conexión al servidor de LinkWithin (visible) que retarda la carga
  • Cada vez que haces clic en un post relacionado se conecta con el servidor de LinkWithin
  • No está claro si en un futuro cobrarán por el servicio aunque dicen que será opcional

» Related posts with thumbnail

Solo funciona con versiones hasta WordPress 2.3 y el resultado no es muy halagueño. Actualmente hay opciones mejores.

Me ha gustado:

  • Sencillo de configurar
  • Disponible en el repositorio oficial de plugins

No me ha gustado:

  • No funciona en versiones superiores a WordPress 2.3
  • Almacena información en tablas de MySQL
  • Resultados inciertos, con feos errores en varios sitios donde lo he probado
  • Desarrollo abandonado

» Yet another related posts plugin

Uno de los mejores plugins de posts relacionados, desde la versión 3.0 con la posibilidad de uso de plantillas que pueden mejorar el aspecto de la presentación de posts relacionados.

Me ha gustado:

  • Multitud de opciones para personalizar el plugin
  • Disponible en el repositorio oficial de plugins
  • Ampliable mediante plantillas disponibles o que tu elabores

No me ha gustado:

  • La única plantilla disponible en la descarga oficial que ofrece miniaturas requiere el uso de campos personalizados
  • Tienes que subir manualmente las plantillas a la carpeta de tu theme

Aunque no está explícitamente pensado para posts relacionados con miniaturas de imagen puede añadirse esta funcionalidad con la plantilla “photo” y el uso de campos personalizados, u otra que tu elabores a partir de la plantilla de ejemplo.

» Display related posts with thumbnails

En realidad no es un plugin, sino un tutorial de como usar el plugin anterior (YARPP) para mostrar miniaturas de imagen. Para ello, Zach Dunn se vale de la posibilidad de creación de plantillas personalizadas de la versión 3.0 de YARPP para enseñarnos como crear una propia que consiga esta funcionalidad.

Si no te atreves puedes incluso descargar la versión del tutorial.

Me ha gustado:

  • Usa un plugin con buena salud de desarrollo
  • Te enseña a hacerlo en vez de hacerlo por ti
  • Puedes usar la plantilla como ejemplo y personalizarla a tu gusto

No me ha gustado:

  • Requiere el uso de campos personalizados. Si tu blog tiene muchas entradas es un trabajo ímprobo.
  • Tienes que subir manualmente la plantilla a la carpeta de tu theme

» Best related posts

Por último, sin demasiada confianza, me encontré con este pequeño plugin que, curiosamente hace muy bien su trabajo.

Me ha gustado:

  • Disponible en el repositorio oficial de plugins
  • Aspecto personalizable en la página de opciones mediante HTML simple
  • Hace bien su trabajo, sin fallos y con un consumo de recursos mínimo
  • Ofrece imagen en blanco para posts sin imagen
  • No requiere campos personalizados, coge la primera imagen de los posts y las redimensiona

No me ha gustado:

  • Hay que añadir manualmente el código <?php boposts_show(); ?> en donde quieras que aparezcan los posts relacionados con miniatura
  • Las miniaturas no son “cuadradas”, puedes definir el ancho fácilmente, eso si

Ante este elenco – suficiente pero no amplio – creo que hay, en mi opinión, dos opciones sencillas y totalmente recomendables.

Por un lado está LinkWithin que, a pesar de conectar con un servidor externo, por su capacidad multiplataforma y lo bien que funciona merece ser tenido en cuenta. Y por otro lado, por ser un plugin nativo, fácilmente personalizable, y lo bien que funciona, Best related posts, quizás la opción más segura aunque igual un poco menos vistosa que el anterior.

¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Septiembre 8th, 2009

Sin tiempo para escribir.17

Algunas referencias más que no me da tiempo a desarrollar y creo debéis conocer.

Sin tiempo para escribir.17

  • WordPress sin bases de datos. vía: Carrero
  • Mi libro de Productividad… de camino. vía: thinkWasabi
  • Algunos usuarios Twitter. vía: Emilio Marquéz
  • De WordPress a WPMU (tutorial). vía: mangas verdes
  • Más de 35 utilidades y plugins para conectar con Amazon S3 desde Windows, Mac o Linux. En inglés. vía: About Online Tips
  • Nokia X6. vía: Eduardo Collado
  • RSS Cloud, WordPress en ‘tiempo real’. vía: mangas verdes
  • Crea potentes aplicaciones móviles con HTML, CSS y jQuery. En inglés. vía: WebAppers
  • Adminer un rápido administrador de base de data MySQL. En inglés. vía: code-diesel
  • Los conductores samoanos ya conducen por la derecha. vía: microsiervos
  • Escuela 2.0: la herramienta debería ser lo de menos. vía: Error500
  • 12 Buenos Consejos para Hacer Fotos a tu Casa. vía: dZoom
  • Colección de recursos imprescindibles para WordPress. vía: TrazosWeb

Original Post / Entrada Original: Carrero.es. Si quieres Juegos Gratis disfruta aquí o decora tu casa.

Sin tiempo para escribir.17