Mostrando entradas con la etiqueta Bluefish. Mostrar todas las entradas
Mostrando entradas con la etiqueta Bluefish. Mostrar todas las entradas

viernes, 29 de abril de 2016

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.

miércoles, 20 de abril de 2016

Bluefish, un editor de texto especial para desarrollo web.

Hola amig@s! Este pasado fin de semana estuve investigando por el centro de Software de Ubuntu y encontré esta maravilla. Es el editor Bluefish , un editor de texto orientado al desarrollo web que desde luego que me ha impresionado y creo a vosotr@s también. Como es mi estilo en este blog, no voy a extenderme en enumerar las características de este programa porque para eso ya está  su página web, mejor os cuento un poco como ha sido mi experiencia con él en mis primeros pasos y ya si eso lo probáis y sacáis conclusiones. Sólo terminar esta intro diciendo que aunque la página web del proyecto está en inglés el programa está en castellano, bueno en realidad está traducido en 17 idiomas, osea que sin problemas por ese flanco. Vamos al lío...


Empezamos revisando esta imagen, asi de primeras se ve mas complejo que el notepad o incluso vim, pero para nada, es sencillísimo el manejo; además la vista es configurable y adaptable. Y está para todos los SO.

Bluefish a tamaño completo

Tiene todas las cosas que uso en Gvim como la edición de múltiples archivos simultáneamente (en su web dice que se pueden editar hasta 500 documentos) y autocompletado y coloreado de etiquetas, pero además tiene otras funcionalidades realmente sorprendentes pero casi prefiero señalarlas en esta imagen para que os hagáis mejor a la idea.


  1. Esta barra es un navegador de archivos, muy útil para cuando trabajes en proyectos que consten de varias páginas, además tiene otras funcionalidades que como llevo poco tiempo con Bluefish aun no se muy bien como usarlas; por su puesto la barra se puede plegar para dejarte mas sitio para la escritura.
  2. ¿Ves esas lineas verticales? Te marca el inicio y fin de las etiquetas dentro de los bloques de código, ideal para principiantes.
  3. Esto es ya la automatización máxime, aquí tienes los principales elementos que vas a usar en html, como puedes ver: listas, formularios, tablas etc... todo lo que hemos visto durante el curso lo tienes aquí; haces clic y te aparecen las etiquetas completas, apertura y cierre, con todas las variaciones y  atributos.   

Algunas otras funcionalidades interesantes como que si dejas el ratón encima de una etiqueta te informa sobre la función de la misma, en GNU/Linux tiene corrector ortográfico usando las librerías del sistema y corrector de sintaxis de etiquetas, que trabaja en UTF8 pero te permite usar cualquier codificación, y la que mas me ha sorprendido ¡te permite subir al servidor los archivos una vez terminados/editados! (de momento solo para GNU/Linux)

Bueno, bueno, desde luego este editor es totalmente recomendable tanto para el principiante como si ya tienes cierto nivel pues la automatización de la edición que tiene es fabulosa, haciendo la escritura de páginas web desde cero casi como hacerte un curriculum o trabajar con una plantilla, de hecho he estado haciendo ejercicios del curso y os aseguro que voy a dejar el Gvim que es demasiado avanzado para mi y me voy a pasar a este, que os recomiendo a tod@s pues os va a facilitar mucho el aprendizaje.

Repito mi recomendación de que probéis este programa que os recuerdo que está para GNU/Linux, FreeBSD, MacOS-X, Windows, OpenBSD and Solaris.

Y ya para terminar deciros que el proyecto tiene su propio servicio de host, no tiene host gratuito pero si estáis pensando alquilar uno quizás podáis echarle un vistazo. 
Saludos y hasta el próximo post.