• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
LA ISLA DEL FARO

LA ISLA DEL FARO

Noticias sobre tecnología, tutoriales de programación, diseño web y experimentos.

Main navigation

  • About JotaGarciaz
  • About Clare
  • Blog
  • Críticas de Cursos
  • Contacto

Web

Pesadilla en la cocina: tratando de subir Emancipia a Azure

22 mayo, 2019 by JGarciaz Leave a Comment

¡Hola! Hace un tiempo os hablé de mi proyecto con Emancipia, y en qué lo iba a desarrollar. Tras empezar a trabajar en ello, me di cuenta de que lo idea para esta aplicación era hacerla con MEAN. Creo que es ideal por las características propias que tiene la app actual, y hacia dónde quieren ir con el proyecto.

Aprovechando que soy Microsoft Student Partner, decidí subir mi primera versión de la app en la nube de Microsoft. Así podría comprobar su correcto funcionamiento.

Primeros intentos con Azure.

No soy experto en subir apps programadas en NodeJS a la nube de Microsoft. Así que decidí seguir uno de los numerosos tutoriales que aparecen en la documentación de Azure. Como ya llevo un tiempo en el mundo de la programación, no me sorprendí en absoluto cuando, al subir mi aplicación, esta no funcionaba. Al fin y al cabo, dependía de un elemento creado por Microsoft que tenía que detectar automáticamente la configuración de mi app. Todo apuntaba a un fracaso, y así fue.

Docker.

Mirando otras guías de Azure, vi que me recomendaban que usara Docker, que iba a ser más fácil. Decían que ni siquiera necesitaba conocer su configuración. Con un fantástico vídeo y Visual Studio Code ¡iba a poder subir mi app! Craso error. Si ya era difícil que el servidor configurase mi app automáticamente, conseguir que funcionase sin tener ni idea era aún peor.

En más de 20 horas de investigación solo había conseguido hacer funcionar un Docker container ya creado por otro usuario. Y también alguna aplicación de ejemplo de Microsoft, que funcionan siguiendo los tutoriales. Esto es algo curioso porque en otras tecnologías hasta los ejemplos suelen fallar.

Kudu.

Tras tantas horas de fracaso, he pensado en subir mi app a otras nubes. Creo que pueden ser más fáciles de trabajar, o tener ejemplos más actualizados y útiles. Además, también estoy mirando el framework Kudu para que me ayude con la configuración. Aunque tenga pinta de estar bastante en beta y no creo que funcione. Ya veremos…

Y ahora, tras desfogarme un poco, seguiré buscando la solución. Si la tenéis y queréis dejármela en los comentarios, os lo agradeceré. Y, si la encuentro, prometo traer un tutorial que funcione de verdad, para que vosotros no tengáis este problema.

Un saludo a todo el mundo ????

Filed Under: Blog, Diseño, Web Tagged With: app, azure, cloud, docker, Emancipia, kudu, MEAN, microsoft, MSP, nodejs, nube

Cómo mejoramos el sistema al diseñar laisladelfaro

23 enero, 2019 by JGarciaz Leave a Comment

En el post de hoy comentaremos por encima cómo llevábamos a cabo el desarrollo del diseño de laisladelfaro anteriormente, y cómo trabajamos para diseñar ahora. Empecemos.

¿Cómo trabajábamos para diseñar antes?

Antes teníamos una copia de La Isla del Faro en nuestros ordenadores. Lo hicimos así para poder trabajar en local y, cuando teníamos tiempo para diseñar, arrancar Visual Studio Code (VSC). Al hacer eso, solamente teníamos que cargar la carpeta raíz de la web y desde ahí empezar a diseñar.

Cuando estábamos satisfechos con los cambios teníamos que subirlos al servidor. Para ello usábamos un plugin de VSC llamado ftp-simple. Este plugin permite, con una rápida configuración, conectarnos al servidor mediante ftp y subir los archivos modificados.

Imagen de ftp-simple en laisltdelfaro.com

Sin embargo, cuando se subían teníamos que aceptar un mensaje de sobreescritura por cada archivo modificado. Como esto terminaba resultado pesado, e implicaba mucho tiempo que por desgracia no tenemos, decidí que había que tomar cartas en el asunto y cambiar el sistema.

¿Como lo hemos solucionado?

Ya que VSC me gusta mucho y quería seguir usándolo, decidí usar git. Para ello creé un repositorio vacío en el servidor y lo configuré para poder ser compartido y usado por otros ordenadores.

Lo primero que hice fue configurar el ssh para que no me pidiese la contraseña cada vez que quisiera acceder. En cambio, debía requerir una clave pública, para comprobar que quienes accedían éramos nosotros.

ssh-keygen -t rsa -b 4096
ssh-copy-id -i ~/.ssh/nombre user@host

nombre = como hayas nombrado al archivo en el paso anterior, o id_rsa si no has puesto ninguno.

user = usuario de acceso mediante ssh a tu servidor.

host = dirección ip o dominio de tu servidor.

De esta manera podiamos ejecutar los siguientes pasos cómodamente.

El siguiente paso era descargarnos el repositorio mediante ssh.

git clone --bare myproject ssh://user@server:/GitRepository/myproject.git

myproject = cómo quieres nombrar la carpeta del proyecto en tu ordenador.

user = cómo se llama el usuario ssh de tu servidor.

server = dirección IP o dominio del servidor.

/GitRepository/myproject.git = dirección donde esté ubicado el repositorio en el servidor.

Ahora deberemos meter la web que teníamos en local en ese repositorio.

Por último, deberemos configurar el repositorio del servidor accediendo al repositorio, a la carpeta hooks y creando un archivo llamado post-receive. Este archivo nos permitía cambiar los archivos de la carpeta del servidor cuando hacíamos un commit. Así, cuando subíamos un cambio, este se modificará automáticamente en el servidor.

De paso decidí configurarlo para trabajar con GitHub.

¿Qué hemos ganado?

Para empezar, hemos ganado un montón de velocidad en cuanto al desarrollo. Ahora, con un par de clics en VSC o un par de comandos en la terminal puedes ver los cambios en el servidor. Para verlo en VSC usamos las extensiones GitHub Build Status y Visual Studio Team Services.

GitHub Build Status en laisltdelfaro.com Visual Studio Team Services en laisltdelfaro.com

Además, ya no tenemos que lidiar con el molesto mensaje de sobreeescribir archivos. Ni tampoco tenemos que acordarnos de qué archivos hemos modificado en esa sesión de trabajo, ya que del control de versiones se encarga git. Si hay un cambio que ya no nos gusta, podemos hacer un rollback y listo.

Tampoco necesitamos introducir la contraseña cada vez que queremos entrar mediante ssh. Y en este hilo, hemos ganado en seguridad, porque ahora solo nuestra clave privada puede conectarse con esa clave pública.

Como conclusión, podemos decir que aveces, un poquito más de tiempo configurando, se ahorra mucho más a la larga.

Y vosotros, ¿cómo lleváis a cabo el desarrollo de vuestras web?

 

Filed Under: Blog, Diseño, Tutoriales, Web Tagged With: clave privada, clave publica, diseñar paginas web, diseño, diseño web, GitHub, laisladelfaro, ssh, Visual Studio Code

RESTful API

15 diciembre, 2017 by JGarciaz Leave a Comment

Se conoce como API (del inglés: “Application Programming Interface”), o Interfaz de programación de Aplicaciones al conjunto de rutinas, funciones y procedimientos (métodos) que permite utilizar recursos de un software por otro, sirviendo como una capa de abstracción o intermediario. – Wikipedia

Imagen explicativa de una RESTful API.
Fuente: e-learningcenter.com

Podemos decir que, gracias a las API, podemos relacionar distintos tipos de tecnología. Esto se debe a que se comparten datos en un formato genérico que cualquier tecnología podría interpretar.

Consultas y Respuestas.

Si aún no os habéis dado cuenta, las páginas web funcionan esencialmente por Consultas y Respuestas. ¿Esto qué quiere decir? Pongamos un ejemplo.

Si un usuario quiere registrarse en este blog, realizará una petición para que el servidor le entregue la página de registro. Una vez que se la han entregado, el usuario rellenará los datos. Cuando pulse en enviar, el servidor leerá las respuestas.

Para saber cómo se leen los datos en el servidor, o cómo enviarlos, existen una serie de elementos de envío, como POST, GET o PUT.

Utilización de la RESTful API.

A su vez, para comprobar que los datos se han recibido correctamente, o han fallado, o te has comunicado de una forma incorrecta con el servidor, se han creado una serie de errores, como el famoso 404 o error Page Not Found.

Así pues, una RESTful API deberá manejar estas comunicaciones y estos errores, de forma que cuando alguien maneje la API sepa si todo ha ido correctamente, o si los datos se han pasado como debían hacerlo.

Todos estos datos se devuelven al servidor, o se envían a este en forma de Datos Estructurados. Algunos ejemplos pueden ser XML o JSON, del cual ya hemos hablado en el blog.

Ejemplo en una empresa.

Un ejemplo podría ser Emancipia. La aplicación que estoy desarrollando para ellos usa esta tecnología. De esta forma, trabajamos con el servidor para extraer y guardar datos en la base de datos. La programación en lado cliente interpretará esos datos, y se los mostrará a los clientes. Así, estos podrán interactuar con ellos. Además, si el día de mañana necesitamos hacer una aplicación de escritorio, o una app móvil, les resultará relativamente fácil implementarla. Esto se debe a que la extracción e inserción de datos ya estará creada en nuestro servicio RESTful.

Imagen de ejemplo de una API de Twitter.
Imagen de TweetDeck App, que usa la API de Twitter. Fuente: idownloadblog.com

Obviamente, no somos los primeros que implementamos una API en su empresa para poder trabajar mejor con sus aplicaciones. De hecho, hay empresas muy conocidas que no solo tienen una API para trabajo interno, sino que encima tienen funcionalidades abiertas para que desarrolladores ajenos a la compañía también puedan usar sus datos y enviar nuevos. Algunos ejemplos de estos casos son Facebook, Twitter, Google, Spotify, Amazon y Steam.

Si una empresa tiene este servicio disponible, lo normal es que sea fácilmente localizable. Con tan solo buscar el nombre de la empresa seguido de API debería aparecer.

Si estás empezando a programar y crees que esto debe de ser para programadores de nivel avanzado estás muy equivocado. Las APIs suelen venir perfectamente documentadas, lo cual es muy cómodo. Al final, extraer los datos que quieres de ellas es tan fácil como leer un archivo de tipo JSON o XML.

Filed Under: Blog, Herramientas, Información, Web Tagged With: amazon, Emancipia, error 404, facebook, google, JSON, RESTful API, servidor, spotify, steam, twitter, XML

La importancia de las URL en el SEO

13 diciembre, 2017 by JGarciaz Leave a Comment

Hoy en día todo el mundo habla de posicionarse en Google. Hay un montón de estudios de buena praxis, e incluso Google tiene su propia guía para principiantes de Google, que te inicia en el SEO. Te recomiendo que le eches un ojo, porque quién va a explicarte mejor qué debes hacer para indexarte en Google que ellos mismos. Las URL, aunque parezca mentira, también juegan un factor importantisimo a la hora de indexarte en Google. Por ello, mi recomendación personal es que programéis vuestra web con URL amigables o ‘pretty URL‘.

URL amigables para el SEO.

Ejemplo de URL amigable.
Ejemplo de URL amigable: laisladelfaro.com/about-jgarcia/

Las URL amigables, a diferencia de las convencionales, son URL que son perfectamente entendibles por un usuario de la página. Es decir, este sabe lo que está pasando al entrar en esa dirección. Por ejemplo, una URL amigable puede ser medida.com/volumen/metro-cubico. Esta URL, que me acabo de inventar sobre la marcha para medida.com, ayudará al usuario a identificar que dentro de medida se encuentra en el apartado de medidas de volumen, dando a intuir que puede haber otros apartados como el apartado distancia, y a su vez está informándose sobre metro cúbico.

Como podrás ver he puesto metro-cubico sin acentos y con un guion en medio separando las palabras. Esto es así porque con un – en medio en la mayoría de casos en informática y en concreto en Google se identifica que son dos palabras distintas. En cambio, si pones guion bajo u otras alternativas que se te puedan ocurrir, le dificultarás el trabajo a Google.

Por otro lado, muchos ya sabréis también que las tildes no son muy amigas de la informática y que muchas veces no se interpretan como deben. Por esto, es importante evitarlas.

Como verás, esa URL se interpreta mucho mejor que una URL convencional (como podría ser medida.com?p=12), donde no sabríamos que está pasando.

Ejemplo de URL no amigable.
Ejemplo de URL no amigable.

Agrupaciones.

Gracias a las agrupaciones, como en el caso de la pretty URL con /volumen/, Google va entender que eso puede ser una categoría. Esto hará que, posiblemente, al cabo del tiempo tu página se muestre en Google con enlaces a las categorías. Esto hará que tu página ocupe más en los resultados de Google y, por lo tanto, llame más la atención.

Por si tienes dudas a la hora de planificar tus URL, Google da más importancia a lo que aparece más a la izquierda. Así, por ejemplo, en medida.com daría más importancia a medida.com. Luego, con algo menos de importancia, estaría volumen y, por último, metro-cubico.

Por lo tanto, en un principio será más fácil que nos encuentren si buscan medida o buscan volumen que si buscan metro-cubico.

A mí el tema de SEO me llama mucho la atención y espero que a vosotros os enganche también. Sobre todo porque así os podré crear más guías sobre el tema.

Así que nada más que decir. Espero vuestro feedback y hasta la próxima ????

Filed Under: Blog, Diseño, Información, Web Tagged With: agrupaciones, amigables, diseño web, google, importancia, indexar, SEO, URL

Proyecto Emancipia (Parte 2).

5 noviembre, 2017 by JGarciaz Leave a Comment

Bienvenidos de nuevo. Hoy continuaremos con la segunda parte del Proyecto Emancipia. En este apartado vamos a hablar de las herramientas que usaré para el desarrollo de la nueva app.

Netbeans.

La primera herramienta que os traigo es Netbeans. En esta herramienta desarrollaremos el código de Symfony y Angular. Si queréis instalarla para seguir lo que voy a contar, os dejo por aquí una guía de cómo hacerlo, por si necesitáis la ayuda.

 

Github.

La segunda herramienta es Github. Esta herramienta tan famosa entre los desarrolladores nos servirá para el control de versiones. Además, me vendrá bien por si en algún momento la lío, poder hacer un roll back. Para los que no lo sepáis, un roll back implica volver a antes de la operación que estaba realizando.

Brackets.

La siguiente que instalaré será Brackets. Me gusta mucho utilizarla para el diseño de la página. Principalmente, porque tiene muchos complementos interesantes que podrán ayudarme.

Cygwin.

Esta herramienta no es realmente necesaria. Sin embargo, creo que me facilitará la instalación posterior de herramientas útiles como Composer.

Azure.

También necesitaremos una cuenta con saldo en Azure, para poder configurar nuestro Web Service. Para quien no lo sepa, el Web Service es el lugar donde iremos subiendo los cambios útiles de nuestro proyecto.

Xampp.

Esta herramienta es útil para trabajar en local antes de subir los cambios a la web. Aunque pueda sonar banal, si una vez que hemos cambiado la web necesita alguna actualización, esta herramienta será cómoda para probar los cambios que queramos hacer sin tocar lo que ya está subido.

Apuntes, guías y tutoriales.

Por último, pero no menos importante, necesitaremos apuntes, guías y tutoriales, escogiendo los que más nos gusten. En mi caso, por ejemplo, para Symfony usaré la guía de Symfony; StackOverflow para preguntas y dudas, y los tutoriales de Victor Robles.

Filed Under: Blog, Diseño, Información, Web Tagged With: azure, brackets, cygwin, GitHub, netbeans, proyecto emancipia, victor robles, xampp

DNS

3 noviembre, 2017 by JGarciaz Leave a Comment

Hola de nuevo. En mi afán por que todo el mundo monte su propia página web, aunque solo sea por experimentar, he decidido escribir este pequeño artículo sobre DNS. Creo que es bastante importante si ya habéis comprado un nombre de dominio. También si ya tenéis la web alojada en algún sitio. Es importante porque con él podrás hacer la interconexión entre ambos.

Google DNS

¿Qué es el DNS?

Muchos conoceréis que los dispositivos, cuando se conectan a internet, pasan a estar identificados por un número largo llamado IP. Un ejemplo de IP sería 192.168.1.1. Es decir, a groso modo, cualquier dispositivo tiene una IP en internet. Esto también involucra a los servidores de paginas web, y gracias a ello nosotros podemos entrar en ellas.

Así pues, por ejemplo el que os he puesto no llega realmente a salir a internet, es una IP local. Por ello, si intentas meter esa IP en la barra de direcciones de tu navegador, como mucho entrarás a la configuración de tu router. En cambio, si escribes 216.58.210.131 o 74.125.29.101, verás como entras a Google. Así es como navegamos realmente por internet, aunque nosotros no lo sepamos.

Y no lo sabemos por culpa del DNS.

El DNS es el Domain Name System o, en castellano, Sistema de Nombres de Dominio. Nos permite «decorar» nuestra IP de forma que cuando alguien pregunte por una dirección por ejemplo http://google.es esta dirección se interprete como 216.58.210.131. 

Podemos imaginarnos los DNS como una gran tabla en la que hay nombres de webs y su correspondencia de IP, para que cuando queramos buscar una página mediante su nombre podamos acudir a él, ver cuál es su IP y entonces entrar con ella.

Todo esto es invisible para el usuario final, pero útil de saber para el encargado de la web.

¿Por qué los dominios tienen dos DNS?

Muchas veces nos encontraremos con dominios que tienen dos DNS.

Esto se hace así por precaución ya que, como todo en informática, puede fallar. En ese caso, podría ser que se cayese algún DNS. Así que, para que la gente pueda seguir conectándose mientras el DNS falla, hay un DNS secundario al que se le podría consultar por la IP del dominio.

Configuración de DNS.

Si tienes comprado un dominio, podrás buscar en el sitio en el que lo compraste hasta encontrar una sección que te permita configurarlo.

Estos son algunos de los ajustes que puedes hacer:

DNS Tipo A

En este apartado tendremos que poner la IP de nuestro servidor, VPS y el hosting en el que tengamos almacenado nuestra web. De esta forma, cuando se pregunte por el nombre de dominio, este devolverá la IP de nuestro servidor, y por lo tanto la web si lo tenemos bien configurado.

DNS Tipo AAAA

Este apartado sirve para las IPv6, que son más largas que las IPs antiguas, llamadas IPv4. Estas IPv4 son como los ejemplo de IPs anteriores. Un ejemplo de IPv6 sería 2001:0db8:85a3:08d3:1319:8a2e:0370:7334.

Las IPv6 se sacaron principalmente para ser utilizadas cuando se agotasen las IPv4. La configuración sirve para lo mismo que las anteriores. El único cambio es que introducimos la IPv6 de nuestro servidor en caso de tenerla.

DNS Tipo MX

Si tenemos un servidor de correo y queremos mandar correos con nuestro nombre de dominio en este apartado deberíamos colocar la IP de nuestro servidor de correos.

Con esto me refiero a crear direcciones de correo, por ejemplo, como podría ser la de La isla del faro: jgarcia@laisladelfaro.com

DNS CName

Para enmascarar otra web a la que te dirijas. Por ejemplo: www.laisladelfaro.com podría pasar a ser la laisladelfaro.com

Para el caso que he puesto como ejemplo, bastaría con poner en este apartado laisladelfaro.com y listo.

DNS TXT

Para añadir texto con un identificador. Así por ejemplo, en vez de subir un archivo de verificación que te pide Google al inscribir tu sitio en Google webmasters, puedes poner el valor en este DNS y Google te lo validará como si hubieras subido el archivo.

Si mi proveedor de dominios no tiene la configuración de DNS, ¿qué hago?

Podremos usar Dynahosting, aunque la configuración es complicada y no conozco ningún tutorial bueno para facilitar el link. Si conseguís alguno bueno, por favor hacédmelo llegar, para que cuelgue el link aquí.

Y, en un principio, esto sería todo lo que considero necesario conocer si uno se plantea configurar un dominio para que apunte a su página web.

Si queréis seguir trabajando en ello, lo siguiente que os recomendaría hacer para vuestra web es instalar un certificado SSL.

Filed Under: Blog, Diseño, Información, Web Tagged With: dirección ip, dns, domain name system, dominio

  • Page 1
  • Page 2
  • Next Page »

Primary Sidebar

Suscríbete a La isla del faro

¿Quieres recibir correos con las nuevas entradas?

Si la respuesta es sí, introduce tu dirección de correo electrónico.

Únete a otros 83 suscriptores

Buscar en el blog

Síguenos

  • Twitter
  • Instagram
  • YouTube
Privacidad y cookies: este sitio utiliza cookies. Al continuar utilizando esta web, aceptas su uso.
Para obtener más información, incluido cómo controlar las cookies, consulta aquí: Política de cookies

Copyright © 2022 · Mojave on Genesis Framework · WordPress · Log in

 

Cargando comentarios...