Cada vez son más las empresas que se van adaptando, poco a poco, a las nuevas tecnologías y a las aplicaciones que tienen.
Una de las aplicaciones más útiles a día de hoy son el almacenamiento en la nube.
Empecemos por el principio.
Definimos Nube como aquel espacio en un servidor determinado, el cual, permite guardar información, datos o archivos entre otras cosas.
Hasta hace unos años, la gente guardaba toda la información en su ordenador, como puede ser imágenes, trabajos, documentos o e-mails. Pero desde hace unos años hasta el ahora, el cloud computing ha ido 'in crescendo', ya que se ha descubierto que puede llegar a ser muy útil, tanto a nivel personal como empresarial.
El funcionamiento de la nube es muy simple, al igual que cualquier persona puede guardar información en su propio pc, la información se guarda en un servidor externo, es decir, una empresa que dispone de muchos servidores, proporciona una acceso a dicho servicio, permitiendo guardar todo lo que queramos en sus servidores.
Definamos también que es un servidor, para comprender correctamente el funcionamiento de la nube. Un servidor, en grandes rasgos, es un ordenador que proporciona información o acceso a través de internet, pero con unos componentes (hardware) muy potentes.
Existen muchos servicios de 'nube', desde Dropbox, que fue el pionero, hasta los propios de Google (Drive), Microsoft (OneDrive) o como Box, Cloudme, Mega, HiDrive, entre otros...
'La nube' se ha convertido en una herramienta esencial e imprescindible con la que podemos realizar muchísimas funciones.
- Almacenar copias de seguridad.
- Compartir imágenes, archivos, documentos, entre otros.
- Crear una carpeta, donde todo el contenido que se añada, lo puedan ver todas aquellas personas con las que se ha compartido dicha carpeta, es decir, al crear una carpeta, tu puedes añadir gente, para que esa carpeta esté compartida (a través de internet) con las personas que quieras. Todo lo que se incluya en la carpeta, también les aparecerá a estas otras personas. Esto es muy útil, por ejemplo, en caso de que los miembros de una familia estén separados por mucha distancia, ya que al crear una carpeta de familia, y añadir cada cierto tiempo fotos a la carpeta, todos los miembros de la familia podrán estar al tanto de las novedades.
- Puedes acceder al contenido desde smartphone, tablet u ordenador, de manera que ya no existen las distancias Por ejemplo, para una empresa, le puede suponer un gran ahorro de dinero, ya que el jefe podrá acceder a la información interna de la empresa, sin tener que desplazarse hasta ella.
- Ahorras espacio en tu ordenador personal, para añadir aquello que se quiera a la nube.
- Ahorro en mantenimiento técnico, ya que nos proporcionan una capacidad de almacenamiento determinada cuyo coste es 0 (en caso de escoger el pack gratuito que todas las compañías tienen).
- Almacenar una web y todo el contenido de la misma. Por ejemplo, en Hostingato.
Pero no todo lo que reluce es oro, utilizar la nube también tiene una serie de inconvenientes:
- Falta de seguridad, ya que no es lo normal, pero un hacker podría acceder a dicha información almacenada en tu nube y robar datos confidenciales.
- Sin internet no hay nube y necesitamos conexión a internet en todo momento.
- Problemas de cobertura legal. Los servidores que se usen, pueden estar en cualquier parte del mundo, no necesariamente ha de estar en el territorio nacional donde vivamos, de manera que en muchas ocasiones, en caso de tener problemas, no se sabe que ley se debe de aplicar o si ésta podrá proteger al cliente.
- Conflictos de propiedad intelectual, ya que la información de los clientes ya no está en sus propias manos, sino en las manos de una empresa que puede, hasta cierto punto, hacer lo que quiera con tu propia información. Por lo general no suelen hacer nada, pero piensa en todo momento que tu no estás almacenando la información, sino una empresa externa, y en caso de hacer 'algo' con tu información, tu nunca lo sabrás.
Actualmente, hay muchas empresas que están en el proceso de evolución de la nube. Una de las funciones que se van a expandir en los próximos años es, a partir de una conexión a internet, acceder a un sistema operativo (como puede ser Windows o Linux) directamente desde la propia nube, de manera que no tendremos que adquirir un disco duro para nuestro pc, sino con una simple tarjeta de memoria, arrancamos el ordenar y carga automáticamente el sistema operativo de nuestra nube.
Las funciones y utilidades de la nube son infinitas, y conforme vayan pasando los años se descubrirán nuevos usos, que harán seguir evolucionando dentro de este etéreo, pero impresionante campo, el cloud computing.
Seguramente alguna vez hayas añadido en tu proyecto Web código jQuery de terceros para insertar algún slider, lightbox o cualquier otra librería de jQuery para crear las impresionantes animaciones que nos ofrece este.
Cuando unes varios códigos de terceros te pueden surgir problemas de compatibilidad entre ellos, pero afortunadamente jQuery ha creado una función para solucionar este problema y es tan fácil como agregar a tu código jQuery.noConflict();
Supongamos que tenemos un slider y un lightbox y quieres hacer funcionar los dos, tendrías un código como el siguiente:
Tendríamos un conflicto entre las dos librerías y una de ellas dejaría de funcionar, para evitarlo, en cualquiera de ellos añadiríamos jQuery.noConflict(); y sustituiríamos todos los $ por la palabra jQuery.
¿Sencillo verdad? Pero alguien se puede preguntar, ¿y si tengo tres librerías?, bien pues solamente deberíamos asignar una variable a jQuery.noConflict y utilizarla de la misma forma:
También funciona para conflictos entre Prototype y Scriptaculous. Recuerda, usa jQuery.noConflict con cabeza y no abuses si no es necesario o convertirás tu código en un jolgorio.
Los tiempos que corren están haciendo que las empresas analicen los costes fijos de funcionamiento e intentando recortarlos en la medida de lo posible. El Hosting no ha quedado ajeno a este problema y muchos observan diferentes formas de abaratar el coste.
Una de las opciones que eligen algunas personas es llevarse sus sitios Web y las páginas de sus clientes a servidores y empresas en el extranjero atraídos por un precio menor, pero a la larga puede ser perjudicial, tanto en tiempo, por la dificultad de resolver sus incidencias rápidamente, como económico, ya que pueden ser los clientes los que quieren cambiar de Hosting . En Hostingato te queremos explicar las ventajas de tener hospedadas tus Web en España.
La idiosincrasia a la que estamos acostumbrados en España es muy particular y a veces puede ser tremendamente complicado entenderse con alguien de fuera de nuestras fronteras aunque hable nuestro propio idioma.
Mientras todo funciona no hay problema. Pero cuando se tiene que contactar ya sea para pedir ayuda técnica o pedir la explicación de una factura puede volverse un proceso complicado más aún cuando no hay soporte en Español.
Si tienes algún problema y quieres realizar una reclamación formal o solicitar una devolución puedes descubrir la dificultad para demandar a una empresa extranjera desde España (aunque haya una sentencia del 17/10/2013 que asigna la responsabilidad de la empresa extrangera en España. Ver sentencia)
También es importante saber de qué forma se contabilizarán las facturas emitidas por estas empresas.
Alojar información personal en servidores extranjeros incumple las leyes de protección de datos Española pudiendo tener problemas e incluso acarrear importantes multas.
A la hora de posicionar nuestro sitio Web y aparecer en resultados segmentados de los buscadores es importante este aspecto técnico para mejorar nuestro posicionamiento, además de estar cumpliendo con la Ley de Protección de Datos al estar los servidores de Hostingato en España.
Cada día que pasa me voy dando más cuenta de que la programación es esencial, es algo que todos los niños deberían de aprender (incluso antes que otras cosas como la sintaxis de una oración). Programar tiene muchas ventajas, desde aumentar la paciencia (porque sí, en ocasiones desespera mucho cuando estas atascado), hasta comprender las matemáticas lógicas o ver, una vez finalizado el proyecto, que todo funciona, y esa alegría interna de que todo ha salido y esta correctamente hecho, no tiene precio.
Otro aspecto por lo que la programación es esencial es porque en un futuro, no muy lejano, se ofertarán mas trabajos de programador que de otras muchas ramas o sectores, ya que los avances tecnológicos hacen que los programas o robots hagan nuestro trabajo por nosotros, de manera que por un lado se eliminarán puestos de trabajo y por otro, se necesitarán muchos mas programadores para programar tanto los software como los robots.
Seamos sinceros, actualmente ya es muy importante el papel que realiza un programador, pero en un futuro lo será aun mayor. Por ello, y para adelantarnos a los acontecimientos, vamos a exponer 10 sitios (web y canales de youtube) donde aprender a programar apps para Android, desde cero a nivel experto. Recordar que una de las fuentes donde mayor beneficio económico se genera es en las apps de pago o contenidos con micropagos de las app de Android e iOS, por ello, vamos a hablar de programar en Android. Comencemos.
1) Curso de programación de Sgoliver.net
¿Buscas un curso para programar en Android y que sea totalmente gratuito? Pues la web de Sgoliver dispone de un curso muy completo y en castellano. Hasta hace unos meses había que hacer una pequeña aportación mediante PayPal para descargarlo, pero ahora eso es opcional, y podemos acceder al curso y consultar todo el material de forma gratuita.
En esta web podréis encontrar un curso en castellano con varias lecciones básicas para dar los primeros 'pinitos' en la programación de Android.
Es una web muy sencilla, pero muy útil al mismo tiempo. Dispone de un cursillo clasificado en partes y sub-lecciones para comenzar, poco a poco, a programar en Android. El curso como la web está en castellano y cuenta con un foro para solventar las dudas que tengamos.
4) Android 101 for iOS Developers
¿Ya sabes programar, pero en iOS, y ahora quieres aprender a programar en Android? No hay problema, esta web te explicará cómo es el desarrollo de aplicaciones en Android para todas aquellas personas que vengas de programar en iOS. Está en inglés, pero ¿eso no es problema a estas alturas no?.
Es una web en inglés donde podréis encontrar un tutorial dividido en varias partes muy breves para ver, paso a paso, como se empieza a programar en Android una app.
6) Curso de Android Studio (canal ProgrammingKnowledge)
Android Studio es un entorno de programación desarrollado por Google para facilitar las tareas a los programadores de Android. En el canal de ProgrammingKnowledge podremos encontrar una lista completa de videos para aprender a utilizar este entorno de programación.
Si ya tienes conocimientos a la hora de programar, este curso online quizás te interese, ya que será impartido por la Universidad Politécnica de Valencia, cuyo coste es totalmente gratuito. Este curso empieza en diciembre, así que aún podéis ir practicando.
Si eres de los que no tienen ni idea de programar, en este canal hay un curso introductorio repartido en 19 vídeos, muy útiles, didácticos y cortitos.
Google, como cualquier otra compañía, ofrece una serie de documentos oficiales para todos sus desarrolladores. Están en inglés, pero su lectura es obligatoria ya que es la biblia del buen programador de Android.
Esta vez no voy a entrar a criticar la práctica poco honesta de ofrecer alojamiento ilimitado cuando es falso, prefiero explicarte en qué consisten realmente estas ofertas de hosting y darte motivos de peso para contratar un hosting con unos límites garantizados como hacemos en Hostingato.
Primera pregunta. ¿Si hay proveedores que ofrecen hosting ilimitado por qué no contrata Facebook o la mismísima Google uno de estos planes por 10 euros al mes?
Se ahorrarían una pasta en montar sus propios Data Centers por todo el planeta, con una estimación de consumo energético de 258MW en el caso de Google y 2,5 millones de servidores con una capacidad estimada de almacenamiento de 10 Exabytes.
¡Pero que hacen si hay quien se lo ofrece por 10 euros al mes!
Muy fácil, hacen sobre venta de sus recursos, reventa, es decir venden a sus clientes el mismo recursos muchas veces partiendo de la base de que un cliente, al final solo utilizará una parte promedio pequeña. En vez de separar y asegurar el recurso contratado por el cliente es el usuario en cierta forma quien se disputará el recurso con los demás. Además de añadir una letra pequeña en la que hablan de los límites de inodes, es decir límite en el número de archivos.
¿Y tú que Hosting prefieres para tus proyectos o clientes?
Cada vez son más las personas que deciden formarse dentro del mundo que rodea el desarrollo web, desde la parte de programación, hasta la de diseño. El desarrollo web hace que te vuelvas más creativo, amplíes tu capacidad de percepción de las cosas, y busques la perfección en todo momento.
Todo esto no sería posible sin un conjunto de herramientas/recursos que nos ayude, sobre todo al principio, cuando comenzamos nuestros primeros “pinitos” en el desarrollo web.
Hay que recordar, que, en caso de no tener nociones básicas de programación, se recomienda que las adquiramos, al menos, para que una vez que tengamos un código delante, sepamos donde están las líneas de código que debemos de modificar o cambiar determinados valores.
En caso de que ya tengáis esas nociones básicas, no tendréis problemas en continuar.
Para ello, y antes de nada, vamos a explicar una serie de tecnicismos para que entendáis posteriormente las funciones que realizan todas las herramientas que vamos a definir.
- Responsive Web Design: también traducido como diseño responsive. Es aquel diseño que se le da a una web y se va a adaptar a diversas pantallas según donde estemos visualizando el contenido de la web (tablets, smartphone o Pc).
- Portfolio: muestra de nuestros trabajos o proyectos. Dentro del mundo de la fotografía se podría equivaler a un “Book”.
- Dominio: nombre que va a tener nuestra web. Ej: www.estoesunejemplo.com
- Hosting: servidor donde se va a almacenar toda la información que contenga la página web (archivos, imágenes, videos…)
- SEO: posicionamiento orgánico en buscadores.
- SEM: posicionamiento mediante pago en buscadores.
- Feedback: retroalimentación entre dos partes, por ejemplo, cliente y colaborador.
- Open source: software totalmente gratuito que permite que sea compartido, e incluso modificado para mejorarlo.
Una vez explicados algunos términos que vamos a utilizar, vamos a continuar hablando sobre 16 herramientas para el buen desarrollador web:
1. Sublime Text.
Este software es un editor de código multiplataforma, ligero y muy simple, tan simple, que se nota que ha sido creada para programar sin distracciones y de forma intuitiva.
Una de sus grandes ventajas es que permite tener varios documentos abiertos mediante pestañas, e incluso se puede utilizar con varios paneles en caso de usar más de un monitor.
2. Format.
Es una herramienta online para diseñar portfolios. Cuenta con diversos diseños responsive y plantillas, ampliar opciones de configuración y personalización.
3. Name Mesh.
Esta herramienta online tiene como función ayudar a encontrar el nombre de dominio más óptimo para nuestra web. Da la opción de crear dominios cortos, mezclar varias palabras en un solo dominio y también da consejos para el posicionamiento SEO.
4. Sitedrop.
¿Eres de esas personas que suelen tener grandes cantidades de archivos a la hora de realizar un trabajo? No te preocupes, Sitedrop permite conectarse con Dropbox para convertir una carpeta de Dropbox en apta para Sitedrop, pudiendo gestionar desde el escritorio toda la información y dando la opción de recibir feedbacks y archivos entre clientes y/o colaboradores.
5. Firebug.
Es un complemento para el navegador Mozilla Firefox y tiene como función editar, debugear y monitorizar los CSS al igual que el propio código HTML.
6. Tavern.
Es un espacio web donde se juntan diseñadores para realizar preguntas y respuestas. También se utiliza como fuente de información ya que muchas personas comparten y publican sus opiniones y experiencias.
7. Octicons.
Es una colección de iconos creador por Github. A la hora de realizar una web deberemos añadir diversos iconos y esta es una muy buena opción.
8. Color Hex.
Es un generador de colores. Genera tanto colores oscuros como claros.
9. KeePass.
KeePass es una herramienta muy útil, ya que, como gestor de contraseñas que es, guarda y protege mediante cifrado tus contraseñas y usuarios de todas aquellas cuentas que vayamos metiendo. Por cada cuenta que vayamos a meter, podemos introducir el nombre de usuario, la contraseña, una pequeña descripción y una URL.
10. Photoshop/Gimp.
¿Quién no conoce estas herramientas? Anteriormente ya hemos escrito sobre las virtudes de ambos programas de diseño gráfico. Ambos programas son por excelencia los más usados a nivel mundial para hacer creatividades, banners, diseños o retoques fotográficos.
11. Analytics.
Herramienta de Google totalmente gratuita que permite, a partir de estadísticas, ver la repercusión que tiene nuestra web, que tipo de visitas tenemos en nuestra web, sector geográfico, tiempo permanecido, entre otras funcionalidades….
12. Adwords.
Herramienta de Google para el posicionamiento SEM en el buscador de Google. Con esta utilidad tus clientes podrán ver tu anuncio o web en Google a partir de una serie de palabras clave.
13. Adsense.
Utilidad para ganar dinero en nuestra web por medio de banners de publicidad que mostrará anuncios personalizados.
14. URL Shortener.
Web de Google que hace más corta una URL.
15. Freepik.
Web donde encontrar diversas imágenes vectoriales, fotografías y creatividades que podemos usar de forma totalmente gratuita.
16. Typecast.
Aplicación que permite trabajar con más de 5000 fuentes de letras distintas en un solo panel de control. Una de las grandes ventajas de esta aplicación es que se puede obtener el código CSS para posteriormente utilizar dichas fuentes en nuestra página web.
Todo buen desarrollador utiliza algún tipo de editor de texto para crear código o modificar el código existente, ya sea de una app, software o página web, entre otros. Existe multitud de editores de texto, pero desde luego, y por experiencia, aún no he encontrado ninguno mejor que Sublime Text.
Este editor se caracteriza, en comparación de su competencia, por las siguientes características:
- Minimapa: es una previsualización de la estructura del código. Esto es muy útil ya que permite desplazarse por el archivo cuando se conoce bien la estructura del mismo.
- Multiselección: permite realizar una selección múltiple de un término por diferentes partes del archivo.
- Multicursos: crea cursores con los que podemos escribir texto de forma arbitraria en diferentes posiciones del archivo.
- Multi-layout: sublime text trae 7 configuraciones de plantilla con las que podemos editar en una sola ventana o hacer una división de hasta cuatro ventanas verticales o cuatro ventanas en cuadrículas.
- Soporte para muchos lenguajes: soporta de forma nativa, nada más y nada menos que 43 lenguajes de programación y texto plano.
- Syntax Highlight configurable: se puede configurar el remarcado de sintaxis a través de archivos de configuración del usuario.
- Autocompletado y marcado de llaves: se puede ir a la llave que cierra o abre un bloque de una forma realmente sencilla.
- Búsqueda dinámica: se pueden realizar búsquedas de expresiones regulares o por archivos, proyectos, directorios, conjunción o todo ello a la vez.
- Soporte de Snippets y plugins: permite la instalación de diversos plugins, snippets, macros y bundles.
- Configuración de Keybindings: podemos modificar las funciones de todas las teclas a nuestro gusto y antojo.
- Paleta de comandos.
- Coloreado y envoltura de sintaxis: en caso de escribir en un lenguaje de programación o marcado, resalta las expresiones propias de la sintaxis de ese lenguaje para facilitar su lectura.
- Pestañas: permite abrir varios documentos y organizarlos por pestañas.
- Resaltado de paréntesis e indentación: cuando el usuario coloca el cursor en un paréntesis, corchete o llave, resalta ésta.
Algunos de los lenguajes de programación soportados son:
- ActionScript
- AppleScript
- ASP
- Batch File
- C
- C#
- C++
- Clojure
- CSS
- D
- Diff
- Erlang
- Expresión regular
- Go
- Graphviz (DOT)
- Groovy
- Haskell
- HTML
- Java
- JavaScript
- LaTeX
- Lua
- Lisp
- Makefile
- Markdown
- MATLAB
- Objective-C
- Ocaml
- Perl
- PHP
- Python
- R
- Rails
- ReStructuredText
- Ruby
- Scala
- Shell Script (Bash)
- SQL
- Tcl
- Texto plano
- Textile
- XML
- XSL
- YAML
Por norma general, casi todas las webs mantienen la misma estructura, y quizás te preguntes porque ocurre esto. Vamos a crear la estructura que tendría una página web e iremos explicando la razón de cada una.
Esto sería una estructura final:
El tamaño en píxeles de los últimos monitores en Full HD no suele superar los 1920px en su horizontal, por eso esta estructura tampoco los supera. De esta manera un monitor actual vería la web como la imagen anterior, pero ¿y si el tamaño del monitor es de los antiguos CRT? La idea es que el contenido de la web esté en la zona naranja y se coloque al centro del monitor, de esta manera un CRT la vería así:
Como veis la zona naranja sigue estando visible que es la importante porque es la que contiene el contenido de la web, la única pega es que no vería el fondo completo que es la zona gris.
La cabecera (parte azul), siempre debe estar en la posición superior puesto que es la parte más importante de la web, te permite navegar por los diferentes menús y está presente en todas las partes de tu web.
Imaginemos que lo colocamos abajo, si un monitor es corto en cuanto a altura, tendríamos que hacer scroll vertical cada vez que queramos navegar por los menús y no sería una práctica muy favorable.
El fondo (parte gris), como hemos mencionado antes será mejor su visibilidad en monitores grandes, pero como no es una parte fundamental de la web se puede “perder” en monitores pequeños.
El cuerpo (parte naranja), aquí es donde colocamos el contenido e información más importante de nuestro sitio y de cada uno de nuestros menús.
El pie de página (parte rosa), se utiliza para colocar información adicional de la página web, tales como dirección, teléfono, email, etc.
Un dato importante es la visualización en dispositivos móviles, que la estructura se pierde un poco ya que hay que organizar los elementos según el dispositivo.
Nuestro creador web cumple con la estructura que hemos explicado y además adaptado a dispositivos móviles, de modo que no tendrías que preocuparte por este tema.
Ahora que ya conoces como se realiza una estructura te dejo un ejemplo creado con nuestro creador web:
Un problema habitual en las páginas web es el bloqueo que genera la ejecución del Javascript sobre el HTML. Esto se debe a que el navegador ejecuta todos los elementos de la web secuencialmente (si no se lo indicamos de otra manera). Esto afecta tanto a la velocidad de la carga como a la experiencia del usuario que lo está experimentando. HTML5 nos proporciona las etiquetas "async" y "defer", dos etiquetas que nos permiten flexibilizar la ejecución.
Compatibilidad de defer con los navegadores:
Compatibilidad de async con los navegadores:
Vamos a ver los diferentes tipos de ejecución. Este sería una ejecución secuencial:
La ejecución del HTML se corta para descargar y ejecutar el Javascript.
El uso de defer sería el siguiente:
Esta etiqueta nos permite recuperar el Javascript y ejecutarlo después del HTML. Lo cual ya nos ahorra la espera de recuperar el Javascript.
El uso de async sería el siguiente:
Esta etiqueta cortaría el proceso de ejecución del HTML para proceder solamente a la ejecución del Javascript. Esto, al igual que en la etiqueta anterior, nos ahorra tiempo de recuperación pero se ejecuta seguidamente.
Estas etiquetas nos solucionan el problema del tiempo de ejecución, y además incluyen algo a tener en cuenta, y es que, no podemos restarle importancia a la prioridad de ejecución de los Javascript, ya que podríamos ejecutar un JQuery antes de importar su librería. Esto sería una mala práctica que se soluciona dando prioridad a unos Javascript sobre otros.
La visualización de la carga de la página también cambiará. Dando lugar a una carga de la página por partes. Lo cual no es bonito a la vista del usuario ni del diseñador... Una solución a esto puede ser cargar un primera vista de la página e ir cambiándola con la ejecución de los Javascript poco a poco de forma controlada.
Realmente, estas etiquetas nos dan la ventaja de poder controlar los tiempos de ejecución de nuestra web. Pero un uso erróneo puede empeorar la apariencia y la experiencia.