Si eres diseñador web y realizas mantenimientos de páginas o websites sobre tecnologías HTML, PHP, CSS, … , te interesará saber que se pueden realizar ediciones de webs desde tu Smartphone o Tablet en tiempo real. Además estas apps existen para sistemas Android e iOS. Pero nos podríamos cuestionar, si no sería mejor trabajar desde un equipo sobremesa, que realmente es más rápido y eficaz. Existiendo más área gráfica y ofreciendo más posibilidades. Realmente es mejor y más cómodo desde equipos escritorio, pero este tipo de aplicaciones en smartphones y tablets están orientadas a realizar modificaciones temporales, desde cualquier sitio, atender emergencias, o realizar sencillos cambios y ediciones rápidas. Aunque si dominamos su uso, podríamos llegar trabajar casi tan rápido en caso de ser un Tablet, con un teclado bluetooth, con dispositivos de pantalla algo más grandes. Existen varias Apps en el mercado tanto en Google play y Apple Store, pero he querido resaltar las que he probado porque permiten realizar conexiones FTP y trabajar 100% online. Este aspecto de poseer las 2 opciones lo he considerado muy interesante. Son pues editores HTML que incorporan opciones de transferencias FTP, sFTP, colaborativas (github)… Se edita, si se envía inmediatamente.
Responsive Web Design. Conjeturas y conceptos.
Existen una serie de estrategias, conceptos y técnicas que comprenden el diseño responsive. Uno de los principales problemas existentes cuando un diseñador crea contenidos para la web, es que se va a encontrar con diferentes escenarios, variables, dispositivos, resoluciones, navegadores y sistemas operativos. Además estos dispositivos cambian todos los días, existiendo diversos tamaños de pantallas desde los equipos fijos hasta los móviles. Responsive Design fue ideado por Ethan Marcotte (http://ethanmarcotte.com) y es una estrategia de diseño para la creación de contenidos para que funcionen y respondan de forma adecuada independientemente de la resolución del dispositivo o la pantalla. Ethan identificó 3 técnicas diferentes. Lo primero las Rejillas fluidas para crear diseños flexibles. Las Imágenes flexibles que respondan a los cambios de pantalla, es decir contenidos multimedia adaptables. Y para finalizar el uso de Media Queries. Debido a los cambios existentes en el mercado, sobre todo en el diseño web, los creadores necesitaran tener en mente estas 3 técnicas para crear sitios que sean visualizados en diferentes marcos o escenarios. El mundo del diseño web es muy cambiante. Podemos recordar aquellos tiempos en los que el diseño de sitios web en flash arrasaba en Internet. Algo parecido ocurría con las resoluciones, Se creaban sitios para resoluciones que se consideraban estándar, como los 640×480 pixel de pantalla, luego poco a poco, esta resolución fue cambiando a los 800×600, 1024×768, etc. Con la llegada de los móviles, se planteó crear 2 webs diferentes en función del dispositivo que la visualizaba. Como podemos apreciar han existido y siguen existiendo grandes cambios.
Paneles de control para gestión de hosting, dominios y facturación.
Si actualmente estas ofreciendo productos web es vital automatizar los procesos relacionados. Estos pueden ser facturas, soporte, gestión de envíos, notificaciones, registro de dominios, transferencias, etc. Existen varias aplicaciones, muchas de ellas online disponibles para realizar esto. Para tareas de hosting, registro de dominos y facturación, estas son las más interesantes…
BootStrap, el prefabricado de la web. Monográfico: Conceptos y algunas alternativas. Parte II
Parte II – Adentrándonos más en Bootstrap Sistema de Rejilla en Bootstrap. http://getbootstrap.com/css/#grid-options El ancho de la pantalla se divide en 12 columnas por defecto. Estas 12 dejan entre ellas un espacio de 30px (15 a cada lado), por cada lado hay un margen de 15px del contenedor. El contenedor de las columnas se centra en pantalla, es fluido, se adapta al tamaño de la ventana y en su interior alberga filas. Las filas agrupan columnas. Para que las columnas funcionen adecuadamente tienen que ir dentro de las filas y todas ellas dentro de un contenedor. A esas columnas es posible aplicarle las clases(prefijo) que definen la media querie empleada. Por defecto es xs de mobile first. Una regla básica es que la suma de las columnas existentes en una fila no sumen más de 12. Y no aplicar estilos que existen entre las columnas para evitar saltos. Sigamos …
Recursos interesantes relacionados con el HTML5, CSS y JAVASCRIPT
Recursos y enlaces interesantes relacionados con el HTML5, CSS3 y Javascript
Trucos y técnicas de diseño avanzado FrontEnd en HTML
El desarrollo de websites ha cambiado en los últimos años de forma sustancial. Es por ello que proyectos grandes requieren de equipos multidisciplinares de trabajo. Lo que antes hacia un webmaster, ahora es inviable para grandes desarrollos y se requiere de grupos profesionales especializados. Estos equipos están formados por miembros con diversos perfiles, desde los desarrolladores Front-End, administradores de bases de datos, programadores Back-end, administradores de sistemas, consultores, analistas, etc. Además existen metodologías de trabajo que coordinan el desarrollo y avance del proyecto así como herramientas software para compartir ficheros a modo de repositorio. Ejemplos actuales de gran éxito pueden ser Github,Mercury, etc. En esta entrada, os dejaré una serie de ideas y herramientas de desarrollo que marcan las últimas tendencias en el despliegue del FrontEnd, es decir, esa parte que permite crear interfaces de usuario. No necesariamente pueden emplease estos consejos, puesto que existe mucha libertad a la hora de desarrollar, pero son tendencia en desarrollo.
Estudio sobre las fuentes locales y web. Crea tus tipos, ahorra tinta y se ecológico.
Conjeturas sobre el uso de fuentes En esta entrada analizaré aspectos sobre el uso de las fuentes tanto a nivel local como en la web. Por otro lado, os mostraré que con algunos trucos podemos ahorrar hasta el 20% de tinta siendo una medida bastante interesante para nuestros bolsillos además de ser respetuosa con el medio ambiente. Para muchos usuarios, el empleo de las fuentes suele ser un tema bastante desconocido. Simplemente las usamos desde programas ofimáticos como Word, cuando creamos documentos y seleccionamos la fuente que necesitamos. Es necesario conocer que muchas de las aplicaciones que instalamos nos agregan tipos de letra a nuestro ordenador sin darnos cuenta de ello. Cuantas más fuentes dispongamos, más recursos emplearemos, y la carga de las aplicaciones y el sistema se verán afectados de forma negativa.
Resumen JQuery, un vistazo rápido a sus funciones. Cheat Sheet
En esta entrada dejo un resumen de funciones JQuery bastante útiles para consultar rápidamente una determinada llamada o como recordatorio. Es mi chuleta de trabajo. En la parte inferior, dejo imágenes más completas a modo resumen. jQuery es una libreria de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC. jQuery es la librería de JavaScript más utilizada en el mundo.
Ejemplos de AJAX sencillos. Recordando conceptos.
En esta entrada dejo unos ejemplos sencillos de uso de las tecnologías AJAX para recordar su uso. El primero muestra aspectos básicos, el segundo rescata de una base de datos sqlite información mediante llamadas GET AJAX. Es necesario refrescar que AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.
Convierte películas Flash en HTML5. Curiosidades. Reutiliza tus animaciones anteriores.
Hace ya tiempo, el empleo de Adobe/Macromedia Flash en los proyectos web era algo muy habitual y extenso. A raíz de la llegada de las posibilidades de HTML5, dispositivos no compatibles (iphone, ipad) y la polémicas del formato de vídeo, su uso fue descendiendo de forma radical. Muchos desarrolladores y empresas tenían proyectos realizados en Flash. Realmente la herramienta es muy versátil y potente, su grado de conocimiento y fama muy extenso. En esta entrada, os mostraré los pasos necesarios para adaptar y reutilizar las peliculas .FLA. Aprovechando nuestro trabajo previo para los nuevos medios, navegadores y dispositivos aparte de aplicar conocimiento anterior de la herramienta multimedia de Adobe.
Alternativas y herramientas para la creación de animaciones HTML5 al estilo Flash
En esta entrada voy a exponeros las herramientas que he encontrado para crear animaciones al estilo Flash, pero generando HTML5. Como sabréis, la desventaja principal del empleo de películas Flash es la no inclusión ni soporte por parte de Apple, en dispositivos como iPad e IPhone. Poco a poco el gigante informático de Apple ha ido desbancando al programa Flash con un potente competidor, el HTML5. Por otro lado, aquellos que conozcan la filosofía de funcionamiento de estas herramientas no encontrarán grandes problemas para usarlas.
¿Cómo ejecutar un Servidor web Apache en un pendrive ó CD?. Sin instalación, con soporte de Mysql, SQlite y PHP e Incorporación de cifrado.
En esta entrada os voy a mostrar como ejecutar un proyecto php out of the box, es decir, desde un CD o USB sin necesidad de instalación. En un medio de sólo lectura. Para ello emplearemos un programa excelente, libre y sin rollalties de distribución. Hablamos de Server2go.
Crear un CSS reset
En esta entrada os dejo un código para crear un CSS reset y comenzar a diseñar las webs desde 0.
