Contratando un dominio .xyz con hosting gratuito, en Hostinger.

Hola navegantes! Llevaba mucho tiempo sin publicar nada, pero he sacado algo de tiempo para traeros este sencillo tutorial de como registrar un nombre de dominio .xyz y contratar una cuenta de hosting gratuito para alojar los archivos de nuestra web.

En Hostinger y 000Webhost los dominios .xyz están muy pero que muy baratos, así que este es el dominio que voy a elegir. Quiero el dominio para una web sencilla en html que utilizamos para clases de informática en la asociación de vecinos con la que colaboro, también aprovecharé y crearé un subdominio para la web de pruebas de html que usé en anteriores post. Suena mas de lo que es, con el interfaz de usuario del servicio web de Hostinger es muy fácil.

Lo primero es registrarnos como usuarios en Hostinger.es (el registro es gratuito) y una vez registrados hacemos clic en la pestaña "Dominios" de los menús de la parte superior la pantalla.

Después salimos a otro menú donde podemos comprobar si nuestro dominio está disponible

Una vez comprobado que el dominio elegido está libre pasamos a contratarlo simplemente haciendo clic en el botón "Selecciona" un poco mas a la derecha (1); después a "Continuar con el carrito" (2) e iremos a pagar a la pantalla de pago, desde donde podremos elegir el método de pago y se nos detallan los detalles de nuestra compra/contrato.

Detalles finales de la compra.

Eligiendo método de pago

Una vez pagado nos aparecerá una pantalla de confirmación y ya podremos ver la información relativa a nuestro dominio, incluyendo la configuración del DNS. Siempre había oído o leído que puede tardar algunas horas el poder acceder a tu dominio desde la barra de direcciones del navegador pero en mi caso en unos minutos ya puedo acceder, es el primer dominio que compro así que no tengo otras experiencias para comparar 😅

Ahora voy a contratar una cuenta de hosting gratuito en la que alojaré la web. Solo tenemos que hacer clic en la pestaña "Hosting" en el menú de la parte superior de la pantalla del que os hablé anteriormente. Una vez allí, buscamos el botón "Nueva cuenta de hosting" y hacemos clic. Nos aparecerán varias tarifas de hosting, por esta vez elegiremos la gratuita y cuando nos pregunte la dirección, señalamos el dominio que acabamos de contratar.

Cuando termines este proceso, en tu menú de "Hostings" tendrás algo parecido a la imagen inferior; y haciendo clic en el + que he rodeado con el circulo rojo en la imagen se abre un menú con las opciones imprescindibles de un servicio de hosting: Administración/configuración, creación e instalación de plantillas (que proporciona el mismo servicio) y el correo (En otros servicios el correo está incluido en la sección de configuración).

Si hacemos clic en "Administrar" iremos a parar a un menú como el de la imagen siguiente; en este menú tenemos todas las opciones necesarias para controlar nuestro hosting. Lo primero que tendríamos que hacer, o por lo menos lo primero que yo hago siempre; es crear una cuenta FTP para manejar los archivos (3), recordad que es conveniente que uséis un nombre de usuario y una contraseña fuertes para evitar sustos. 

Despueś vamos a la sección "Subdominios" (4) y allí voy a crear un subdominio para mi web de pruebas de html.

El dominio que he elegido es informaticafacil.xyz asi que el subdominio que elegiré será probandohtml.informaticafacil.xyz; es un poco largo pero se recuerda fácil también. Lo que haces en realidad es crear una carpeta dentro de la carpeta HOME de la cuenta del servidor que corresponde a tu host. Os dejo una captura de pantalla de Filezilla para que veáis lo que digo.

En la imagen siguiente podéis ver como queda el menú "Subdominios" dentro del menú "Administración" de nuestra cuenta de hosting. Creo que es bastante sencillo y he intentado explicarlo lo mejor posible; si hay dudas, solo dejadme un comentario. Por 1,40 € creo que merece la pena hacerse un dominio .xyz aunque solo sea para probar; eso si, ojo con la letra pequeña, en Hostinger o en cualquier servicio de host, porque las ofertas muchas veces son muy tentadoras pero solo el primer año, luego a la hora de renovar la cosa cambia; por ejemplo en mi caso el segundo año serán 11 €, que tampoco es una fortuna pero hay que tenerlo en cuenta porque en otros servicios de host llegan a cuadruplicar esa cantidad, lo que ya es para mirarlo.

 Y sin mas me despido hasta el siguiente post; adiós a todos!!

Creando una web con HTML (III) El Host + Filezilla.

Hola desarrolladores! En la última entrada nos quedamos listos para subir los archivos Html al host. Estos días he estado dudando entre si hacerlo a través de la web o por ftp o ambos. Al final me he decidido por ftp con el programa Filezilla. Hacerlo con la web es muy sencillo y por ftp no tanto; ¿porque por ftp? Después de muchas pruebas la única razón que veo para hacerlo es por el ancho de banda y no es un tema baladí. Los archivos html son en el fondo archivos de texto que pesan muy poquito, cuando te conectas por la web estas cargando una web con todos sus javascript, cookies, php, web analitics, y a veces un montón de servicios mientras  que por ftp te conectas directamente con la máquina donde va a estar alojado y subes los archivos. Dicho de otra manera puedes crear/actualizar tu web con una conexión 3g de móvil incluso a velocidad de tortuga lo que seguro que en algún momento te puede ser útil o necesario.

El programa Filezilla está disponible para todas las plataformas, es muy ligero, soporta FTP, FTP sobre SSL/TLS (FTPS) y SSH File Transfer Protocol (SFTP) y también te permite encriptar las conexiones con Tor y/o pasarlas por un proxy, vamos que es la leche. En otros servicios de host como 000webhost o Byethost las cuentas de ftp se generan automáticamente con un nombre de usuario y una contraseña genérica que luego nos permite modificar, en Hostinger tenemos que crear nosotros una cuenta FTP, pero vamos ahora veréis que no problem.

Lo primero entramos en nuestra cuenta recién creada y vamos a "Cuentas FTP" y "crear nueva" nos saldrá una pantalla como esta:

No olvidéis señalar la carpeta donde van a ir las subidas, os lo marco con la flecha.

introducimos nuestro nombre de usuario y la contraseña,

Hostinger nos da la opción de generar una contraseña enrevesada para mejorar la seguridad.

Una vez rellenado el formulario ya tendremos nuestra cuenta ftp creada, solo tenemos que guardar los datos en un archivo de texto: nombre del servidor, (que suele ser ftp.nombrededomino, en este caso ftp.probandohtml.esy.es); nombre de usuario y contraseña y ya podemos abrir Filezilla.

Como dijo Jack the Ripper, vamos por partes:

1. Zona de mensajes, aquí se visualizan todos los mensajes del diálogo entre tu pc y el servidor host.
2. Carpetas del sitio local, o la carpeta de tu pc desde donde vas a subir los archivos.
3. Carpetas del sitio remoto, las carpetas del host donde vas a subirlos.
4. Zona de transferencias, log donde se van registrando las transferencias, activas, en cola de espera o fallidas.

Para añadir nuestra conexión nueva podríamos poner los datos en las ventanas que tenemos justo encima de 1 pero para que la conexión sea automática hacemos clic en el icono que os marco con la flecha roja.

Aqui es donde tenemos que introducir los datos que hemos guardado cuando creamos la cuenta ftp; seleccionamos "nuevo sitio", introducimos el nombre del servidor, elegimos "modo de acceso - Normal" en el desplegable y luego usuario, contraseña y conectar abajo del todo. ¡Listo! veremos en 1 aparecer los mensajes del diálogo entre nuestro pc y el host.

Ya solo nos falta ir subiendo los archivos desde la carpeta local(2) hasta la carpeta remota(3), simplemente podemos ir arrastrándolos, individualmente o todos a la vez, ya que luego se añaden a la cola y se van subiendo de uno en uno. Por cierto veréis en vuestra carpeta remota que hay un archivo default.php deberíais borrarlo para que luego cuando entréis la URL se cargue el index.html.

Y bueno amigos ya podéis probar mi web-test en http://probandohtml.esy.es, ya os aviso no está completa, en un siguiente post haré un formulario con mailto y analizaremos la conveniencia de usar este método en lo que afecta a la accesibilidad. 

nota: filezilla es en realidad un GUI para conexión por ftp que se puede hacer también por terminal de comandos, de hecho en tiempos se hacía así, los que uséis Linux seguro que alguna vez lo habéis probado pues en este SO tarde o temprano tienes que usar la terminal. Mas info sobre el protocolo FTP en el link.

Creando una web en HTML (II): Pruebas y validación. Registro del host.

En el anterior post os enseñe como estoy creando una web con HTML para el curso; estos días ya he ido trabajando en ella y he adelantado bastante así que voy a registrarme una cuenta en servicio de hosting gratuito y a subir el trabajo que llevo hecho. Pero primero vamos a ver como me está quedando la página.

Como veis ya va cogiendo forma pero en la cabecera hay un pequeño problema aparentemente; el abecedario no aparece completo según la resolución de la pantalla en la que se vea se ven mas o menos letras. Lógicamente al ser el menú en forma de lista y este marco solo abarca un 30% de la pantalla pues no cabe completo. Tendría que posicionarlo de forma horizontal pero eso lo haré usando el CSS (cascade style sheet). Por cierto, durante el curso apenas vemos nada de esto así que me permito recomendaros que busquéis algo de literatura sobre el tema que hay mucha, en internet en formato ebook o en cualquier biblioteca pública municipal tendréis seguro algún libro, en concreto el libro de Javier Eguiluz Perez "Introduccion a CSS" es muy bueno y podéis comprarlo por internet y seguro que si lo buscáis lo podéis encontrar gratis. Sin el CSS hoy en día saber HTML no sirve de mucho; y como muestra un botón.

Como véis el CSS marca la diferencia; en concreto esta hoja de estilos es de una plantilla Html gratuita (poned estas tres palabras en cualquier buscador y encontraréis muchas) que venía con su hoja CSS y la he modificado para la ocasión. El CSS tiene cierta complejidad pero la verdad es que es muy satisfactorio y como pasa con el Html si sabéis inglés lo aprenderéis mas o menos rápido.

Antes de subir los archivos al hosting sería recomendable validar el html para ver los errores que he podido cometer en el standard y ¡sorpresa! ¿Recordáis en el anterior post que os dije que había cometido un error? Pues la validación me muestra que tengo muchos errores menores y varios graves, pero sobre todo he hecho mal la declaración <!Doctype>  y seguramente que está mal en todos los archivos, os recuerdo: uno para cada letra del abecedario.

El caso es que he puesto la declaración así:  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

y era asi:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 

Y por esas dos letras el validador no me reconoce siquiera el documento Html como XHTML Frameset sino como HTML Transitional, lo que en algunos navegadores puede provocar graves errores en la visualización como ya he comentado antes. Además también he planteado mal el etiquetado de los marcos:

¿¿22 errores y 9 advertencias!! buff

Después unos largos minutos de comprobación tras comprobación:

2 errores y una advertencia, de momento nos conformamos.

Bueno ahí va mi otro consejo de hoy: validad el html en cuanto terminéis las páginas principales del proyecto porque si vais copiapegando también iréis multiplicando los errores y será peor repararlos luego, además validar no es sólo útil para localizar errores, algunos navegadores intentan compensar la falta de destreza entre los desarrolladores web solucionando errores en el código HTML y mostrando las páginas como suponen que deberían visualizarse. Sin embargo, otros navegadores podrían intentar mostrarlas de forma diferente o no mostrarlas en absoluto. Validar puede servirte de gran ayuda para encontrar errores que ni siquiera sabías que existían. Y si: puede ser muy angustioso el proceso.

Y ahora tocaría subir los archivos a un servicio de host; pero para no alargar demasiado el post solo nos registraremos y crearemos el subdominio y dejamos la subida para el siguiente. Para este caso voy a elegir Hostinger porque está totalmente en castellano y es muy sencillo su funcionamiento.

Tras el registro elegimos la opcion "nuevo hosting"

Elegimos la opcíon "gratis"

Elegimos subdominio y contraseña

¡Y listo!! ya lo tenemos, no os perdáis la siguiente entrada en la que subiré el Html al host y podréis probar la web. Hasta pronto.