Tutoriales

Vídeo tutoriales de PHP, CSS y Javascript

ByLuis February 20, 2007

Muy buena coleccion de vÃdeo tutoriales (screencasts) sobre desarrollo web y diseÃ±o, habiendo tutoriales sobre PHP, CSS y Javascript. Aunque estÃ¡n realizados en inglÃ©s, se entiende bastante bien, y si sumamos el hecho de que se explica paso a paso y lo ves todo en el video, hace que se puedan seguir los vÃdeos con facilidad.

Entre los vÃdeos que se puede destacar encontramos cÃ³mo usar posicionamiento relativo y absoluto en CSS, paginaciÃ³n en PHP y muchos mÃ¡s que son bastante interesantes.
The Blog of Jonathan Sampson
VÃa / dzone / Windows Skills

css | Tutoriales

Floatutorial

ByLuis June 15, 2006

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

Javascript | Tutoriales

Laboratorio: evitar el scroll en los textarea con jQuery

ByLuis July 20, 2009

Una cosa que he visto en una web que estoy usando y que me ha gustado bastante es que el alto de los textarea se adapta al contenido para evitar que aparezca el scroll vertical.

En plan rapidito he hecho un script jQuery que realizaría esta función:

$(document).ready(function () {
$('textarea').keypress(function() {
var ta = $(this);
var fontSize = ta.css('font-size').replace('px', '')*1.3; // Le añado un ratio para que sea más eficiente
var taWidth = ta.width();
var taHeight = ta.height();
var content = ta.attr('value').split('\n');
var lines = content.length;
for (var i=0; i<content.length; i++) {
if (content[i].length * fontSize > taWidth) lines += parseInt(content[i].length * fontSize / taWidth);
}
var ratioHeight = taHeight / fontSize;
if (lines * fontSize > taHeight) ta.height((lines * fontSize)+150); // Le sumo 150 para darle un margen y que no se agrande constantemente
});
});

Tutoriales

Más de 300 páginas de algoritmos a tu alcance

ByLuis December 12, 2006

En alguna ocasiÃ³n, cuando estamos desarrollando una aplicaciÃ³n web, necesitamos recurrir a los apuntes de la universidad para recordar como realizar un algoritmo para una acciÃ³n en particular (ordenar una lista, por ejemplo).
Si eres de los que no guardan tus apuntes, puede que este e-book te venga bastante bien, porque recopila algoritmos para nÃºmeros, de divide y vencerÃ¡s, programaciÃ³n dinÃ¡mica, programaciÃ³n linear y muchos mÃ¡s encontrados en mÃ¡s de 300 pÃ¡ginas.
Algorithms
VÃa / SitePoint

AJAX | Tutoriales

Escritorio AJAX estilo Netvibes

ByLuis June 27, 2006

Interesante y extenso tutorial sobre cÃ³mo realizar un escritorio AJAX del estilo Netvibes. El escritorio del ejemplo consta de una barra de accesos directos y de widgets (ventanas que muestran informaciÃ³n).

El tutorial explica varios temas distintos, que juntos hacen posible el escritorio AJAX:

CÃ³mo detectar IE/Firefox correctamente: no sÃ© si es la forma mÃ¡s correcta de hacerlo, pero estÃ¡ claro que funciona, al menos solo cuando quieres detectar Firefox e IE, no sÃ© que pasarÃ¡ con otros navegadores como Safari y Opera. Hay que tener en cuenta que el autor solo se ha centrado en estos navegadores.
QuÃ© es el DOM y cÃ³mo manipularlo mediante Javascript: la explicaciÃ³n grÃ¡fica me parece muy clara, y la forma de obtener los distintos nodos, aunque ya puestos, la creaciÃ³n de nuevos nodos tambiÃ©n la habrÃa explicado mediante el DOM y no sÃ³lo mediante innerHTML.
CÃ³mo crear widgets dinÃ¡micamente mediante el DOM: los amigos de las tablas estarÃ¡n en la gloria, para el resto, una tila para calmar los nervios.
CÃ³mo capturar y usar eventos del ratÃ³n: lo mismo de siempre, el problema en IE y Mozilla, IE tiene el objeto event y Mozilla lo pasa como parÃ¡metro.
CÃ³mo desplazar widgets: yo prefiero meter los eventos onmousemove, onmouseup y onmousedown directamente en el body y no capturarlo mediante Javascript, si se les pasa a la funciÃ³n el objeto event, funcionarÃ¡ tanto para IE como para Mozilla y no habrÃ¡ que estar chequeando cual es el navegador.
CÃ³mo manipular el orden en profundidad de los widgets: uso del zIndex.
IntroducciÃ³n a AJAX y JSON: una breve explicaciÃ³n de AJAX y JSON.
CÃ³mo cargar feeds en los widgets: explica cÃ³mo se usa una API especÃfica para ello.
CÃ³mo crear widgets para bÃºsquedas: tambien mediante una API.
Recursos para leer: sobre AJAX, JSON, DOM, eventos y Javascript. Una buena recopilaciÃ³n.

AJAX Desktop Tutorial

VÃa / Pixel Groovy

Grafismo | Tutoriales

Crear botones de suscripción con Photoshop

ByLuis March 30, 2006

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
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
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.

Tutoriales

Guía rápida para desarrollar en Android: Hello World

ByLuis November 14, 2007

Para aquellos que aÃºn no lo sepan, Android es un conjunto de software para dispositivos mÃ³viles: sistema operativo, middleware y aplicaciones key mobile.

Tiene toda la pinta de que va a tener mucho Ã©xito, quizÃ¡s porque estÃ¡ realizado por Google, quizÃ¡s porque los miembros de la alianza son muy importantes, quizÃ¡s porque es open source, quizÃ¡s porque es sencillo o quizÃ¡s porque estamos hasta el gorro de Windows. Sea lo que sea, merece la pena empezar a desarrollar aplicaciones para Android, y si los motivos anteriores o el desarrollo como profesional no te estimula, quizÃ¡s los 10 millones de dÃ³lares que ofrecen a la mejor aplicaciÃ³n si te puedan interesar.

Pues venga, a ponerse a picar que los pisos estÃ¡n muy caros.

Empezar a desarrollar para Android es muy sencillo, tan solo tienes que tener el SDK de Android, tener instalado Eclipse, por ejemplo la versiÃ³n Classic y aÃ±adir un plugin para Eclipse que ofrecen, para lo cual hay que:

En Eclipse ir a Help > Software Updates > Find and Install.
Seleccionar Search for new features to install y pinchar en Next.
Seleccionar New Remote Site.
AÃ±adir esta URL: https://dl-ssl.google.com/android/eclipse/.
Selecionar Android Plugin > Eclipse Integration > Android Development Tools.

Una vez instalado el plugin, debemos indicar la ruta del SDK, para lo cual iremos a Window > Preferences y en la opciÃ³n de Android modificaremos la ruta del SDK.

Ya lo tenemos todo listo, ahora solo nos falta crear un nuevo proyecto Android (File > New > Project) y modificar el cÃ³digo base que nos ofrece.

En el ejemplo que vamos a hacer tan solo escribiremos una frase en el terminal, para lo cual editaremos el fichero principal del proyecto, en mi caso como he llamado al proyecto prueba el fichero es prueba.java:

package com.sentidoweb;
import android.app.Activity;
import android.widget.TextView;
import android.os.Bundle;
public class prueba extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
    TextView tv = new TextView(this);
tv.setText("Sentido Web");
setContentView(tv);
  }
}

Como vÃ©is el ejemplo se ejecuta en un emulador de Android, si jugÃ¡is un poco con este emulador podrÃ©is daros cuenta de las posibilidades que ofrece.

Similar Posts