• Sigueme en Twitter

La importancia de la compatibilidad entre navegadores.

Navegadores Móviles,Navegadores Web

Uno de los mayores dolores de cabeza que un Diseñador Web puede llegar a tener, es poder lograr que el sitio Web que se esta diseñando se adapte lo mejor posible a los diferentes navegadores Web existentes así como la avalancha de dispositivos móviles existententes en el mercado, siendo honestos es un trabajo tedioso y muchas veces molesto, ya que por diversas condiciones lograr que el sitio se vea igual en todos los medios sera complicado, así que lo mejor es ser consientes de esta problemática y tratar de adaptarlos lo mejor posible a cada uno de ellos, sobre todo adaptarlos al mercado al que va dirigido, esto permitirá que por lo menos el nicho al cual quieras llegar lo atiendas de la mejor manera.

En Noupe publican una guia muy completa herramientas y Tips que te ayudaran a adaptar tu sitio a los diferentes Navegadores Web ya sean de escritorio o Móviles.

Podremos encontrar :

  • Herramientas para visualizar el sitio en diferentes navegadores y revoluciones.
  • Tips básicos css para trabajar en la adaptación de el sitio.
  • Herramientas para visualizar nuestro sitio en dispositivos móviles.

Leer el articulo completo en Noupe.

Anuncios

12 Herramientas Utiles para trabajar con CSS

Trabajar con CSS es algo que resulta realmente sencillo en comparación con otro tipo de tecnologías existentes en la red, si trabajas con herramientas tipo CSS Edit, el trabajo se simplifica de manera considerable. A pesar de su sencillez, hay ocasiones en las que solemos aplicar un efecto de manera continua, es en ese momento en la que la monotonía resulta molesta, tediosa y aburrida.

Por suerte existen muchas herramientas en linea que nos ayudan a simplificar algunas tareas, ahorrandonos mucho tiempo. Designer-daily hace una recopilación de 12 herramientas Online que nos ayudaran a automatizar ciertas tareas como, reducir tamaño de CSS,generar estilos para nuestros párrafos,crear el esqueleto de nuestro diseño, entre varias tareas más.

En particular recomiendo.

  • Primer CSS (Basta con poner nuestro código HTML y la herramienta se encarga de generar, un archivo CSS con todas las etiquetas CSS usadas en nuestro HTML, una herramienta muy útil y fácil).
  • Moo color finder ( Excelente herramienta que nos permite ver cual es la paleta de colores de una web, con tan solo poner su URL).
  • MinifyMe ( Aplicación que permite reducir el tamaño de un archivo CSS).
  • CSS Typeset (Nos genera código de CSS a partir del estilo que le demos a el texto).

Visitar el articulo completo en Designer-daily

CSS Reset : Aplicando estilos desde cero

Css reset

Anteriormente en el post de Organizando nuestro CSS y Los 3 tipos de Css en el diseño de una pagina Web, he comentado que no todos los navegadores interpretan los estilos CSS de la misma manera, esto provoca que cuando comenzamos a darle estilo a nuestra pagina Web, esta no se visualice de la misma manera.

Sigue leyendo

Realizar bordes redondeados facilmente con CSS3

bordes-redondeados

Desde sus primeras versiones CSS ha tenido como premisa separar el contenido del aspecto visual,lo cual se ha logrado, hoy en día se encuentra en desarrollo la versión de CSS3, yo he venido trabajando con CSS2 , a pesar de que este sigue vigente, es importante comenzar a conocer que opciones nos dará CSS3, es por eso que hoy les traigo un tutorial sencillo que nos permitirá realizar uno de los elemento visuales mas usados hoy en día. Hablo de los bordes redondeados, eso que le dan un toque visual bastante agradable a los contenedores de texto e imágenes.

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.

Los 3 tipos de Css en el Diseño de una Pagina Web

Cuando empezamos con el diseño web uno de los problemas mas comunes que nos podemos encontrar es la  incompatibilidad de nuestros diseños en diferentes navegadores web, este problema es quizás uno de los que más causan dolor de cabeza cuando diseñamos una pagina web. El por que de esto se debe a varios factores como pueden ser : mal uso de las propiedades CSS , navegadores que no cumplen los estándares (Internet explorer se lleva las palmas), errores de codificación etc.

Sigue leyendo