[siteorigin_widget class=»SiteOrigin_Widget_Image_Widget»][/siteorigin_widget] Continuamente en nuestro trabajo tenemos que responder a la siguiente pregunta ¿qué es un CMS? En este nuevo post dedicado al diseño web vamos a dar una definición rápida de CMS y algunos ejemplos de sistemas CMS utilizados para desarrollar páginas web. CMS son las siglas que hacen referencia a Content Management System, que se traduce directamente a nuestro idioma como Sistema Gestor de Contenidos. Como su propio nombre indica, basicamente es un sistema que nos permite gestionar contenidos. En líneas generales, un CMS nos permitiría administrar contenidos en un medio digital y para el caso particular que nos ocupa, un CMS permitiría gestionar los contenidos de una página web. Dicho de otra forma, un CMS es una herramienta que permite a un editor crear, clasificar y publicar cualquier tipo de información en una página web y en este caso sin necesidad de conocimiento del desarrollo mediante programación. Generalmente los CMS trabajan contra una base de datos, de modo que el editor simplemente actualiza una base de datos ya creada, incluyendo nueva información o modificando la existente. Imaginaros un periódico o cualquier otra página con cierto nivel de complejidad. Principalmente aquellas que por necesidad deben de ser actualizadas diariamente o inclusive varias veces por día, donde además, las personas al cargo de editar la información no tienen conocimientos de programación o desarrollo web. A estos redactores se les tiene que facilitar el trabajo mediante una herramienta que les permita actualizar las informaciones que aparecen en la web y clasificarlas para que aparezcan en el lugar correcto. Damos por supuesto que estas personas no deben preocuparse con el código de la página ni las particularidades de programación de la plataforma donde esté alojada la web. Ellos sólo deben concentrarse en escribir las noticias, o desarrollar cualquier tipo de contenidos y luego subirlas a la página por un sistema que sea intuitivo y rápido. Una vez publicadas y clasificadas, las informaciones deben aparecer en la página web automáticamente, en los lugares donde haya decidido la persona responsable. Una herramienta CMS generalmente contendrá una interfaz basada en formularios, a los que habitualmente el visitante accede mediante el navegador, donde se pueden dar de alta los contenidos fácilmente. Esos contenidos luego aparecerán en la página en los lugares donde se ha indicado al darlos de alta. De esta manera los CMS estarán compuesto de dos partes, un back y un front, siendo el back la parte donde los administradores publican las informaciones y el front la parte donde los visitantes visualizan las mismas e interactuan con ellas. Otra buena utilidad de características muy similares es un comercio virtual. Donde el vendedor actualiza sus contenidos: artículos, categorías, precios, ofertas, impuestos… y los visitantes pueden realizar sus compras desde un apartado personal una vez se hayan dado de alta. Hay muchos CMS gratuitos disponibles en internet, como ya hemos mencionado bien sea la web de un periódico, la web corporativa de cualquier empresa, un blog personal… siempre encontraremos el que mejor se adapte a nuestras necesidades. Prestashop para los comercios on-line, WordPress para blogs y websites, Drupal, Joomla… y todas facilmente ampliables mediante la implementación de plugins. En definitiva, según el tipo de proyecto que tengamos que desarrollar los distintos CMS gratuitos que están a nuestra disposición son una potente herramienta a la que acudir para conseguir óptimos resultados en nuestro desarrollo web.
Que es JQuery y sus ventajas
[siteorigin_widget class=»SiteOrigin_Widget_Image_Widget»][/siteorigin_widget] En este post dedicado al diseño web, vamos a explicar que es jQuery de manera básica y sencilla y posiblemente incompleta, para que aunque no tengan mucha experiencia en este ámbito, puedan entender esta gran herramienta. jQuery es un framework de Javascript de código abierto, que fue lanzado al gran público allá por enero del 2006 y que nos permite interactuar con el árbol DOM, integración con AJAX, uso de eventos… Para empezar, explicaré muy brevemente que es Javascript. Es un lenguaje de programación de lado cliente, es decir, que se ejecuta en el navegador del usuario. Esto nos permite poder interactuar con la página en tiempo real y teniendo en cuenta, por ejemplo, el comportamiento del usuario en la página. Manejar los elementos de la página (esos elementos forman el árbol DOM) con Javascript es difícil y tedioso. John Resig su creador, decidió facilitarnos las cosas a todos los desarrolladores creando la librería jQuery. Este librería, crea “atajos” para que un programador pueda manejar estos elementos. Me refiero a las capas, las imágenes, los textos… sin necesidad de estar escribiendo decenas de líneas de código. JQuery es simplemente una librería específica de código JavaScript. Existen muchas otras librerías JavaScript como MooTools, pero jQuery se ha convertido en la más popular sin duda a su facilidad de uso y su gran potencial. Mientras que muchos desarrolladores web tienden a confundir JavaScript y jQuery como dos lenguajes de programación distintos, es importante que se de cuenta que ambos son JavaScript. La diferencia reside en que jQuery ha sido optimizado para realizar muchas funciones de script frecuentes y lo hace a la vez que utiliza menos líneas de código. Para aquellos que sigan interesados les dejo algunos enlaces con más información: Documentación oficial de jQuery: http://api.jquery.com/ jQueryUI (una extensión a la librería jQuery, con aún más funciones): http://jqueryui.com/
Website de componentes Bootstrap – getbootstrap.com
[siteorigin_widget class=»SiteOrigin_Widget_Image_Widget»][/siteorigin_widget] Nuevo post dedicado al desarrollo web mediante el uso de Bootstrap. Esta vez les mostramos una web desde donde poder obtener componentes para tal fin. La web es getbootstrap.com y además de estos recursos como su nombre indica también podremos obtener Bootstrap descargándolo a nuestro equipo. Glyphicons, dropdowns, pills, tabs, headers… recuerde que esta técnica de diseño cada vez obtiene mas adeptos entre los profesionales del ámbito del diseño web responsive. Puede a acceder a la web mediante este enlace.
Tutorial efecto texto a espray para Photoshop – psdlearning.com
[siteorigin_widget class=»SiteOrigin_Widget_Image_Widget»][/siteorigin_widget] Este post lo dedicamos nuevamente al diseño gráfico. Esta vez les enlazamos con un tutorial para aplicar a los textos un efecto espray de pintura mediante el uso de Photoshop. El tutorial es de la web psdlearning.com y está en inglés pero está acompañado de capturas de pantallas y es bastante intuitivo. Aunque no tenga dominio del inglés no le resultarácomplicado . Puede descargar la versión de prueba de Photoshop en instalarla en su equipo por un periodo de prueba desde la web oficial de Adobe. Es necesario registarse para poder realizar dicha descarga. Si lo desea acceda a la web oficial de Adobe para realizar la descarga del archivo instalable de Photoshop desde este enlace. Puede acceder al tutorial desde este enlace.
Qué es HTML5 y para qué sirve
[siteorigin_widget class=»SiteOrigin_Widget_Image_Widget»][/siteorigin_widget] Mucho son los profesionales que opinan que HTML5 vendría a reemplazar muchos estándares web y que en un futuro se transformará en el lenguaje de programación por excelencia de sitios on-line. Este tipo de código es la versión más nueva del Lenguaje de Marcado de Hipertexto que es el lenguaje de programación con que se programan las páginas web. Cambia los conceptos del desarrollo y del diseño web que se tenían al proporcionar nuevas herramientas notables como etiquetas que permiten la publicación de archivos de audio y video con soportes de distintos codecs; tags para que los usuarios dibujen contenidos en 2D y 3D, evolución en los formularios y un estilo de web semántica a la que se le saca mas partido. Actualmente la gran mayoría de los contenidos que se visualizan en los navegadores están desarrollados en HTML. Sin embargo, este lenguaje fue limitado a textos e imágenes estáticas. Otra herramienta de diseño es la tecnología Flash, desarrollada en un principio por Macromedia y ahora en manos del gigante Adobe, utilizada para que los contenidos pudieran ser dinámicos e interactivos. Según informa la misma compañía, el 99% de los usuarios de Internet hacen uso de ella. Ahora nos encontramos en la situación de que esta tecnología una vez que ha sobrevivido a Steve Jobs está amenazada nuevamente con el surgimiento del HTML5, al igual que su símil Java también siente de temblar sus pilares. Los puntos donde se encuentra el enfrentamiento entre Flash y HTML5 son cuatro: coste económico, poder en su extricto significado, penetración en los usuarios y eficiencia. Si por un lado Adobe Flash Player es gratuito, las herramientas para desarrollar este tipo de contenidos tienen un costo realmente excesivo, por el contrario, desarrollar contenidos dinámicos en HTML5 es totalmente gratuito. En cuanto al poder de desarrollo, Flash gana un punto a su favor puesto que permite crear muchos efectos particulares que no son (hasta ahora) posibles en HTML5. Si hablamos de penetración en los usuarios, Flash está bloqueado en algunos equipos móviles como los terminales del gigante Apple y necesita softwares especiales para que funcione en otros como ciertos equipos de sobremesa, mientras que HTML5 tiene la particularidad de que es un estandar universal ya que se ejecuta en el navegador. ¿Cual es más eficiente? las pruebas que se han hecho con ambos sistemas tanto en Mac como en Windows no arrojan un resultado determinante salvo que con ambos se consume poco recursos del ordenador. A pesar de que en un futuro se espera que este nuevo lenguaje funcione a la perfección en todos los sistemas de navegación, incluyendo los dispositivos móviles sólo los navegadores 8.0 en adelante lo soportan. Por ahora nos encontramos con un mayor rendimeinto en Google Chrome, Safari y Mozilla Firefox, siendo Microsoft Internet Explorer el que se queda muy atrás en esta carrera al igual que en otras muchas cuestiones. Por lo pronto un navegador en el cual esté probado que todas las características funcionan a la perfección, este sería Mozilla FireFox 11.0 Puede encontrar más información relativa a este tipo de programación en la web oficial de www.w3.org a través de este enlace.
Tutorial para crear una tarjeta de crédito realista y presentarla en 3D con Photoshop – design.tutsplus.com
[siteorigin_widget class=»SiteOrigin_Widget_Image_Widget»][/siteorigin_widget] Queremos mostrarles un tutorial de diseño gráfico que nos enseña a desarrollar tarjetas de crédito y a presentarlas a modo 3D bastante realista mediante el uso de Photoshop. El tutorial es de la web design.tutsplus.com y se encuentra en inglés pero está acompañado de capturas de pantallas y es bastante intuitivo. Si no tiene mucho dominio del idioma inglés posiblemente no será un impedimento poder entender el tutorial. Puede descargar la versión de prueba de Photoshop en instalarla en su equipo por un periodo de prueba desde la web oficial de Adobe. Es necesario registarse para poder realizar dicha descarga. Si lo desea acceda a la web oficial de Adobe para realizar la descarga del instalable de Photoshop desde este enlace. Si desea acceder al tutorial puede hacerlo a través de este enlace.
Qué es Bootstrap y la razón de su exito
[siteorigin_widget class=»SiteOrigin_Widget_Image_Widget»][/siteorigin_widget] Desde la aparición de la web 2.0 Internet sin duda sufrió uno de sus cambios mas notables y a través de este proceso se ha transformado para dar acogida a todas las necesidades de sus usuarios, esto ha sido también el catalizador de que los sitios web también ha tenido que evolucionar con dicho cambio. Allá por el 2011 apareció en nuestro lenguaje profesional los llamados sitios web responsive o adaptables a todo tipo de pantallas y dispositivos fuese cual fuese su formato, dicha evolución de los sitios web se consiguió utilizando técnicas CSS avanzadas para su desarrollo o utilizando nuevos frameworks CSS como por ejemplo el protagonista de este post: Bootstrap. Pero ¿que es exactamente Bootstrap? Pues es un framework CSS desarrollado en el año 2011 por Twitter que permite diseñar sitios web mediante librerías CSS que incluyen tipografías, botones, cuadros, menús y otros elementos que pueden ser utilizados en cualquier sitio web. Aunque como ya hemos dicho el desarrollo del framework Bootstrap fue iniciado por Twitter, este fue liberado bajo licencia MIT en el año 2011 y su desarrollo continua en un repositorio de GitHub. Bootstrap es una excelente herramienta para crear interfaces de usuario limpias y totalmente adaptables a todo tipo de dispositivos y pantallas, sea cual sea su formato. Además nos ofrece las herramientas necesarias para crear cualquier tipo de sitio web utilizando los estilos y los elementos de sus multiples librerías. Otro punto muy imprtante a tener en cuenta por el desarrollador web es la compatibilidad con los navegadores y Boostrap es compatible con la mayoría de navegadores web del mercado: – Google Chrome (en todas las plataformas). – Mozilla Firefox (en Mac y en Windows). – Safari (tanto en iOS como en Mac). – Internet Explorer (en Windows y Windows Phone). – Opera (en Windows y Mac). Con la evolución que ha sufrido hasta encontarse ahora como Bootstrap 3 el framework se ha vuelto bastante más compatible con desarrollo web responsive, entre otros puntos lo han mejorado en lo siguiente: – Soporte casi completo para HTML5 y CSS3, permitiendo ser usado de forma muy flexible para desarrollo web. – Se ha añadido un sistema GRID que permite diseñar usando un GRID de 12 columnas donde se debe plasmar el contenido, con esto podemos desarrollar responsive de una manera más fácil e intuitiva. – Boostrap 3 nos permite insertar imágenes responsive, es decir, con solo insertar la imagen con la clase “img-responsive” las imágenes se adaptaran al tamaño. Boostrap 3 establece Media Queries para 4 tamaños de dispositivos diferentes variando dependiendo del tamaño de la pantalla del visitante, estas Media Queries permiten desarrollar para dispositivos móviles y tablets de forma más fácil. Este listado de mejoras hacen que tengamos Boostrap como una excelente opción para desarrollar webs y aplicaciones web totalmente adaptables a cualquier tipo de dispositivo en nuestros futuros proyectos. Todos sabemos del exito que tiene WordPress en internet y existen muchísimos themes para WordPress que tienen una base Bootstrap o están desarrollados directamente con Bootstrap, es más, podemos decir que actualmente el 80% de los themes para WordPress que son responsive están desarrollados con una base Bootstrap. Este frameworks CSS es de los más famosos y uno de los más utilizados, ya que muchos sitios web de los que visitamos en el día a día están creados con esta técnica y por eso hemos querido dedicarle este post.
Tutorial de creación de anaglifos con efecto 3D – photoshoplady.com
[siteorigin_widget class=»SiteOrigin_Widget_Image_Widget»][/siteorigin_widget] Una vez mas dedicamos este post al diseño gráfico. Esta vez les enlazamos con un tutorial para aplicar a imágenes el efecto 3D y así crear nuestros propios anaglifos mediante el uso de Photoshop. El tutorial es de la web photoshoplady.com y está en inglés pero está acompañado de capturas de pantallas y es bastante intuitivo. Si no tiene mucho dominio del idioma inglés posiblemente no será un impedimento. Puede descargar la versión de prueba de Photoshop en instalarla en su equipo por un periodo de prueba desde la web oficial de Adobe. Es necesario registarse para poder realizar dicha descarga. Si lo desea acceda a la web oficial de Adobe para realizar la descarga del archivo instalable de Photoshop desde este enlace. Puede acceder al tutorial desde este enlace.
70 Tutoriales para Adobe Illustrator – designrfix.com
[siteorigin_widget class=»SiteOrigin_Widget_Image_Widget»][/siteorigin_widget] Este post se lo dedicamos al diseño gráfico y en especial al uso de archivos vectoriales. La web de descarga de recursos designrfix.com nos ofrece 70 tutoriales para avanzar en nuestro nivel de uso de Illustrator el software de diseño vectorial de la casa Adobe. Puede descargar la versión de prueba de este software desde la web oficial de Adobe a través de este enlace, solo tiene que registrarse, descargarlo e instalarlo en su equipo. Puede acceder al website para acceder a los tutoriales de diseño desde este enlace.
Website especializado en tutoriales relacionados con el diseño gráfico – vectips.com
[siteorigin_widget class=»SiteOrigin_Widget_Image_Widget»][/siteorigin_widget] Desde este post les ofrecemos un enlace a la web vectips.com especializada en tutoriales relacionados con el ámbito del diseño gráfico y más especialmente al diseño gráfico basado en vectores. Este website, todo un clásico nos ofrece una amplia selección de tutoriales desde los cuales aprender múltiples técnicas, descargar recursos de diseño e incluso buscar inspiración para nuestros proyectos. Puede acceder a la web desde este enlace.
