|

Crear botones de suscripción con Photoshop

ByLuis

Puede que alguna vez te hayas preguntado cómo hacer uno de esos “minibotones” que aparecen en algunos sitios indicando la suscripción RSS, pues es tan sencillo como dar tres pasos en photoshop.
Creamos un archivo nuevo de las dimensiones deseadas, yo para el ejemplo uso una imagen de 22 pixels de ancho por 11 de alto.
Elegimos los colores que vamos a usar, en este caso he escogido dos tonos de naranja, #E39207 y #FFAE00
Seleccionando el color más oscuro, trazamos un borde de 1px de ancho por toda la imagen, seguidamente seleccionamos la herramienta de borrado y quitamos 1px de cada esquina dejando una imagen como esta border-rss-01.gif
El siguiente paso será hacer una selección de toda la parte interior del recuadro y realizar un degradado desde el extremo superior de la imagen hasta el extremo inferior gradient-rss-01.gif
Solo nos queda añadir el texto, lo hemos hecho píxel a píxel, y tendremos un atractivo botón para decorar nuestra web. button-rss-01.gif

Similar Posts

|

15 tutoriales de PHP para principiantes

ByLuis

PHPZend, los creadores de PHP, han desarrollado 15 tutoriales de PHP para principiantes, bueno, y para quienes no lo somos, que siempre vienen bien.

La verdad es que los nombres de los títulos de los tutoriales son poco descriptivos, por eso, para quien lo necesite, vamos a indicar el contenido de estos:

  • Fundamentos de PHP: crear un ‘Hola Mundo’, comentarios, variables, tipos, … Lo más básico y necesario de PHP.
  • Parámetros de entrada y condicionales: cómo se reciben los datos que nos llegan desde la URL y el uso de comparaciones e instrucciones condicionales.
  • Bucles y más condiciones: Bucles (for, while, …) y cómo comprobar si una variable está definida.
  • Arrays: tratamiento de arrays, incluyendo el foreach.
  • Ficheros: abrir, leer, escribir en ficheros.
  • Funciones: uso de funciones, sus parámetros de entrada y variables globales.
  • Clases: todo lo necesario para la programación orientada a objetos mediante PHP.
  • MYSQL: acceso a base de datos MYSQL, imprescindible si quieres realizar alguna aplicación web.
  • SQLite: otra base de datos.
  • Sesiones: tratamiento de sesiones y coockies.
  • XML: tratamiento de XML, solo para PHP5, en PHP4 también se pueden tratar.
  • Tratamiento de errores: si vas a realizar una aplicación, gasta bastante tiempo en el tratamiento de errores, algo para mí fundamental.
  • Principios de seguridad: validación de los campos de entrada, sobre todo para cuestiones de BD.
  • Nuestra primera aplicación web: una vez conocido todo lo anterior, ya estamos preparados para hacer nuestra primera aplicación web.
  • Agregador RSS: creación de un pequeño agregador RSS.

PHP Tutorials for Absolute Beginners

Vía / DZone

|

Floatutorial

ByLuis

Un impresionante tutorial que nos va enseñando paso a paso como posicionar elementos HTML con float y clear. Nos enseña con ejemplos:

  • Información general, definición de conceptos, explicación de float y clear.
  • Posicionamiento de una imagen a la derecha, añadiéndole márgenes y bordes.
  • Posicionamiento de la imagen y su pie de foto, aplicando bordes.
  • Crear thumbnails.
  • Usar listas de elementos para crear botones “Anterior” – “Siguiente”.
  • Usar listas de elementos para crear pestañas.
  • Crear efecto de letra inicial de párrafo de tamaño superior al resto.
  • Estilo de dos columnas.
  • Estilo de tres columnas.

Floatutorial

Vía / Dzone

|

Métodos mágicos en PHP 5

ByLuis

Ya he comentado alguna vez el peligro de no estar a la última de las novedades que salen en un lenguaje de programación. En este caso voy a hablar de PHP5. La nueva versión nos ofrece una serie de métodos que el autor define como “mágicos”, supongo que por el hecho de que nos pueden dar una funcionalidad un tanto especial.

  • __construct: se utiliza para la construcción de objetos, logicamente este si es conocido si te has informado sobre las novedades de PHP5 referente a objetos.
  • __toString: controla lo que devuelve el objeto cuando se transforma en una cadena de texto, por ejemplo cuando hacemos un echo. Puede sernos muy util sobre todo para las trazas.
  • __clone: muy usado en Java, nos permite controlar la clonación de un objeto. Aunque no lo parezca, puede ser muy útil.
  • __set_state: devuelve la llamada a la función var_export(), así cuando queremos exportar un objeto, devolvemos el código PHP válido que deseamos. En esta es en la función que más se detiene el autor del artículo y merece la pena echarle un vistazo a fondo.

The Magic __set_state Method

Vía / Good PHP Tutorials

| |

Elemento CANVAS en HTML

ByLuis

CANVAS es un elemento no estándar que permite dibujar gráficos directamente sobre el HTML. Inicialmente lo implementó Apple para Safari, pero ahora es WHATWG quien se encarga de su estandarización.

Al no ser un estándar, se han levantado voces en contra de ello, sobre todo existiendo el SVG que realizaría la misma función. La cuestión sobre cual es más correcto, si el SVG o CANVAS, es algo de lo que ya se ha tratado y aunque en ambos casos se puede hacer lo mismo, parece que el SVG gana por ser un estándar y sobre todo cuando se quiere que haya interacción con el usuario, aunque CANVAS sea más útil a la hora de dibujar.

Más información

Ejemplos

Encontrar un color para el diseño

ByLuis

Al menos a mí me ocurre que cuando estoy empezando con un diseño, y tengo que basarme en una imagen, me paso bastante tiempo buscando los colores que vayan con la imagen. Normalmente uso un editor de imágenes, realizo la pixelación de la imagen y voy buscando que los colores sean representativos. Esto puede ser sencillo con esta rápida y cómoda aplicación on line, que nos permite enviar una imagen, seleccionar el tamaño de los cuadrados de la pixelación y ver qué códigos tienen los colores. También se podría usar la entrada que explicamos sobre fondo de pantalla calculado de una imagen, pero esta opción nos permite optar a varios colores.
color-pallete.png
Color Palette Generator
Vía / Maestros del Web

QuickRef: referencias para programadores

ByLuis

No todo es Google, y aunque siempre tenemos nuestras páginas favoritas para buscar documentación sobre los lenguajes de programación que usamos, no viene nada mal un lugar donde reune los sitios donde obtener la documentación que necesitamos.
quickref.png
Por ahora tienen referencia a los siguientes lenguajes: CSS, HTML, JavaScript, MySQL, Perl, PHP, y Ruby.
El diseño no atrae demasiado, pero funciona muy bien y muy rápido (gracias al uso de AJAX). Creo que lo visitaré con bastante frecuencia y espero que vaya aumentando poco a poco.
QuickRef.org
Vía / Digg