• Curiosidades 18.12.2011 Comentarios desactivados

    Si buscas en google el termino “Let It Snow”, veras en tu pantalla un efecto muy navideño.

    Si quieres probar solo tienes que seguir este enlace: http://www.google.es/search?aq=f&sourceid=chrome&ie=UTF-8&q=Let+It+Snow

    Eso si, no se visualiza en internet Explorer 7 y 8, asi que a actualizarse toca si no quieres quedarte sin navidad.

     

    Pasalo ...

  • Geolocalización, Java Script 01.10.2011 Comentarios desactivados

    Últimamente estamos teniendo que recurrir a geolocalizar algun elemento en mapas de google maps, pero nos encontramos con el problema de que si son los usuarios los que tienen que ubicar la localización la tarea se dificulta para ellos, tendríamos tres opciones a programar.

    1. Que introduzcan ellos mismos las coordenadas (latitud y longitud). Esta opción  es totalmente desaconsejable por la dificultad que conlleva para la mayoría de los usuarios que no saben donde conseguirlas.
    2. Que introduzcan la dirección y luego programar que nos ubique la marca en el mapa. Buena opción aunque no siempre acierta google en localizar la dirección exacta.
    3. Mostrarle un mapa al usuario y que pinche donde se encuentre la ubicación que quiera localizar y recoger de esta acción las coordenadas.

    Bien, en este articulo vamos a ver la tercera opción, próximamente explicare la segunda que pienso que también es muy interesante.

    El primer paso es llamar a la libreria de google maps, y cargar el mapa.

    map = new GMap2(document.getElementById("mapa"));
    miIcono = new GIcon(G_DEFAULT_ICON);
    map.setCenter(new GLatLng(40.4,-3.8), 6);
    

    Luego creamos el evento que detectara el click sobre el mapa, que a su vez llama a la funcion addPunto()

    GEvent.addListener(map, "click", function (overlay,point){
        addPunto(point)
    });
    

    La función addPunto se encarga de situar en el sitio que hemos hecho click una marca.

    function addPunto(point){
    	if(point){
    	   map.clearOverlays();
               marker = new GMarker(point);
               map.addOverlay(marker);
    	   var lat= marker.getLatLng().lat();
    	   var lng= marker.getLatLng().lng();
    	}
    }
    

    Por ultimo observar como dentro de esta función recogemos las coordenas de longitud y latitud en las variables lng y lat para utilizarlas como nos convenga.

    Pasalo ...

  • JQuery 24.09.2011 Comentarios desactivados
    • Formas Ideal es un pequeño framework para construir formularios de forma fácil y resultona.
    • Es muy fácil de usar y solo requiere un  mínimo de sintaxis HTML.
    • Absolutamente todo está con estilos  CSS, no necesita imagenes.
    • Soporta  IE 7 +, Firefox 3 +, Chrome 3 +, Safari 3.1 y Opera + 11 +.
    • funciona con javascript inhabilitado.
    Pasalo ...

  • He adquirido un tablet con Android 3.0 y una de las gratas sorpresas que he descubierto es una aplicación donde poder publicar en blogs wordpress como este, esto creo que me ayudara a mantenerlo mas actualizado. Si quereis descargar la aplicación solo teneis que buscar en el market de android wordpress.

    Una vez instalada solo teneis que acceder con vuestro usuario y contraseña y activar la opcion de XML-RPC en el panel de control de vuestro blog y listo.

    Nota. Este apunte esta escrito desde mi tablet… dando ejemplo.

    Pasalo ...

    Tags:

  • JQuery 02.01.2011 Comentarios desactivados

    He tenido la necesidad de montar unas gráficas con estadísticas en el panel de control de una aplicación que estoy realizando en estos días. Para ello me puse a buscar y finalmente he encontrado una librería basada en JQuery llamada Highcharts.

    Me ha resultado bastante sencilla de implementar y los resultados son excelentes, aqui os describo como hacerla funcionar.

    En primer lugar como siempre que utilizamos jQuery o cualquier libreria JavaScript tenemos que hacer la referencia a ella en nuestro codigo html dentro del head.

    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/highcharts.js"></script>
    <script type="text/javascript" src="js/modules/exporting.js"></script>
    

    A continuación tenemos que configurar las estadísticas para ello disponemos de multitud de opciones, en el ejemplo mostrare alguna de ellas pero podéis encontrar todas las posibilidades que tenéis en la documentación de la librería.

    En este código configuro dos estadísticas distintas

    <script type="text/javascript">
    
    			var chart;
    			$(document).ready(function() {
    // ESTADÍSTICA 1
    				chart = new Highcharts.Chart({
    					chart: {
            // Aquí definimos el nombre del Div que contendrá la gráfica
    						renderTo: 'NUmeses',
            // Aquí el tipo de gráfica
    						defaultSeriesType: 'column'
    					},
    					title: {
           // Titulo
    						text: 'Nuevos usuarios por meses'
    					},
    					subtitle: {
           // Subtitulo
    						text: 'de Ejemplo'
    					},
    					xAxis: {
           // Categorias del eje X
    						categories: [
    							'1',
    							'2',
    							'3',
    							'4',
    							'5',
    							'6',
    							'7',
    							'8',
    							'9',
    							'10',
    							'11',
    							'12'
    						]
    					},
    					yAxis: {
          // En este caso no tiene valores pero configuro el titulo y el valor mínimo del eje
    						min: 0,
    						title: {
    							text: 'Visitas'
    						}
    					},
    
    					tooltip: {
         // Definimos el valor del tooltips, sustituimos 'visitas', por la medida que queramos
    						formatter: function() {
    							return ''+
    								this.x +': '+ this.y +' visitas';
    						}
    					},
    					plotOptions: {
         // Opciones de pintado. ver documentación
    						column: {
    							pointPadding: 0.2,
    							borderWidth: 0
    						}
    					},
    				        series: [{
        // Valores de las series
    						name: 'Usuarios mensuales',
    						data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    
    					}]
    				});
    // ESTADÍSTICA 2
    				chart = new Highcharts.Chart({
    					chart: {
    						renderTo: 'NUanos',
    						defaultSeriesType: 'column'
    					},
    					title: {
    						text: 'Nuevos usuarios por Año'
    					},
    					subtitle: {
    						text: ''
    					},
    					xAxis: {
    						categories: [
    							'2007',
    							'2008',
    							'2009',
    							'2010',
    							'2011'
    
    						]
    					},
    					yAxis: {
    						min: 0,
    						title: {
    							text: 'Visitas'
    						}
    					},
    
    					tooltip: {
    						formatter: function() {
    							return ''+
    								this.x +': '+ this.y +' visitas';
    						}
    					},
    					plotOptions: {
    						column: {
    							pointPadding: 0.2,
    							borderWidth: 0
    						}
    					},
       // Respecto a la gráfica anterior la única diferencia es que ponemos mas valores por categoría.
    				        series: [{
    
    						name: 'Usuarios Hombre',
    						data: [49.9, 71.5, 106.4, 129.2, 144.0]
    					},{
    						name: 'Usuarios Mujeres',
    						data: [34.9, 54.5, 156.4, 39.2, 74.0]
    					}
    					]
    				});
                             )};
    		</script>
    

    Por ultimo solo tenemos que poner el DIV para cada estadística identificándolo a través del ID en el ejemplo habíamos llamado a las estadísticas NUmeses y NUanos por lo que creamos dos DIV’s con estos nombres, en este caso en el propio DIV le pongo los estilos.

    
                    <div id="NUmeses" style="width: 450px; height: 300px; margin-left:10px; float:left"></div>
                    <div id="NUanos" style="width: 450px; height: 300px; margin-left:10px; float:left"></div>
    

    El resultado lo podéis ver aquí.

    Y aquí os podéis descargar el ejemplo completo con las librerías.

    Espero que os sea útil.

    Pasalo ...

  • JQuery 27.11.2010 Comentarios desactivados

    En algunas ocasiones intentamos crear un elemento desplegable que se dispare cuando pasamos el ratón por encima de el y se contraiga cuando salimos, en un principio podríamos utilizar los eventos mouseover y mouseout de jquery, estos van a funcionar bien mientras el elemento no contenga ningún elemento hijo, ya que en ese caso se producirán efectos no deseados como parpadeos o que se empiece a desplegar y contraer sin control.

    La solución para estos casos es muy sencilla aunque si no te lo dicen muchas veces te puedes volver loco buscando soluciones mucho mas complejas.

    NO UTILICES mouseover y mouseout, UTILIZA mouseenter y mouseleave.

    Facil no, pues me tire una hora buscando una solución hasta que me dio por probar otros eventos.

    Espero que encuentres este Post pronto y no pierdas tanto tiempo.

    Pasalo ...

  • Sin categoría 14.10.2010 Comentarios desactivados

    Vamos a ver como podemos validar un formulario utilizando una plugin de jQuery Para empezar como siempre que utilizamos una libreria JavaScript es enlazarla desde nuestro html.

    Para ello en la cabecera (head) escribimos el siguiente código:

    
    <script src="js/jquery.js" type="text/javascript"><!--mce:0--></script>
    <script src="js/jquery.validate.js" type="text/javascript"><!--mce:1--></script>
    

    A continuación montamos el formulario en html.

    <form id="signupForm" class="cmxform" method="get">
    <fieldset>
    <legend>Validación de un formulario utilizando jQuery</legend>
    
    	   <label for="firstname">Nombre</label>
    	   <input id="firstname" name="firstname" />
    
    	   <label for="lastname">Apellidos</label>
    	   <input id="lastname" name="lastname" />
    
    	   <label for="username">Nombre de Usuario</label>
    	   <input id="username" name="username" />
    
    	   <label for="password">Password</label>
    	   <input id="password" name="password" type="password" />
    
    	   <label for="confirm_password">Repite password</label>
    	   <input id="confirm_password" name="confirm_password" type="password" />
    
    	   <label for="email">Email</label>
    	   <input id="email" name="email" />
    
    	   <label for="age">Edad</label>
    	   <input id="age" name="age" />
    
               <label for="year">Año de nacimiento</label>
    	   <input id="year" name="year" />
    
    	   <label for="agree">Acepta las politicas de privacidad:</label>
    	   <input id="agree" class="checkbox" name="agree" type="checkbox" />
    
              <input class="submit" type="submit" value="Submit" /></fieldset>
    </form>

    Es importante que le pongamos una id a cada campo para identificarlo ya que ahora configuraremos las validaciones para este formulario y tendremos que hacer referencia a cada campo por medio de su id. Pongo las explicaciones en el código.

    $().ready(function() {
    	// Configuramos la validación de los distintos campos del formulario
    	$("#signupForm").validate({
    		// Empezamos por las reglas
    		rules: {
    			firstname: "required", // Para el campo firstname(nombre) pedimos que sea requerido.
    			lastname: "required",  // Lo mismo para el campo lastname.
    			username: { // Cuando hay mas de una regla abriremos llaves, aqui validamos username
    				required: true, // Tienes que ser requerido
    				minlength: 2    // Tiene que tener un tamaño mayor o igual a dos caracteres
    			},
    			password: {  // reglas para el campo password
    				required: true, // Tienes que ser requerido
    				minlength: 5    // Tiene que tener un tamaño mayor o igual a cinco caracteres
    			},
    			confirm_password: { // reglas para el campo confirm_password
    				required: true, // Tienes que ser requerido
    				minlength: 5,   // Tiene que tener un tamaño mayor o igual a cinco caracteres
    				equalTo: "#password"  // Tiene que ser igual que el campo password y para ello indicamos su id
    			},
    			email: {  // un nuevo caso es identificar que es un email valido osea que tiene formato de email
    				required: true,
    				email: true  // para ello el metodo email: true comprobara esta validación
    			},
    			age: {  // Otros ejemplos podrian ser valor minimo o valor maximo
    				required: true,
    				min: 18,  // determina el valor minimo
    				max:99    // determina el valor maximo
    			},
    			year: {  // Una cantidad entre un rango
    				required: true,
    				range: [1911, 1992]  // Aqui indico que no puede ser menor de 1911 ni mayor de 1992
    			},
    			agree: "required"  // Este input es de typo checkbox si quiero que sea obligatorio marcarlo le doy el valor required
    		},
    		messages: { // La segunda parte es configurar los mensajes, por lo que tengo que ir indicando para cada campo y cada regla el mensaje que quiero mostrar si no se cumple.
    			firstname: "Por favor, introduzca su Nombre",
    			lastname: "Por favor, introduzca sus Apellidos",
    			username: {
    				required: "Por favor, introduzca su Nombre de Usuario",
    				minlength: "El Nombre de usuario debe de tener al menos 2 caracteres"
    			},
    			password: {
    				required: "Por favor, introduzca su password",
    				minlength: "Su password debe de tener al menos 5 caracteres"
    			},
    			confirm_password: {
    				required: "Por favor, introduzca de nuevo su password",
    				minlength: "Su password debe de tener al menos 5 caracteres",
    				equalTo: "Las password introducidas no son iguales"
    			},
    			email: "Por favor, introduzca un email valido",
    			age: {
    				required: "Por favor, introduzca su edad",
    				min: "La edad no puede ser menor de 18 años",
    				max: "La edad tiene que ser menor de 99 años"
    			},
    			year: {
    				required: "Por favor, introduzca su año de nacimiento",
    				range: "Tiene que poner un año entre 1911 y 1992",
    
    			},
    			agree: "Por favor acepte nuestra politica"
    		}
    	});
    });
    </script>

    Con esto terminamos y comprobamos que tenemos un formulario que se valida antes de enviar los datos al servidor, aunque para que no de problemas seria importante realizar algunas comprobaciones en el servidor por si no tiene activado javascript el equipo del usuario se detecten los errores.

    Ver Demo

    Descargar los fuentes de la demo.

    Pasalo ...

  • Sin categoría 12.10.2010 Comentarios desactivados

    Un captcha es un sistema para comprobar que la persona que rellena un formulario es realmente una persona y no un sistema automatizado que puede llegar a inundar nuestro email o nuestra base de datos de datos basura.

    El problema del captcha es que suele ser confuso e incomodo para el usuario ya que tiene que descifrar una serie de caracteres normalmente difíciles de interpretar.

    La solución que os presento es un captcha en el que no hay que introducir ningún carácter sino arrastrar un deslizador a la derecha.

    Captcha deslizante

    Captcha deslizante

    Veamos como implantar este captcha.

    Primero hay que aclarar que esta programado con jQuery por lo que tendremos que instalar dicha libreria ademas de alguna otra.

    Estos son los ficheros a copiar en nuestro sitio.

    • Directorio CSS
      • slideLock.css
    • Directorio JS
      • jquery-1.4.2.min.js
      • jquery-ui-1.8.2.custom.min.js
      • jquery.slideLock.js

    vamos a ver un código de ejemplo.

    Primero dentro del head enlazamos los ficheros que hemos copiado a nuestro sitio.

    <link href=”css/slideLock.css” rel=”stylesheet” type=”text/css” media=”screen” />
    <script type=”text/javascript” src=”js/jquery-1.4.2.min.js”></script>
    <script type=”text/javascript” src=”js/jquery-ui-1.8.2.custom.min.js”></script>
    <script type=”text/javascript” src=”js/jquery.slideLock.js”></script>
    <link href=”css/screen.css” rel=”stylesheet” type=”text/css” media=”screen” />

    El siguiente paso consiste en configurar el deslizador para ello escribiremos este codigo en el head de la pagina y modificaremos los parametros a nuestro gusto.

    <script type="text/javascript">
    	$(document).ready(function() {
    		$("#test_form").slideLock({
    		labelText: "Verificación :",
    		noteText: "Dezplaza el interruptor a la derecha  ",
    		lockText: "Bloqueado",
    		unlockText: "Desbloqueado",
    		iconURL: "images/chrome/arrow_right.png",
    		inputID: "sliderInput",
    		onCSS: "#333",
    		offCSS: "#aaa",
    		inputValue: 1,
    		saltValue: 9,
    		checkValue: 10,
    		js_check: "js_check",
    		submitID: "#submit"
    		});
    	});
    </script>

    Como se puede observar los parámetros son fácilmente identificables se pueden cambiar los literales que aparecen en la pagina la imagen de la flecha y los colores.
    Hay tres parámetros que son claves js_check, submitID e inputID el primero indica el nombre de un input oculto que indica donde se debe de insertar el deslizador, el segundo submitID indica el id que tendremos que ponerle al botón submit y el tercero es el nombre del campo que creara dinamicamente y que servirá para comprobar si esta desbloqueado el deslizador.

    Veamos como podemos montar el formulario.

    <form action="prueba.php" method="post" class="hform" id="test_form">
        	<fieldset>
                <legend>Un simple formulario</legend>
                <p><label for="nombre">Nombre:</label><input type="text" name="nombre" id="nombre" /></p>
                <p><label for="email">E-mail:</label><input type="text" name="email" id="email" /></p>
                <p><label for="comentario">Comentario:</label><textarea name="comentario" id="comentario"></textarea></p>
                <input type="submit" name="submit" id="submit" value="Submit" />
    
                <input type="hidden" name="js_check" id="js_check" value="0" />
            </fieldset>
        </form>

    Como se observa el boton submit tiene como id el valor que configuramos en el parámetro submitID, tambien descubrimos el campo de tipo hidden (oculto), con el id que configuramos en el parametro js_check

    Ya solo nos queda realizar la comprobación de si el usuario a desbloqueado el deslizador.

    if(isset($_POST['submit'])) {
    	if(isset($_POST['sliderInput']) && $_POST['sliderInput'] == 10) {
    		echo "Ha pasado el control";
    	}else{
    		echo "No ha pasado control";
    	}
    }

    El primer if comprueba si se ha pulsado el botón submit, el segundo es el más importante se hacen dos comprobaciones, la primera si existe el campo sliderInput que es el que se creaba dinamicamente, la segunda es que su valor sea 10, esto indicaria que se ha desbloqueado el deslizador, por lo que podemos realizar las acciones oportunas como enviar un correo o guardar los datos en base de datos, etc.

    Aqui os dejo una demo

    Y aqui podeis descargar los archivos de la demo con todos los archivos necesarios para usarlo.

    Y aqui toda la documentación de este plugin

    Pasalo ...

  • Sin categoría 11.10.2010 Comentarios desactivados

    Hoy quiero hablaros del posicionamiento web, desde hace algún tiempo me dedico al posicionamiento en buscadores (SEO), y una de las primeras lecciones que aprendí es que es preferible ser “cabeza de ratón”  en vez de “cola de león” , esto viene a decir que seguramente se consigan muchas mas visitas por palabras claves con menos búsquedas pero que aparezcamos en las primeras posiciones, que las provenientes de palabras claves con muchas búsquedas por los usuarios pero que aparecemos en la pagina 10 de los resultados, y pongo un ejemplo.

    Mi propia pagina web personal donde publico mis servicios de diseñador web, la tengo posicionada en la primera pagina de resultados con varias palabras clave, puedes realizar las comprobaciones buscando por estos terminos :

    • Diseñador web fuenlabrada
    • diseño fuenlabrada
    • diseño web fuenlabrada
    • web fuenlabrada

    En todos ellos parezco en la primera pagina incluso llegando a ser el primero en “diseñador web fuenlabrada”.

    Diseñador web en Fuenlabrada

    Diseñador web en Fuenlabrada

    Donde esta la clave, la clave esta en la palabra “Fuenlabrada”, si no la ponemos seguro que no salgo ni en la pagina 10, ya que la competencia en este sector es muy importante, por lo que prefiero ser el primero en la localidad donde vivo, que ademas es más probable que elijan mis servicios por proximidad que estar perdido en palabras clave como “diseñador web” que puede tener millones de búsquedas pero que rara vez llegaran a mi posición.

    La pega esta que “Diseñador web Fuenlabrada” tiene muchas menos búsquedas que “Diseñador web”, pero incluso así tendré muchas mas visitas a mi web ademas con una gran ventaja, el que ha buscado por “diseñador web Fuenlabrada” esta pensando en contratar seguramente un diseñador de esta localidad.

    Pasalo ...

  • Consejos 10.10.2010 Comentarios desactivados

    Después de varios años impartiendo cursos de diseño web y programación me di cuenta que había unas preguntas que se repetían al finalizar el curso. ¿Y ahora que estudio?, ¿Por dónde sigo?, ¿Que me recomiendas que aprenda ahora?

    Bien, en este articulo me gustaría explicar que tecnologías tendría que manejar un desarrollador web.

    En primer lugar quiero destacar que según se van dominando tecnologías vas adquiriendo un perfil determinado que irá cambiando conforme aumentes conocimientos.

    Primeros pasos las artes gráficas.

    Si pretendes ser un diseñador web completo, creo que lo primero que tienes que aprender a dominar son los programas de diseño gráfico. No hace falta  conocerlos todos, tal vez con un par de ellos sea suficiente, pero habrá que manejarlos muy bien, la herramienta nunca debe de ser un obstáculo, cuando esto no es así habrá ocasiones en las que se nos ocurra una idea y luego resulte que no sabemos plasmarla a nivel gráfico, no podemos dibujarla porque no dominamos la herramienta y esto nos limitara nuestra creatividad.

    Los programas que recomiendo son Photoshop y Fireworks, si dominas Illustrator o Freehand mucho mejor pero no son imprescindibles.

    Una vez dominamos la herramienta el siguiente paso es desarrollar la creatividad, realmente este paso debe de estar latente durante toda nuestra carrera, siempre hay que estar pendientes de las nuevas tendencias, de coger  ideas de otros sitios (Ojo, no copiarlas), con el tiempo nuestros diseños ganaran en gusto, no debéis desanimaros por que los primeros diseños no sean lo mejor del mundo, tendríais que ver mi primera pagina web.

    Después de aprender y practicar estas herramientas más una desarrollada creatividad te podrías considerar un diseñador grafico para web. No confundir con un diseñador grafico que domina multitud de herramientas de diseño y que normalmente ha estudiado artes graficas y sabe y aplica perfectamente todas las reglas del diseño, pero esto ya es otra película.

    Maquetación

    El siguiente paso es aprender a maquetar, la maquetación consiste en coger un diseño grafico y por medio de código xHTML y CSS convertirlo en una página web. Por lo tanto aquí donde hay que hacer hincapié es en aprender estas dos tecnologías.

    Aquí nos empezamos a adentrar en el mundo del código y la programación con dos lenguajes que son fáciles y que nos servirán para iniciarnos poco a poco.

    Aquí me gustaría aclara una cosa, si queremos ser unos buenos desarrolladores web tenemos que evitar utilizar únicamente las herramientas de diseño de Dreamwever que nos escribe automáticamente el código xHtml y Css, yo recomiendo hacerlo nosotros, apoyándonos en esta herramienta para casos puntuales. Como dice el refrán esto es pan para hoy y hambre para mañana.

    En este paso tenemos que  aprender también cómo subir una web a internet, que es y cómo se contrata un dominio y un alojamiento o familiarizarnos con el panel de control del servidor.

    Respecto al software que debemos conocer para maquetar recomendaría Dreamweaver pero en realidad se podría programar con el block de notas.  Luego para tratar con el servidor nos podría valer Filezilla que es bueno, bonito y barato(es gratis).

    A partir de este punto podemos considerarnos diseñadores web aunque hasta ahora solo sabemos hacer páginas webs estáticas, que muestran imágenes y textos con un mejor o peor diseño pero que no interactúan con el usuario.

    JavaScript y sus Frameworks

    Para dotar a las páginas estáticas de  interacción una de las soluciones que tenemos es JavaScript, es un lenguaje del lado cliente no muy complejo y que además no es muy estricto.

    Este lenguaje nos ayudara a entender los fundamentos de la programación (Variables, condicionales, bucles, arrays, etc…), esto es muy importante aprenderlo ya que será la base en la que nos apoyemos para programar en cualquier lenguaje, si dominas las técnicas de programación te será más  fácil aprender a programar en cualquier lenguaje.

    Hoy día existen multitud de frameworks o librerías para JavaScript, esto no es más que un conjunto de funciones que facilitan el trabajo con este lenguaje dotándolo además de nuevas funcionalidades. En la actualidad casi no utilizo JavaScript nativo, todo lo que hago es con jQuery uno de los frameworks mas utilizados.

    Al conocer estas nuevas tecnologías puedes considerarte un diseñador web avanzado.

    Lenguajes del lado del servidor

    Este paso puede ser al que más tiempo le dediques, hay mucho trabajo por delante y debes de dominar perfectamente la maquetación para continuar.

    Un lenguaje del lado servidor es aquel que se ejecuta en el servidor y no en el cliente (máquina del usuario) como ocurría con JavaScript, tenemos varios lenguajes a elegir poco a poco podemos ir aprendiendo cada uno, pero yo me intentaría especializar en uno y conocer los demás.

    Tal vez el más difundido y el más demandado sea PHP, aunque las grandes empresas suelen trabajar con ASP.NET o Java.

    Conocer alguno de estos lenguajes es lo que nos va a permitir dotar a nuestras páginas webs de mucha más funcionalidad, pudiendo crear tiendas virtuales, gestores de contenido, Redes sociales o cualquier otra cosa que se nos ocurra. En realidad ya no serian páginas web sino aplicaciones web.

    El problema es que en este punto no vale con conocer solo PHP o ASP.NET, también tenemos que saber cómo funciona una base de datos, como crearlas y como relacionarlas, tenemos que conocer SQL que es el lenguaje para comunicarnos con la base de datos. Al igual que hay varios tipos de lenguaje de lado servidor también hay varios tipos de Bases de datos, MySQL, SQL Server, Oracle, etc. Y tenemos que saber cómo trabajar con ellas, por supuesto no hay que conocerlas todas, yo normalmente suelo trabajar con PHP y MySQL.

    Si has dominado JavaScript o JQuery ahora podrás trabajar con la tecnología Ajax pudiendo realizar de esta manera comunicaciones asíncronas con el servidor (Sin refrescar la pantalla cada vez que muestres nuevos datos)

    Llegados a este punto seguro que has ido aprendiendo muchas más cosas de las que cuento en este articulo, como XML o Json, ya que muchos libros o cursos lo incluyen como complemento. Sabrás crear servidores virtuales locales (WAMP) y diferenciaras que lenguajes funcionan en Linux o en Windows.

    Tu perfil pasa de ser un diseñador web avanzado a un desarrollador/programador web.

    Flash y ActionScript

    Aunque no es imprescindible conocer flash si es sumamente recomendable. En flash tienes dos niveles, puedes ser un diseñador flash o un programador flash, el primero solo utiliza gráficos e imágenes que va moviendo en una línea de tiempo formando con ello presentaciones, banners o incluso páginas webs realizadas íntegramente en flash con un poco de código.

    El programador en flash domina a la perfección ActionScript, actualmente en su versión 3.0 aunque todavía hay muchos que utilizan la versión anterior 2.0. Con esto se pueden realizar aplicaciones mucho más complejas y espectaculares.

    El momento de formarse en flash puede variar según los gustos o necesidades, no tiene por qué seguir este orden, aunque para el nivel programador es imprescindible conocer lenguajes de lado servidor (php, asp.NET, etc) para comunicarte con bases de datos.

    Gestores de contenidos Open Source.

    Hoy en día tenemos una serie de plataformas que nos ayudaran a crear una página web en cuestión de minutos, conocer como instalarlas, configurarlas y personalizarlas, puede hacer que nuestro trabajo sea mucho más cómodo y fácil.

    Os dejo una relación de plataformas y sus aplicaciones.

    Gestores de contenido.

    • Joomla
    • Drupal

    Blog’s

    • WordPress
    • Blogger

    Tiendas Online.

    • Oscommerce
    • Prestashop
    • Magento

    Aulas Virtuales

    • Moodle

    Hay muchas más pero estas son de las más famosas. Estas plataformas están programadas en PHP por lo que es necesario conocer dicho lenguaje para poderlas modificar y personalizar en profundidad, lo que sí es imprescindible es saber maquetar (xHtml y CSS) para crear nuevas plantillas o realizar cambios en el diseño.

    Por otro lado si no necesitamos cambiar el diseño ni ninguna funcionalidad, nos vale seguir el manual de instalación de la plataforma para poder trabajar con ella, suele haber muchas plantillas con diseños muy logrados para todas ellas.

    Posicionamiento en buscadores (SEO)

    Para complementar nuestra formación sería muy recomendable aprender las distintas técnicas de posicionamiento en buscadores que existen, esto nos proporcionara un nuevo campo de trabajo y nuevos ingresos.

    Conocer como optimizar una página web para que sea amigable para los buscadores, que acciones favorecen que una página este mejor posicionada, implantar estadísticas y saber interpretarlas o dar de alta en google u otros directorios una web son algunas de las muchas cosas de deberías aprender.

    El futuro que ya está aquí.

    La demanda de programadores para aplicaciones iPhone o Android es ya una realidad, las aplicaciones RIA (Rich Internet Applications) están en auge o el novedoso HTML5 y CSS3 que prometen maravillas, son algunas de las tecnologías a tener en cuenta.

    Reflexiones

    Para cualquiera que lea este articulo puede pensar que son muchas y variadas las tecnologías que hay que aprender para dedicarse a esto. Pero no tiene por qué ser así, puedes ser programador y no tener idea de diseño grafico, ten en cuenta que en muchas empresas te encontraras con un equipo de desarrollo en el que cada uno puede interpretar un perfil de los expuestos aquí.

    Tienes que saber que esto es una carrera de largo recorrido, que cuando aprendes algo hay que practicarlo hasta dominarlo por completo, recuerdo cómo iba cambiando mi pagina web personal, creándola de nuevo con cada una de las tecnologías que iba aprendiendo. Cada tecnología ira complementándose con otras y cada vez será más sencillo aprender, pero debes de ser constante y paciente, no te adelantes asienta tus conocimientos y solo entonces da un paso más, no aprendas en paralelo varias tecnologías, ve una a una.

    Espero que este articulo te ayude a seguir tu camino teniendo en cuenta que este nunca debe de terminar, el aprendizaje debe de ser constante y tu curiosidad por las nuevas tecnologías nunca debe decaer, sigue los blogs que marcan tendencias y que la fuerza te acompañe…

    Pasalo ...