10Jun 2009 61 Comments */?>

Añadir campos a un formulario dinámicamente con JQuery

Categorías: JQuery, Tutoriales - Tags: ,

formulario_dinamico

En uno de mis ultimos proyectos tuve la necesidad de crear un formulario donde el cliente pudiera añadir campos de texto a medida que lo fuera necesitando, y a su vez quitarlos si ya no le eran necesarios.

Esto se puede realizar de una forma muy sencilla con JQuery. Suponiendo que tenemos el siguiente código HTML

<div id="stylized" class="myform" style="margin:20px auto;">
<form id="form" name="form" method="post" action="index.php">
 
<div id="material_comprado"  > </div>  
 
<h1>Compra de material</h1>
<p>Si es necesario a&ntilde;ade el material a comprar</p>
<div id="div_1">
<label>Material de compra
<span class="small">A&ntilde;ade los materiales</span>
</label>
 
    <input  type="text"  name="materiales[]" id="materiales1" style="width:200px;" /> <span style="float:left;padding: 8px 0px 8px 8px;">Cantidad:</span> <input type="text"   name="cantidadmateriales[]"  style="width:40px;" /><input class="bt_plus" id="1" type="button" value="+" /><div class="error_form"></div>
</div>
 
 
 
 
<button type="submit" class="boton">Save</button>
<div class="spacer"></div>
</form>
</div>

Con este código y añadiendole un poco de estilo tendriamos un pequeño formulario como el que muestra la imagen.

Ahora solo queda añadir unas cuantas lineas de JQuery para que funciones:

$(document).ready(function() {
	//ACA le asigno el evento click a cada boton de la clase bt_plus y llamo a la funcion addField
		$(".bt_plus").each(function (el){
			$(this).bind("click",addField);
									 });
							});
 
 
function addField(){
// ID del elemento div quitandole la palabra "div_" de delante. Pasi asi poder aumentar el número. Esta parte no es necesaria pero yo la utilizaba ya que cada campo de mi formulario tenia un autosuggest , así que dejo como seria por si a alguien le hace falta.
 
var clickID = parseInt($(this).parent('div').attr('id').replace('div_',''));
 
// Genero el nuevo numero id
var newID = (clickID+1);
 
// Creo un clon del elemento div que contiene los campos de texto
$newClone = $('#div_'+clickID).clone(true);
 
//Le asigno el nuevo numero id
$newClone.attr("id",'div_'+newID);
 
//Asigno nuevo id al primer campo input dentro del div y le borro cualquier valor que tenga asi no copia lo ultimo que hayas escrito.(igual que antes no es necesario tener un id)
$newClone.children("input").eq(0).attr("id",'materiales'+newID).val('');
 
//Borro el valor del segundo campo input(este caso es el campo de cantidad)
$newClone.children("input").eq(1).val('');
 
//Asigno nuevo id al boton
$newClone.children("input").eq(2).attr("id",newID)
 
//Inserto el div clonado y modificado despues del div original
$newClone.insertAfter($('#div_'+clickID));
 
//Cambio el signo "+" por el signo "-" y le quito el evento addfield
$("#"+clickID).val('-').unbind("click",addField);
 
//Ahora le asigno el evento delRow para que borre la fial en caso de hacer click
$("#"+clickID).bind("click",delRow);					
 
}
 
 
function delRow() {
// Funcion que destruye el elemento actual una vez echo el click
$(this).parent('div').remove();
 
}

Como siempre debemos añadir la ultima version de JQuery y luego nuestro script.

<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.addfield.js"></script>

Este mismo ejemplo se puede aplicar en cualquier otro lado, solo es cuestion de jugar un poco. Espero que les haya gustado. Saludoss

Ejemplo Online
Descargar Ejemplo

08Jun 2009 7 Comments */?>

CSS: Estructura Vs Semántica . Como nombrar las diferentes partes de mi web

Categorías: Tutoriales - Tags: ,

En mi último artículo comente como optimizar los archivos CSS de forma que queden organizados estructuralmente, facilitando así el mantenimiento y lectura de los mismos.

Hoy lo que voy a exponer es algo que la verdad se debería aprender antes, pero como dicen algunos, más vale tarde que nunca.

Básicamente nombrar los elementos de una web de forma semántica siginifca nombrarlos por su significado como pueden ser main (contenido principal) o sidebar (barra lateral), en cambio hacerlo de una forma estructural sería llamar a cada cosa por su nombre como por ejemplo right-bar (barra derecha) o left-content (contenido de la izquierda)

Imágenes obtenidas de http://woork.blogspot.com

Imágenes obtenidas de http://woork.blogspot.com

Ahora imaginá por un momento que tenés que cambiar la orientación de la web bien porque no queda bien o porque tu cliente prefiere la barra del otro lado etc. Con el método estructural tendrias que cambiar todos los nombres para que siga teniendo la coherencia que tenía al principio ya que sino quedaría invertido. En cambio con el método semántico todo seguiría en su sitio.

Imágenes obtenidas de http://woork.blogspot.com

Imágenes obtenidas de http://woork.blogspot.com

En conclución si elegimos los nombres de los elementos de una forma semántica no tendremos que preocuparnos en cambiar todos los nombres cada vez que modifiquemos el diseño, sino simplemente cambiar las propiedades que nos hagan falta.

Puntos a tener en cuenta…..

1. Es conveniente usar minúsculas y separar las palabras mediante “-” o mayúsculas. Por ejemplo main-content o mainContent.

2. Optimizar tu código CSS creando solo los elementos principales que necesites y reutilizando las etiquetas HTML para los nodos hijos. Por ejemplo en vez de:

1
2
3
4
<div class="main">
     <div class="main-title">...</div>
     <div class="main-paragraph">...</div>
</div>

Usar :

1
2
3
4
<div class="main">
     <h1>...</h1>
     <p>...</p>
</div>

Con esto mantemos el código HTML más sencillo sin perder la opción de cambiar los atributos desde CSS.

Algunos ejemplos de como nombrar semánticamente los elementos

Por ejemplo es un diseño de 3 columnas podriamos hacerlo de la siguiente manera:
sem

Otra formas de llamar a los elementos y que vas a encontrar a menudo por ahi son:

1.Container

El container o contenedor se utilizar para encajar nuestra web dentro. En ingles esto se dice “wrap” por lo que es my posible que tambien lo encuentres con ese nombre o el de “wrapper”.

2. Header

Es la parte superior de la web , donde se suele encontrar el logo  de la misma. Se suele llamar “top”, “logo” , o simplemente “top-header”.

3. Navbar

Es el menu de navegación que suele encontrarse en la parte superior. Los nombres más comunes son “navbar”, “nav”, “navigation”, “nav-wrapper”.

4. Menu

Es la parte donde se encuentran los links generales o algun menu. Se suele llamar “menu”, “links”, “sub-nav”.

5. Main

Contenido principal de la web. Los nombres más comunes son “main-content”, “content” o “main”.

6. Sidebar

El sidebar es utilizado para contenido secundario como por ejemplo las últimas entradas, espacio publicitario, información del sitio …etc. Por lo que su nombre puede variar como “sidebar”, “sub-nav”, “side-panel”, “secondary-content”, etc.

7. Footer

El pie de página suele ser la parte donde ponemos el copyright de la web, quien la diseño , etc. Por lo general siempre lo vas a encontrar como “footer” o “copyright”.

Hay miles de formas más para llamar a los diferentes elementos de forma semántica. Si se les ocurre alguno , simplemente dejenlo en los comentarios.

Para los que quieran indagar un poco más sobre este tema hay un monton de artículos sobre el (en ingles):

1. More on developing naming conventions, Microformats and HTML5
2. Standardizing CSS class and id names
3. User interfaces and CSS Naming convention
4. Structural naming
5. Smart CSS Ain’t Always Sexy CSS
6. Semantic coding
7. Semantic naming conventions for HTML and CSS
8. What’s in a name (pt1)
9. What’s in a name (pt2)
10. Most popular naming conventions
11. Semantic and Structural aspects of HTML

Un saludo a todos!!

|Via WorkUp

07Jun 2009 3 Comments */?>

Optimizar tus archivos CSS para que sean de facil lectura

Categorías: Tutoriales - Tags:

Algunos de los lectores me escribieron acerca de como sería la forma correcta de escribir código CSS limpio , prolijo y ordenado de forma que sea más facil a la hora de hacer modificaciones o simplemente añadir funcionalidades.
De más cabe decir que todo lo que voy a exponer a continuación es simplemente mi punto de vista y la forma que suelo tener para trabajar en mis proyectos. Con esto quiero decir que según el tamaño y complejidad de nuestro sitio nos puede servir más o menos.

estructura

Partiendo de la estructura típica de una página web los pasos a seguir suelen ser:

1.- Definir los elementos de la página:

Al principio del archivo CSS suelo definir los diferentes elementos en común de la página como el body , a , h1, etc.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
/* ------------------------------- */
/* HTML Elements
/* ------------------------------- */
html {font-family:arial, verdana, sans serif; font-size:13px;}
a:link, a:visited{color:#0033CC;}
a:hover{color:#003366;}
h1, h2, h3, h4, h5, h6,
form, input, text-area{
border:0; padding:0; margin:0;
font-family:arial, verdana, sans serif;}
h1{font-size:24px; color:#000000;}
h2{font-size:18px; color:#666666;}
...

2.- Diferenciar las secciones de la página:

Algo que me ayuda a mantener el order es diferenciar las diferentes secciones mediante el uso de comentarios.

1
2
3
4
5
6
7
8
9
10
11
12
13
#container{...}
/*---- Top section ----*/
#header{...}
#navbar{...}
 
/*---- Contenido Principal ----*/
#menu{...}
#main{...}
           /*---- Barra lateral ----*/
            #sidebar{...}
 
/*---- Footer ----*/
#footer{...}

3.- Usar la tabulación

Para que el código quede más legible es bueno usar el tabulador. Por ejemplo si un elemento solo tiene 3 propiedades lo ponemos en la misma lista, en cambio si posee más atributos lo hacemos en diferentes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#topbar{width:auto; display:block; height:60px;}
#navbar{width:auto; display:block; height:30px;}
          #navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;}
          #navbar a{color:#FFFFFF; font-weight:bold;}
          #navbar a:hover{background:#777777;}
          #navbar li a:link,
          #navbar li a:visited {
                    background:#444444;
                    text-decoration:none;
                    height:30px;
                    line-height:24px;
                    display:inline;
                    float:left;
                    width:auto;
                    padding:0px 10px;}
 
#main{width:auto; display:block;}

4.- Definir clases en comun

Al final de el archivo CSS suelo declarar las clases que hay en comun como por ej:

1
2
3
.small{font-size:11px;}
.underline{text-decoration:underline;}
div.spacer{clear:both; height:15px; display:block;}

Como mencione anteriormente estas más que reglas son apreciaciones personales que fui añadiendo con el tiempo a mi trabajo. Sobre todo viendo la forma de trabajar de otros y leyendo alguna que otra guia por internet.

Cuando el proyecto que tengo es más grande suelo utilizar multiples archivos CSS , por lo general tengo el default.css que lleva las reglas generales, y otros que voy enlazando segun la página que sea.

Espero que les haya servido de ayuda. En el próximo voy a hablar sobre la forma de nombrar a los diferentes elementos de una web de una forma más semántica.

26May 2009 27 Comments */?>

Acentos y caracteres especiales con Ajax y JQuery

Categorías: JQuery - Tags: ,

Unos de mis primeros problemas al usar jquery.forms o $.Ajax era que los acentos ,la ñ , etc no eran ingresados correctamente en la base de datos y por lo tanto no se mostraban correctamente en mis programas y por lo general aparecian como cuadraditos o rombos negros con un signo de interrogación adentro.
Algunos de los caracteres afectados:

á, é, í, ó, ú ,Á, É, Í, Ó, Ú, ñ, Ñ ,º ,ö, Ö, ü, Ü

Una forma simple para solucionar esto es hacer lo siguiente:

En el formulario agregar accept-charset=”utf-8

1
2
3
<form id="formulario" action="index.php" accept-charset="utf-8" method="post">
<input type="input" name="nombre"/>
</form>

Y a la hora de recibir el dato ya sea mediante $_POST o $_GET tenemos que hacer un utf8_decode() y ya estará listo el valor para ingresar en la base de datos.

1
$usuario=utf8_decode($_POST['nombre`]);

Con este método JQuery ya no me da problemas con los caracteres especiales. Saludos!!!

UPDATE: SEGUNDA PARTE

26May 2009 0 Comments */?>

Puntitos identificadores para cables

Categorías: Gadgets - Tags: , , ,

dotz-identifier

Quien no se encontró tirado abajo de la mesa con 20 cables diferentes y no poder adivinar cual es cual? Bueno, en Dotz tienen alguna que otra solución que nos puede servir. Como por ejemplo estos puntos identificadores que se enganchan en la punta de los cables permitiendonos así saber a que pertenecen.  Solo cuestan 10$ y traen 10 puntos + 24 íconos intercambiables + 10 en blanco para que pongas tu propio diseño. Un precio más que razonable diria yo.

26May 2009 0 Comments */?>

Más de 450 íconos gratis para tus diseños

Categorías: Recursos - Tags: ,

De la mano de Smashing Magazine me llega este impresionante pack con más de 450 íconos. El diseñador Oliver Twardowski , originario de Bonn, Alemania, es el encargado de esta fabulosa colección. Todos los íconos vienen en una resolución de 48×48 y formato png.

Siempre viene bien tener un pack como este , nunca se sabe que vamos a necesitar (sisi tengo como una especie de diógenes digital y guardo todo :P)

icons-preview

Links de descarga:

25May 2009 67 Comments */?>

Paginación con PHP y MySQL + 3 estilos

Categorías: MySQL, PHP, Tutoriales - Tags: , , ,

En este tutorial les voy a enseñar el método que utilizo para hacer paginación en mis diseños.Pero para empezar ¿A que se le llama paginación? Esto es simplemente el índice que aparece abajo del todo que algunas veces contiene números y otras no, y nos sirve para cambiar de página. Es muy útil cuando tenemos muchos datos para mostrar y ya resulta feo que aparezca todo en la misma página.
Seguir leyendo