• Sigueme en Twitter

Hablemos sobre Usabilidad #1

usabilidad

La Usabilidad es uno de esos temas que más se suele hablar en la web, sobre todo cuando se habla de proyectos Web, a pesar de eso es un tema que solo lo he mirado de reojo sin prestarle mucha atención pero como todo, ha llegado el momento en que le de su debida importancia.

Sigue leyendo

Anuncios

10 Buenas practicas para el Desarrollo Web

css tips

Cuando comenzamos en este mundo del diseño-Desarrollo Web, mas aya de las buenas practicas lo que queremos es tener un resultado inmediato y que funcione lo mejor posible, muchas veces se logra el resultado deseado, el problema viene cuando las cosas no funcionan de la mejor manera , es en ese momento cuando nos damos cuenta de que mucha parte de nuestro código o diseño no esta hecho de la manera correcto a pesar de que este funcione aparentemente bien.

Sigue leyendo

Organizando nuestro CSS

estructura css

Dicen que cada cabeza es un mundo, y eso no lo pongo en tela de juicio, así como cada cabeza es un mundo, en el mundo del desarrollo ya sea web o de escritorio, siempre existirán miles de formas de resolver una problemática, a pesar de eso siempre será importante realizar ciertas acciones de una manera mecánica, que nos permita el mejor control de nuestro codigo, hoy hablaremos de la organización de nuestro código CSS.

Como dije anteriormente cada quien tiene ya sus mañas, o pautas cuando se habla de desarrollo , en este caso hablamos del desarrollo web, así que tratare de explicar cual es la forma en la que yo suelo organizar mi código para así, poder entender mejor como tengo distribuidos los estilos de una pagina Web.

Y todo empezó con un style.css

cssNo me dejaran mentir pero la gran mayoría de nosotros cuando empezamos a trabajar con las hojas de estilo en cascada “CSS”, lo primero que aprendimos fue a crear un archivo llamado “style.css”, en el cual definíamos todos los estilos de nuestra pagina web, generalmente nuestros primeros pasos se resumían a estilos sencillos lo cual eran perfectos para esa hoja de estilos, con el tiempo nuestra experiencia fue creciendo  y nos dimos cuenta de que al meter mas estilos a nuestra hoja de estilos, causaba por momentos una extraña sensación de desorientación, ya que era difícil identificar en donde se encontraban las instrucciones que permitían cambiar el bello color de nuestra etiqueta H1.

Y entonces llegaron los comentarios

comentarios css

en nuestro afán de poder navegar de manera más fácil en nuestra hoja de estilo, llegaron nuestros amigos los comentarios, si esos que podían empezar así:

/* aqui va mi cabecera */

Los comentarios representan una gran ayuda para nosotros ya que nos permite separar por secciones los diferentes estilos de nuestra pagina, a demás de permitirnos comentar partes importantes de nuestro código.

A pesar de ello, si se trabajaba con muchas lineas de código , sigue siendo algo complicado localizar algunos estilos, tocaba entonces buscar nuevas maneras de poder estructurar nuestro código.

Divide y vencerás.

Divide y vencerás es una frase muy común en el mundo de desarrollo, y para este caso nos cae como anillo al dedo, ya que segmentar nuestro código css por secciones resulta muy practico a la hora de revisarlo, la forma en la que yo segmento o estructuro mi código  es a base de varias hojas de estilo las cuales componen los diferentes estilos de mi sitio, a continuación presento la forma en la que yo lo hago.

Reseteador de CSS alias reset.css

Como comente en un post anterior existen 3 tipos de CSS, y antes de comenzar a definir nuestros estilos lo mejor será formatear los estilos impuestos por el navegador, para así poder trabajar desde una base solida .(hablare de esto en un próximo post…lo prometo :D), por el momento diremos que un reseteo del código css, nos ayudara a que los estilos que apliquemos se realicen tal y como los definimos.

Estilo de elementos generales HTML alias style.css

En esta hoja de estilo definimos los elementos típicos de nuestra pagina web, como pueden ser las cabeceras,H1,H2,H3, el tipo y tamaño de letra, el color de las mismas, el estilo de nuestro párrafo en fin todas aquellas etiquetas HTML que se usan constantemente en nuestra pagina Web.

Estilo de maquetación alias layout.css

Finalmente aquí defino los estilo para los elementos que le dan forma a la estructura de mi pagina es decir todos los divs que uso para maquetar mi pagina Web, de tal manera que me permita tener un acceso directo a la estructura de mi pagina,por otro lado hay ocasiones que ciertas paginas de nuestro sitio, cuentan con una estructura o elementos particulares a las demás, así que en esta hoja de estilo suelo meter también los estilos de esas paginas.

CSSComo bien sabemos el fin de CSS es separar el contenido de la presentación, así que siguiendo con ese fin nosotros separamos los elementos de la presentación. Esto con el fin de poder movernos de una manera mas fluida en los elementos que dan esa presentación a nuestra pagina, obviamente esta segmentación junto con la buena practica de comentar nuestro código, logran que tengamos una estructura de nuestro CSS solida.

Como dije esta es una de muchas maneras de organizar nuestro CSS, desventajas de hacerlo así puede que si haya muchas, sobre todo lo molesto que puede resultar movernos entre hojas de estilo, a mayor hojas de estilo mayor ventanas abiertas lo cual puede ser igual de molesto que movernos entre una sola hoja de estilo con un sin fin de lineas código, por suerte hoy en día existen aplicaciones para trabajar con código, que nos permiten el uso de pestañas. En mi caso hago uso de mi amado CSSEDIT, que es una belleza para estos menesteres la verdad.

¿Y tu como estructuras tus CSS´S?

Preguntas comunes en una entrevista de trabajo.

quizás una de las cosas con la que todo estudiante o aspirante a un trabajo se enfrenta es la incertidumbre que puede llegar a causar una entrevista de trabajo, los nervios, la falta de confianza, el tener que cumplir cientos de requisitos que muchas veces las empresas piden es algo por lo que todos hemos pasado, hoy descubro una pagina llamada TechInterviews que si bien no es una pagina que te diga como y que hacer durante una entrevista de trabajo, si nos plantea artículos en donde se nos muestra las preguntas más comunes que se realizan en una entrevista, lo mejor de todo es que las preguntas giran en base a el desarrollo web o de aplicaciones de escritorio, pudiendo encontrarnos preguntas comunes de  :Java,CSS, PHP, Redes, Hardware… etc.

Les invito a que la visiten, me gustaron mucha de los artículos que tuve oportunidad de leer.

Vaciar Papelera

Hoy les traigo un pequeño truco para vaciar la papelera de el sistema Mac OS, antes comparto con ustedes una idea que tenia recién cambiado a mac al mandar algunas cosas a la papelera quería eliminar algunas únicamente y no toda la papelera por la idea de que ¿que tal si luego necesito este archivo?, me quejaba de esa acción decía ” ¿como es posible que en windows si se pueda y en mac no?” hasta que caí en la cuenta de algo tan lógico que me dio vergüenza: si ya pusiste archivos en la papelera es por que ya no son necesarios asi que al vaciar la papelera todo se va asi de simple, bueno despues de este episodio informatico que ahora conosco como think different viene lo importante del post.

Imagen 3

Ya sabemos que lo que este en papelera se va, por default viene activada una opción en la que cada vez que quieres vaciar la papelera te pregunta si estas seguro, en mi caso como ya dije si esta en la papelera se va asi que no necesito confirmación, asi que me puse a buscar en las opciones y encontré como desactivarla, lo único que hay que hacer es abrir el finder ir al menú finder -> Preferencias y en la ventana que nos aparece vamos a Avanzado desactivando la opción:

Preferencias del FinderCon eso ya no tendremos que confirmar el mensaje que acompaña esta entrada al inicio, saludos :).

 

Cheats Sheets o chuletas para Linux


Quien se dedique al mundo de la programación en cualquiera de sus modalidades sabrá lo importante que son los Cheats Sheets o Chuletas, para el trabajo diario…Vamos se que suena raro eso de chuletas pero bueno a si se les dice jeje. Las chuletas son generalmente un documento en el cual se presentan en manera de lista todas las propiedades que podamos usar en un leguaje de programación o en un software en especifico. Por ejemplo resulta imposible aprenderse todas las propiedades de CSS, no somos maquinas así que tener a la mano un documento como este muchas veces nos sacara de apuros.

Hoy les traigo una chuleta….para Linux, si bien no soy un usuario Linux, debido a mi carrera , en muchas ocasiones he tenido que montar alguno que otro servicio en Linux, FreeBSD..etc. Debido a que mi interacción con linux es poca, siempre tengo la problemática de que cuando debo de configurar un servicio , no recuerdo los comandos para moverme en la consola, y realmente el proceso de recordar y buscar de nuevo como moverme por un directorio, editar texto , hacer un listado de archivos en un directorio,etc. Solamente me hace perder tiempo.

En Techieblogger presentan una recopilación de 25 chuletas para Linux, las cuales realmente son de gran ayuda ya que tiene la mayoría de acciones que realizamos en el pingüino, y que nos ahorraran mucho tiempo de búsqueda. yo ya las tengo bien guardadas en mi Mac. Saludo.

Ver chuletas para Linux

Diferencias CSS en Internet Explorer 6,7,8

El peor enemigo al maquetar sitios Web 😀

En múltiples ocasiones he manifestado mi molestia con el navegador de Microsoft (Internet Explorer), por muchos es bien sabido lo molesto que resulta maquetar una Web en IE, ya que este interpreta el CSS como se le da la gana, siguiendo sus propias reglas, tal pareciera que Microsoft lo hace a propósito.

Por suerte en las ultimas versiones de IE 7 e IE 8, las cosas han mejorado con respecto a IE 6, lo cual se agradece, lamentablemente aun en estos días existe mucha gente que tiene como navegador por defecto IE 6, lo cual nos obliga a tener que adaptar nuestros sitios para que estos se vean de la mejor manera en dicho navegador.

En Smashingmagazine nos presentan unas series de propiedades CSS y como IE 6, 7, 8, las interpretan, sin duda tener referencias de ellas nos puede ahorrar tiempo en la implementación de nuestro sitio Web. Mucha gente sigue luchando con la adaptacion de sus sitios en todos los navegadores, y tambien muchos solo adaptan sus sitios a las ultimas verciones de los navegadores, esta segunda opcion para mi es la mejor. Ya que permite el desarrollo de los estándares.

Visitar el Articulo completo aquí.