¿Que aprender para ser desarrollador web?
Hoy vamos a hablar acerca de una pregunta que me está llegando mucho últimamente, que me está haciendo mucho la gente, que es de la siguiente: ¿Que tengo que aprender para ser desarrollador web? ¿Que tengo que hacer para ser programador web? ¿Por dónde empiezo en el mundo de la web? ¿Como aprender desarrollo web de forma fácil y desde cero? Voy a contestar a estas preguntas en este...
Juntar imágenes y tablas en un HTML para Gmail
A veces cuando estamos maquetando una newsletter en HTML para Gmail con herramientas como MailChimp u otras propias, tenemos la necesidad de unir o juntar imágenes o tablas en este HTML. Como sabes para maquetar correos electrónicos tenemos que hacerlo con tablas y con css en línea para que lo interpreten bien los diferentes clientes de correo. Que podemos hacer para conseguir esto y juntar imágenes y tablas. A...
Instalar SASS en Windows
Hoy veremos como instalar SASS en Windows y como compilar ficheros scss a css. Descargamos RubyInstaller para Windows http://rubyinstaller.org/downloads/ Una vez instalado podemos utilizar la consola de ruby para instalar sass y compass: gem install sass gem install compass Cada vez que necesitemos compilar los cambios a CSS desde la consola de ruby ejecutamos el comando sass –watch estilos.scss:styles_compilados.css en el directorio donde tengamos el fichero scss. En teoría...
Solución: Pantalla en blanco con Apps híbridas Cordova en Android
Cuando desarrollamos una app híbrida, es decir, una aplicación móvil programada con HTML, CSS y JavaScript usando algún framework, como framework7, Ionic, jQuery Mobile, PhoneGap etc y luego creamos un apk, es decir, compilamos ese código usando Cordova, es común que cuando ejecutamos esa app en una simulación de Android o en un Android de verdad, la splash screen sobrepase el tiempo de espera(timeout) y se quede una pantalla...
Instalar Framework7
Framework7 es un framework que nos permite desarrollar aplicaciones moviles hibridas con HTML, CSS y JavaScript. Es un framework muy completo y además tiene dos «modos» modo material design para Android y modo «IOS» para aplicaciones para móviles y tables de Apple. Si eres desarrollador web te será facil hacer aplicaciones con Framework7. Veamos como instalar Framework7. En primer lugar tenemos que tener instalado node.js, lo descargamos desde su...
Doble borde con CSS
Hoy veremos como poner un doble borde con CSS a una caja utilizando la propiedad outline. Ejemplo: <!DOCTYPE html> <html> <head> <style> div { padding: 20px; height:80px; width: 180px; border: 3px solid green; outline: 5px solid black; } </style> </head> <body> <div>DOBLE BORDE CON CSS victorroblesweb.es</div> </body> </html> Resultado: Más información:...
Puntos suspensivos con jQuery DotDotDot
Hoy vamos a ver algo muy útil, cuando estamos maquetando con CSS a veces puede interesarnos hacer que el texto que sobresale de una caja siga estando presente en la web y ademas se ajuste a los diferentes tamaños que pueda tener dicha caja. Para ello veremos como poner puntos suspensivos con jQuery DotDotDot. Descargamos e incluimos los ficheros JavaScript dentro de la etiqueta head del HTML. <head> <script...
Redireccionar si es Internet Explorer
Podemos detectar y redireccionar si es Internet Explorer con un pequeño hack que llamamos IF IE. No es mas que un comentario condicional que nos permite ejecutar un código si utilizamos Internet Explorer. Se pueden usar los operadores «menor que» (lt), «mayor que» (gt), «menor o igual que» (lte), «mayor o igual que» (gte) al igual que en Shell Script. Si el navegador es una versión menor a IE10....
Empezar con LESS rápido
No nos engañemos LESS no hace magia, si no sabes CSS de poco te servirá LESS, por eso es importante que te manejes bien con CSS antes de empezar con LESS. Aquí veremos los conceptos más básicos para empezar con LESS rápido. Supongo que ya tienes instalado LESS y si no puedes ver como se hace aquí. Variables LESS incorpora la posibilidad de utilizar variables en nuestros CSS cosa...
Instalar LESS en Windows
Como sabemos LESS es un preprocesador CSS que «extiende» este lenguaje de hojas de estilo y lo dota de características propias de un lenguaje de programación convencional, lo cual es sumamente interesante. Hoy veremos como instalar LESS en Windows para comenzar a trabajar con el. En primer lugar instalaremos node.js en nuestro sistema. Una vez que lo tengamos instalado abriremos la consola de comandos de node e instalaremos el...
Recortar imágenes con Jcrop y PHPThumb
Hoy vamos a ver como recortar imágenes con Jcrop y PHPThumb. Jcrop es un plugin para jQuery que nos permite seleccionar de forma visual un área de una imagen y guardar las coordenadas seleccionadas en un formulario que enviaremos a un script PHP el cual recortará la imagen. Para hacer efectivo el recorte utilizaremos la librería para PHP PHPThumb que es muy sencilla de utilizar y funciona estupendamente. El...
Pelota que rebota con Javascript
Vamos a ver como se hace el famoso efecto de los salvapantallas, el efecto de pelota que rebota con Javascript, el elemento se moverá por los ejes X, Y y Z. Vamos a conseguir esto: Para comprender el ejemplo debes saber HTML, algo de CSS y programación básica con JS <!DOCTYPE HTML> <html lang="es"> <head> <meta charset="utf-8"/> <title>Mover bola en el eje Z con dentro de una caja JS</title>...