Octuweb, 22 días aprendiendo

octuweb

Vuelve Octuweb con su mes favorito y nos vuelve a regalar, esta vez, 22 artículos de 22 genios del diseño que comparten su experiencia y sus conocimientos para que aprendamos un poco más sobre diseño web y sobre todo CSS.

Este proyecto, que cumple con la curiosidad de celebrar en el mes de Octubre una vorágine de artículos de expertos diseñadores, repite experiencia después de que el año pasado fuese todo un éxito y pudiésemos disfrutar de relatos de verdaderos expertos en la materia que revelan sus trucos y sus consejos.

Si el año pasado pudimos disfrutar de los artículos de algunos reputados diseñadores, como Martín Iglesias y sus tablas responsives, Jorge Aznar, Alejandro AR, etc. Este año vuelven a traer a gente reputado en esto del CSS como es el caso de Naiara Abaroa, que ya ha tenido su turno con un gran artículo sobre trabajar con CSS en 2015, repite gente como es el caso de Jorge Aznar y otros muchos con los que podremos aprender un poco más sobre diseño web.

Así que ya sabes, Octubre cargado de buenos artículos casi diarios desde Octuweb.


Recursos para diseñadores web

HTML y CSS

Diseñar una web es una tarea bastante compleja y más si no contamos con recursos suficientes que nos faciliten la tarea con algunos elementos básicos de una web como pueden ser los fondos, los colores o las fuentes.

Algunas webs nos ofrecen soluciones para esos tres elementos básicos a la hora de conseguir una web con un diseño atractivo. También existen bastantes lugares donde nos enseñan a combinar ciertos elementos para lograr diseños realmente buenos y no llegar a resultados horripilantes o simplones.

Por ejemplo, si lo que estas buscando, posiblemente sea lo primero que te hayas planteado, unos colores principales para la web, tienes que partir por saber como combinar colores en la web, para ello un tutorial bastante ilustrativo para combinar colores en tu plantilla y no morir buscando una combinación errónea.

Después de saber como combinar los colores dentro de una página web, lo siguiente es tener algunos colores que nos gusten y que sean atractivos en tus diseños. La siguiente web nos propone bastantes colores, originales todos ellos con sus códigos RGB y hexadecimal, tanto en modo aleatorio como clasificados por escala de colores.

También puedes optar por el uso de texturas para los fondos principales de tu web, si es así, deberías conocer algunos sitios donde poder disfrutar de estos recursos tan elegantes si se combinan bien. Entre ellos puedes intentar hacerlos tu mismo, con este generador de texturas, o si lo prefieres, puedes elegir algunas texturas ya creadas en este pequeño directorio de texturas.

Por último, y no menos importante para conseguir un buen diseño web, es la elección de una fuente idónea para la página. Para ello puedes visitar y elegir alguna de los tipos de letra disponibles que tenemos en este directorio de fuentes.

Si además quieres darle toques diferentes incorporando algunos iconos temáticos con diseños simples pero elegantes, lo mejor es visitar este directorio de iconos que posee una gran cantidad de ellos, a precios competitivos y con una amplia colección. Podrás disfrutar de colecciones si buscan alguna temática en especial u obtener iconos determinados.


Guía de referencia HTML5

Ahora que cada vez se está estableciendo como un estándar de referencia en cuanto a la programación web, conviene que conozcamos las principales características de HTML5 y sus nuevas funcionalidades que le convierten en el lenguaje del futuro y con grandes mejoras respecto a versiones anteriores.

Os dejo una gran infografía con todas las nuevas referencias que incluye HTML5.


Multiselect, carga de combos anidados

Selects anidados

Una de las cosas más habituales cuando creamos una página web, es la inclusión de selects para ofrecer opciones a los usuarios. Normalmente, no solemos encontrar un solo select en una web, e incluso, los selects que tenemos incluídos entre el contenido suelen tener relación entre ellos, por eso, vamos a mostrar como crear un multiselect, o también llamados combos anidados, selects anidados

Lo primero de todo es cargar el primer select o select padre, que recibirán en mi caso los datos desde una base de datos, meteremos el select dentro de un formulario, tal y como se muestra en el archivo que llamaremos index.php:

<form action="wiki.php" method="POST">
  <select id="marcas" name="marcas" onchange="cargarModelos(this.value)">
    <option id="0">Seleccione una marca...</option>
	<?
    	  $consulta= mysql_query("SELECT * FROM marcas order by nombre");
	  while($fila=mysql_fetch_array($consulta))
	  {
          echo "<option value='".$fila["id"]."'>".$fila["name"]."</option>";
	  }
        ?>
  </select>
 
 <p id="txtHint"></p>
 <p><input type="submit" name="enviar" value="Ver movil"></p>
</form>

En el script de la página, index.php, debemos tener el siguiente texto, que lo que hará será cargar los datos del segundo select, mostrar el componente y llamar a la función que tendremos alojada en otro archivo:

<script type="text/javascript" src="jquery.js"></script>	
 <script type="text/javascript">
   function cargarModelos(str){
	if (str==""){
	 document.getElementById("txtHint").innerHTML="";
	 return;
	} 
        // código para IE7+, Firefox, Chrome, Opera, Safari
	if (window.XMLHttpRequest){
	 xmlhttp=new XMLHttpRequest();
        //código para IE6, IE5
	}else{
	 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function(){
	  if (xmlhttp.readyState==4 && xmlhttp.status==200){
		document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
		}
	}
	 xmlhttp.open('GET','carga.php?marca='+str,true);
	 xmlhttp.send();
   }
 </script>

A continuación procedemos a crear la función que tiene la carga de los datos como tal, es decir, carga.php, que es la que consulta los datos en la base de datos según los datos que le pasamos en el primer select:

$idMarca=$_GET["marca"];
include("functions.php");
conectar();
$sql="SELECT * FROM modelos WHERE id_marca = '".$idMarca."' order by titulo";
echo "<select id='modelo' name='modelo'>";
echo "<option>Seleccione modelo...</option>";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)){
  echo "<option value='".$row['ID']."'>".$row['titulo']."</option>";
}
echo "</select>";

Con estos sencillos pasos tendremos un par de selects anidados, por supuesto, no cabe ni decir que podremos repetir este proceso con todos los selects que queramos tener, simplemente ahí que cambiar las llamadas a las funciones del script y más tarde pasarle a la función carga los parámetros con los que queremos consultar las tablas.


Colección de plantillas gratis

HTML y CSS

Una buena web debe contar con un gran diseño y dependiendo de la temática de esta, debe tener un diseño u otro. Si queremos una web para nuestra empresa, el diseño debe ser sobrio y elegante, pero si queremos una web para un grupo de música debemos darle un toque más informal al diseño.

Por eso, lo más importante de cara a poseer una gran presencia en la web es mediante un diseño, unas prestaciones y un contenido que impacte al usuario. Pero no es tarea fácil encontrar un diseño que se adapte a nuestro propósito, y más aún si queremos que la plantilla sobre la que vamos a montar todo sea gratuita y no tengamos que pagar grandes costes a diseñadores.

Para evitar estos costes os traigo una pequeña colección de plantillas para webs y blogs.

1. Open Source Templates: Una de las mejores webs en cuanto a plantillas gratuitas con una gran calidad y para todos los tipos de páginas que deseemos crear.

2. WooThemes: La página que más me gusta en cuanto a plantillas webs se refiere, tienen plantillas tanto de pago como gratuitas y todas de gran calidad y de una buena y estructurada programación.

3. Elegant Themes: Posiblemente la web más conocida e importante de todas, con un gran repertorio cuenta con grandes plantillas, de todos los tipos pero con un único denominador, la elegancia.

4. MeThemes: Destinada cien por cien a WordPress, en esta web podremos disfrutar de una gran cantidad de plantillas que, seguro, calmarán la necesidad de un diseño atractivo y de calidad.

¿Conoces más? coméntanosla, tu opinión cuenta, siempre estamos dispuesto a compartir y escucharte.