Hello world!
Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!
XAMPP – Tu PC, tu hosting
Muchos de los que recien se estan involucrando en el mundo de las paginas webs, de los hostings, no tienen ni idea de lo que es un hosting, lo que es MySQL, y todas esas cosas que si quieres intalar un script, o incluso crear tu propia web necesitaras.
Todos los que fuimos, o somos 
, novatos no nos da para contratar un hosting, y tampoco queremos hacer todo ese quilombo para ver un maldita linea que dice Error bla bla bla... no?
La solucion a todo esto es transformar nuestra PC en un host, un host que podemos o no mostrar a los demas. Un host donde probar nuestros codigos.
Esto es lo que permite XAMPP (acrónimo de X, para cualquiera de los diferentes sistemas operativos, Apache, MySQL, PHP, Perl) que con simplemente descargar un .zip e instalar nos permitira probar cualquier boludes que hagamos en PHP o Perl. También incluye otros módulos como OpenSSL y phpMyAdmin.
Es gratuito y con licencia GPL que mas queres?
Puedes descargarlo directamente desde su pagina oficial.
Notepad++ Un editor como la gente
Si queres ser un programador, o volcarte en el tema, tenes que saber que para programar no podes usar el notepad de windows. Digo esto por varias razones, hay muchas veces que te genera errores y dolores de cabeza que no te probocaria un editor PHP.
Aca mi solucion, Notepad++. El que es para mi el mejor editor multilenguaje, es un editor sencillo, que puede entender cualquiera. Lo mejor de este programa es que segun el lenguaje de programacion que escojas (casi todos estan disponibles) te dara una ayuda visual coloreando las distintas funciones de tu codigo.
Es liviano, corre en cualquier PC, Mac o Linux, tiene soporte para muchos lenguajes, una maravilla!
Les dejo la pagina del proyecto, para informarse mas y descargar el programa.
HTML5: Inputs
Vamos a jugar con ustedes, lean este pequeño archivo HTML ¿les resulta familiar?
<html> <head> <title>HTML 5 Inputs</title> </head> <body> <form> <input type="text" name="nombre" placeholder="Nombre" /><br> <input type="text" name="apellido" autofocus /><br> <input type="url" name="url" value="http://" /><br> <input type="email" name="email" placeholder="Aquí ingresa tu Email" /><br> <input type="submit" name="Enviar" value="Enviar" /><br> </form> </body> </html>
A más de uno sí, porque el que nunca usó la etiqueta <input> nunca desarrollo una aplicación 2.0 
Pero, en el código hay algo raro ¿lo pueden ver? Y son atributos nuevos y atributos de atributos nuevos también Veamos qué onda con esto, línea por línea (del form unicamente 
)
<input type="text" name="nombre" placeholder="Nombre" />
Acá vemos una vulgar etiqueta <input type="text">, pero con algo raro, un atributo que nadie conocía (bah, capáz), que es placeholder. Pero... ¿exáctamente que hace ese atributo? Bueno, ahí te comento, lo que hace es escribir el valor que vos le pusiste en el mismo <input>, pero que al hacer click en el mismo desaparece. ¿No entendiste un pito? No te preocupes, acá tenes una linda demo.
Pasemos a la siguiente línea:
<input type="text" name="apellido" autofocus />
También, otro "input text", pero con un atributo sin valor (y más vale que nunca lo tenga) que se llama autofocus. ¿Qué hace? Le dá un efecto focus al borde del input. De todas maneras, si no entediste, te repito, hay una demo:
<input type="url" name="url" value="http://" />
¿type="url"? Crazy, me parece que te equivocaste... no, para nada, así es, lo que hace este valor del atributo type es OBLIGAR al usuario a tener que ingresar una URL, si no, no deja enviar el formulario. No puedo dejar demo acá, porque no hay formulario que enviar, y el efecto no puede ser visto, pero más debajo dejo un archivo para que vean.
<input type="email" name="email" placeholder="Aquí ingresa tu Email" />
¿type="text"? También, obliga al usuario a dejar su email, pero de forma válida, es decir, ya no tendremos que usar esas molestas validaciones con Javascript. Tampoco puedo dejar demo acá porque tampoco hay un form
DESDE ACÁ podés ver el demo de todos los nuevos atributos de HTML5. Espero que los hayan disfrutado y usen en sus proyectos!
Suerte!
Es posible que no vean ninguno de los efectos, consecuencia que no tienen un navegador que soporte HTML5; y puede ser que no vean el efecto autofocus pero está, lo pueden ver en el archivo demo
HTML5: Audio
A partir de Firefox 3.5, Chrome 3, Opera 10.5 y Safari 4, podemos tomar ventaja de las nuevas características de HTML5, incluyendo el soporte para audio sin la necesidad de Flash. Vas a ver que con solo crear un elemento <audio> y setear un par de atributos, vas a poder reproducir sonidos sin ningún otro complemento.
2500 íconos… absolutamente gratis!
Siempre que buscás iconos, te encontras con la sorpresa que hay que pagar por ellos 
Y eso es una real causa para seguir usando los iconos Silk de famfamfam.
¿Querés que te diga algo? Ya no más, acá en Ranasofía te ofrecemos este espectacular pack de íconos para que los borres/edites/llenes el disco al pedo/los uses en tus proyectos/entre las otras cosas que podés hacer con más de 2500 íconos. Y lo mejor de todo: GRATIS
Y si crees que por ser 2500 gratis están hechos con Paint, estás equivocadísimo.
¿Te quedaste sorprendido?
Tomá, bajatelos todos:
Enjoy!
19 importantes características para buscar en un hosting
Si estás leyendo esto, probablemente desarrolles sitios web, o no. Nosotros no hacemos sitios para dejarlos en localhost: los hacemos para Internet. Mientras que es más divertido crear sitios que preocuparse por hostearlos, hostear no es una decisión que debamos hacer rapidamente. En esta entrada, vamos a ver 19 puntos que debes mirar cuando elijas un hosting.
1. Cantidad de almacenamiento
Cuando elijes tu hosting, una de tus dudas será "¿Cúanta información puedo guardar?" Para los sitios pequeños y medianos, encontrarás que muchos gigabytes será sufienciento almacenamiento. Algunos hostings ofertan "almacenamiento ilimitado": es todo una mentira! Si lees la letra chica (que usualmente está en los Términos y Servicios) encontrarás que es ilimitado hasta que sobrepases el "espacio normal de un sitio". Si creés que podés estar cerca o sobrepasar el espacio que es "normal", asegurate lo que vas a usar antes de comprarlo... o andá a un hosting que te diga la verdad de la milanesa.
2. Cantidad de ancho de banda
Cuando buscás por un hosting, mas o menos ves el espacio y el ancho de banda que te dan a la vez. ¿Qué es el ancho de banda (bandwidth)? Es la cantidad de espacio que tu hosting le permitirá a tus usuarios cargas y bajar (acumulativamente) en un mes dado. Supongamos que tu web es 1 megabyte de datos y tu ancho de banda mensual es de 10 MB. Al principio del mes, podés subir el sitio entero; ahora consumiste 1 MB de bandwidth. Si un visitante de tu sitio mira todas las páginas, habrá descargado 1 MB de datos. Eso significa que podés tener hasta 9 visitantes en un mes (asumiendo que cada visita mira tu sitio entero). Después de eso, tu hosting no te permitirá recibir mas visitantes, o (lo más probable) cobrarte los MB de más que consumiste. Por supuesto, el ancho de banda es algo a lo que le tendrás el ojo puesto, especialmente si tenés un sitio popular o hacés algo más 2.0, como subir tu propio video o fotos. Al igual que almacenamiento, algunos hostings ofrecen "ilimitado" ancho de banda; de vuelta, si creés que no vas a estar dentro de lo que se le llama "normal" (o de lo que mierda sea ), averiguá los límites o elegí un hosting que tenga un límita que puedas ver.
3. Número de dominios y subdominios
Una vez que tengas un sitio, hay una buena posibilidad de que no pase mucho tiempo y tengas un segundo, y después un tercero 
. Sería un bajón tener que administrar una cuenta de hosting por cada sitio que tengas, entonces asegurate que tu hosting te deje hostear multiples dominios. A veces, habrá un límite de cúantos dominios podés tener en una cuenta; y asegurate que te plazca! Usualmente, habrá una sección en el panel de control del admin para añadir dominios y elegir cuales sub-carpetas apuntarán. Lo mismo es verdad para los sub-dominios.
4. Cuentas de email y características
Muchos hostings ofertan cuentas de email para tus dominios. Lo que querrás saber es cúantas cuentas te dejarán crear; también, no olvides de averiguar las posibilidades de recibir esa cuenta. ¿Tienen una interface de webmail? ¿Cúantas puedo crear? ¿Se pueden integrar con Google Apps para la interface de GMail?
5. Soporte para base de datos
Hoy en día, cada sitio pequeño parece tener una base de datos al final. Seguro querrás asegurarte que podrás usar los tipos de base de datos que te sean cómodos. Muchos hostings hoy ofrecen MySQL; que es suficiente para la mayoría de la gente, pero si mejor prefieres PostsgreSQL, Oracle, SQL Server, u otro, no te conformes con menos. Recuerda, si no lo están publicitando, ¡posiblemente no lo ofrezcan!
6. Soporte para Frameworks e instaladores
Un motón de hostings ofrecen soporte para frameworks populares, sistemas de blogs, o CMS. Creo que es seguro decir que la mayoría de los lectores de Ranasofía son fans de WordPress/SMF/Spirate: siempre es bueno saber que tu hosting ofrece un auto-instalador, o por lo menos una fácil configuración, para instalar WordPress o tu elección en CMS.
7. Aplicación móvil o página web
Para algunas personas, esto será probablemente un punto extra. Buscar un hosting que ofrezca una aplicación móvil para acceder a la administración de tu sitio. Sólo conozco dos hosting (MediaTemplate y SliceHost) que ofrecen aplicaciones para iPhone y Android, pero estoy seguro que la mayoría de los hostings van a seguir esos pasos. Ambos ofrecen sitios web móviles también, que estoy seguro que otros hosting tendrán lo mismo.
8. Soporte técnico
Esto es muy importante: averiguá exactamente que posibilidades ofrece tu hosting para soporte técnico: ¿los podés llamar? ¿A qué horarios? ¿Tienen suporte por email? ¿Un sistema de tickets? ¿Cúal es el tiempo prometido de respuesta? ¿Y sobre chatear con ellos? ¿Tienen una wiki o una librería de artículos de ayuda o tutoriales? No elijas un hosting hasta que no sepas exactamente qué soporte te ofrecen; estarás felíz por esto después, creeme! Que los de mi hosting barato donde hosteo mi web Spirate no me dan bola cuando les hablo por email.
9. Acceso a la shell
Si estás un poquito más avanzado, capáz consideres elegir un hosting que te ofrece acceso a la shell: que es loguearte dentro de tu server desde la linea de comando a través de SSH. Podrás con seguridad copiar archivos de arriba a abajo, cambiar permisos de archivos para cualquier grupo de archivos rápidamente y fácil, y realizar un motón de tareas más. Si te gusta esta función... ¡sabrás que hacer con ella!
10. Archivos .htaccess
Acá hay otra cosa importante: vas a querer la capacidad de tener tu propio archivo .htaccess en tus directorios. ¿Qué es un archivo .htaccess? Es un archivo de configuración usado por Apache server. Lo podés usar para proteger directorios con password, re-escribir URLs, redireccionar páginas, y más.
11. Cron jobs
"Cron jobs" es otra gran función que tenés que tener en tu hosting (y hay una buena posibilidad que los tendrás si tenés acceso a la shell). Cron es un "planificador de trabajo basado en tiempo" (traducción a timed-based job scheduler) que podés usar para realizar tareas en el servidor en tiempos dados.
12. Soporte para distintos lenguajes
Esto es obvio, pero asegurate que tu hosting que planees elegir ofrezca soporte para los lenguajes del lado del servidor que quieras usar. Si vas a usar Ruby on Rails en los próximos meses, seguramente lo vas a querer ver en la lista de frameworks soportados. Si querés usar Django, asegurate que soporte Python. No te cierres con PHP como tu única opción, a no ser que es lo único que quieras o necesites.
13. AdWords gratis
While not a necessarily something you need, it’s something you’ll probably want to take advantage of: many hosts offer some Google AdWords credit (usually ~$50, I’ve found) or some other form of advertising. Even if you’d rather use another advertising proxy, you can’t beat free: you might as well use it!
Aunque no es tan necesario, seguramente es algo de lo cual quieras tomar ventaja: muchos hostings ofrecen algún crédito para Google AdWords o alguna otra forma de publicidad. Incluso si prefieres usar otro tipo de publicidad, no podés combatir contra lo gratuito: seguramente lo usás también!
14. Backup del sitio
No pienses que tu hosting es menos susceptible de perder datos que tu propia computadora; recuerda, los servidores son sólo grandes computadoras que cualquiera puede leer los datos. ¿Qué opciones de backup, en tu caso, provee tu hosting? Vas a queres resguardar tus sitios y sus base de datos. Si no ofrecen backup, resuelve cómo podrás hacer por tu cuenta: este puede ser uno de los lugares que el acceso a la shell y los cron jobs sean útiles!
15. Elección de Sistema Operativo
>Para la mayoría de la gente, esto no será un gran problema. Por supuesto, si querés desarrollar en ASP.NET necesitarás Windows en tu hosting; eso es un poco difícil de encontrar, y a veces un poco más caro, pero si sos un desarrollador de Microsoft, el costo extra será valorado. Si estás usando un lenguaje open-source, probablemente no necesites preocuparte sobre que versión de Linux/Unix vas a recibir; como siempre, algunos hostings te dan opciones, y algunos desarrolladores pueden tener preferencias, eso es digno de mencionar.
16. Aplicaciones extra
Ya hablamos sobre sistema de manejo de contenido, pero a veces querrás algo más. Muchos hostings ofrecen instalaciones para funciones sociales como foros, blogs, etc. Si estás montando un negocio online, algunos hostings ofrecen seteos para eCommerce.
17. Actualizaciones
Si puedes, averigua qué versión de software te ofrece el hosting. Algunos hostings no son rápidos en actualizar a las últimas versiones, mientras que otros te dejarán elegir qué versión quieres usar. Hay algunas cosas peores que registrarte por un año en un hosting sólo para descubrir que corre PHP 4.x 
18. Up-Time
Estoy seguro que no te tengo que convencer que esto importante: que tus visitantes puedan ver tu sitio cuando intenten. Averigua cúan confiable es tu hosting; cúando estés haciendo esto, es importante leer la letra chica. A veces, los hostings estiran la verdad un poco (diciendo 99.9% uptime, sin tener en cuenta casi todo lo que podría ir mal), entonces andá a Google y buscá lo que otros usuarios dicen del hosting que vas a elegir.
19. Dominio gratuito
While you may already have a domain name, there’s no such thing as too many of them. Most hosts offer this, but all else being equal, a shiny new domain name is a good enough reason to go with one host over the other.
Mientras ya tengas un nombre de dominio, no hay cosa mejor que muchos de ellos. Muchos hostings ofrecen esto, pero en igualdad de condiciones, un nuevo dominio a una razón más que suficiente para ir con un hosting sobre el otro.
Conclusión
Estoy seguro que tenés otros tips aparte de estos para compartir con nosotros.
¿Cúal es el tuyo?
Google Font API: Te vas a volver chango!
Google junto con su tecnología de vanguardia nos sorprende otra vez más con una de sus funcionalidades que, de seguro, será usada en la mayoría de los sitios webs.
Con la API de Fuentes de Google en tan sólo 20 segundos podemos integrar la fuente que queramos a nuestra web, y usarla como fuente por defecto en toda la página.
Por más que parezca una estúpidez esto trae muy buenas ventajas, nos ahora ancho de banda y hace el caché de la fuente, cosa que no tenga que cargarla de vuelta cada vez que se recargue la página.
Acá te dejamos un catálogo de fuentes por si sos como nosotros y tenés menos tipografías que el New York Times
Videíto explicativo:
Posiblemente no entiendas un pito como yo porque está en inglés, pero bueno, una video vale más que mil palabras
Y ahora expliquemos de forma escrita:
Para tomar ventaja de esta API, solo tenés que linkear a tu deseada fuente, y referenciarla dentro de "font-family" del CSS. Y eso es todo 
. Si no te sale dejá el rubro porque la verdad que te vas a cagar de hambre
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
<style>
body { font-family: 'Yanone Kaffeesatz', serif; font-size: 100px; }
</style>
</head>
<body>
Hello World
</body>
</html>
Y eso es todo, espero que te haya gustado. Suerte!
Realizar AJAX con jQuery
Hay como mínimo 5 formas de realizar llamadas AJAX con la librería de jQuery. Para principiantes, como de costumbre, las diferencias entre una y otra pueden ser un poco confusas. En este tutorial las vamos a organizar y hacer una comparación. Adicionalmente, vamos a ver cómo examinar estas llamadas AJAX con Firebug también.
AJAX Caché
Cuando GMail refresca el contenido sin redirección, una llamada AJAX es realizada detrás de escenas. El contenido llamado puede ser estático (devuelve exactamente lo mismo todo el tiempo, como una formulario de contacto o una imágen) o dinámico (pide a la misma URL obtener diferentes respuestas, como la bandeja de entrada de GMail donde los e-mails son mostrados en cualquier momento).
Para contenido estático, podemos esperar que el contenido sea cacheado. Pero para contenido dinámico, el cúal puede cambiar en unos segundos, cachear el AJAX se convierte en un problema. Hay que notar que Internet Explorer siempre cachea llamadas AJAX, mientras que otros navegadores se comportan diferentemente. Entonces sería mejor decirle al navegador de manera explícita si AJAX debe o no ser cacheada. Con jQuery, podemos lograr esto simplemente tipeando:
$.ajaxSetup ({
cache: false
});
1. load(): cargar HTML desde una URL remota e injectarlo en el DOM.
El uso más común de AJAX es cargar HTML desde una locación remota e injectarlo dentro del DOM. Con la función load() de jQuery, esta tarea es una pavada. Mirá esta demostración y revisaremos algunos usos uno por uno.
Configuración mínima
Click en el primer botón llamado "load()". Un poco de HTML es injectado en la página, exactamente de lo que estabamos hablando. Vamos a ver qué está pasando detrás de escenas.
Abajo está el código para el efecto:
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img src='img/load.gif' alt='loading...' />";
// load() functions
var loadUrl = "ajax/load.php";
$("#load_basic").click(function(){
$("#result").html(ajax_load).load(loadUrl);
});
- $.ajaxSetup obliga al navegador a NO hacer caché de llamadas AJAX.
- Después que el botón es clickeado, toma un poquito de tiempo antes que el nuevo HTML sea cargado. Durante el tiempo de carga, es mejor mostrar una animación para proporcionar al usuario cierta reacción que asegure que la página está cargando. La variable "ajax_load" contiene el HTML de la carga.
- "ajax/load.php" es la URL desde la cúal el HTML es agarrado.
- Cuando el botón es clickeado, hace una llamada AJAX a la URL, recibiendo la respuesta HTML, e injectándola en el DOM. La sintáxis es simplemente $("#DOM").load(url). Más sencillo, imposible.
Ahora exploremos más detalles de la petición con Firebug:
- Abrí Firebug.
- Cambiá la pestaña "Net" o "Red". Activala si está desactivada. Acá es donde todas las peticiones HTTP en el navegador son mostradas.
- Cambia a la pestaña "XHR" debajo de "Net" o "Red". El término XHR es la petición generada de la llamada AJAX. Todas las peticiones son mostradas aquí.
- Clickeá en el botón "load()" y deberás ver lo siguiente.
La petición es mostrada, ok? Clickeá en el simbolito "más" (+) a la izquierda de la llamada, más información es mostrada.
Clickeá en la pestaña "Params" o "Parámetros". Aquí están todos los parámetros pasados a través del método GET. ¿Ves la gran cantidad de números pasados debajo de una llave "_"? Así es como jQuery se asegura con la petición no sea cacheada. Cada petición tiene un diferente parámetro "_", entonces los navegadores consideran a cada uno como único.
Clickeá en la pestañan "Response" o "Respuesta". Acá esta el HTML que respondió de la URL remota.
Cargar parte del archivo remoto
Clickeá en el botón "load() #DOM". Notaremos que sólo una parte del link es cargado esta vez. Esto es hecho con el siguiente código:
$("#load_dom").click(function(){
$("#result")
.html(ajax_load)
.load(loadUrl + " #picture");
});
Con load(url + "#DOM"), sólo el contenido dentro de #DOM es injectado en la página.
Pasar parámetros a través del método GET
Clickeá en el botón "load() GET" y abrí Firebug.
$("#load_get").click(function(){
$("#result")
.html(ajax_load)
.load(loadUrl, "language=php&version=5");
});
Pasando una cadena como el segundo parámetro de load(), estos parámetros son pasados a la URL remota en el método GET. En Firebug, estos parametros son mostrados como pasos:
Pasar parámetros a través del método POST
Clickeá en el botón "load() POST" y abrí Firebug.
$("#load_post").click(function(){
$("#result")
.html(ajax_load)
.load(loadUrl, {language: "php", version: 5});
});
Si los parámetros son pasados como objetos (en lugar de cadenas), son pasados a la remota URL en el método POST.
Saludos!
La mejor manera de agradecer es comentando y pasando el chivo de la página! 
5 maneras de escribir mejor CSS
Es obvio, cualquiera puede escribir CSS. Incluso programas lo hacen por tí. ¿Pero lo que hacen es bueno? Aquí hay 5 tips para empezar a hacerlo por tu cuenta.
1. Reset
En serio, siempre usa un reset de varios elementos. Si estás usando el Eric Meyer Reset, o el YUI Reset, o tú solo haces los resets, sólo usa algo.
Puede ser tan simple como remover el margin y padding de todos los elementos:
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
Los reseteadores Eric Meyer y YUI Resets son excelentes, pero para mí, van demasíado lejos. Siento como que al final terminan reseteando todo, y después redefiniendo un montón de propiedades en los elementos. Esta es la razón porque Eric Meyer recomienda que no debes tomar su hoja de estilo con el reset y copiarla en tus proyectos si hay una forma más efectiva de usarla. Retuersela, construyela, hacela por tu cuenta.
Y por favor, paren de hacer esto:
* { margin: 0; padding: 0; }
Esto toma más tiempo para procesar, ¿y qué crees que le debe suceder a un botón "radio" cuando le remueves el padding? Elementos para formularios a veces pueden hacer cosas copadas, así que puede ser mejor dejar algunos de ellos solos.
2. Alfabetización
Una pequeña pregunta
¿Cúal ejemplo pensarías que es el más rápido para encontrar la propiedad margin-right?
EJEMPLO 1
div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
EJEMPLO 2
div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}
No podés decirme que el ejemplo 2 no es rápido. Alfabetizando tus propiedades, estás creando esta consistencia que te ayudará a reducir en tiempo que gastas buscando una propiedad específica.
Conozco alguna gente que se organiza de una manera y otra que se organiza de otra, pero al menos yo, lo hago alfabeticamente. Esto le ha ayudado a otra gente a organizarse mejor con mi código. Me caliento siempre que veo una hoja de estilos donde las propiedades no están alfabeticamente.
3. Organización
Debés organizar tus hojas de estilo, entonces es fácil para encontrar cosas e items relacionados que están juntos. Usa comentarios. Por ejemplo, así es como estructuro mis hojas de estilos:
/*****Reset*****/ Remove margin and padding from elements /*****Basic Elements*****/ Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc. /*****Generic Classes*****/ Define styles for simple things like floating to the sides, removing a bottom margin on elements, etc Yes, these may not be as semantic as we would all like, but they are necessary for coding efficiently /*****Basic Layout*****/ Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site /*****Header*****/ Define all elements in the header /*****Content*****/ Define all elements in the content area /*****Footer*****/ Define all elements in the footer /*****Etc*****/ Continue to define the other sections one by one
Usando comentarios y agrupando elementos similares, se hace mucho más rápido para encontrar lo que estás buscando.
4.Consistencia
Cualquiera sea la manera en que decidas codear, copate con esta. Estoy enfermo y cansado del debate entre 1 línea de CSS vs. múltipes líneas de CSS. ¡No hay debate! Cada uno tiene su propia opinión, entonces busca lo que funciona para tí y apégate a esta a través de las hojas de estilo.
Personalmente, uso una combinación de ambas. Si un selector va a tener más de 3 propiedades, lo rompo en múltiples líneas:
div#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: right;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }
Esto funciona para mí porque 3 propiedades es lo que se adapta en 1 línea en mi editor de texto antes de cortarse en otra línea. Entonces sólo resuelve lo que funciona para tí y se consistente.
5. Empezar en el lugar correcto
¡No te atrevas a tocar tu hoja de estilo hasta que hayas escrito tu información adicional!
Cuando estoy preparando una parte de un sitio, voy hasta el fín y coloco información adicional desde el <body> hasta el </body> incluso antes de crear el archivo de CSS. No agregues ningún superfluo div, id o class. Agregaré algunos divs genéricos como header, content, footer, porque se que estas cosas van a existir.
Agregando información adicional al principio, no te quedarás en enfermedades como la "divitis" y la "classitis", las cuales a veces pueden ser fatales! Sólo necesitas agregar esas cosas una vez que hayas empezado a escribir el CSS y darse cuenta que vas a necesitar algún "gancho" para lograr lo que estás tratando de realizar.
Conclusión
Estos son sólo alguno de los tipcs que me ayudan a escribir mejor código. Esto no significa que sea la final de la lista. Ahora animate a escribir los tuyos.
¿Qué tips tienes para escribir mejor CSS?
Escrito por Trevor Davis de NetTuts+. Traducción por Alejandro Astete de Ranasofía
