Aprende a crear un sitio con bootstrap y sublime 3 (parte 2)

Seguimos el curso para aprender a crear un sitio con bootstrap (build-your-first-website-in-1-week) que pueden seguir ustedes de manera gratuita en Udemy. 

Pues bien, teníamos un sitio básico que tenía el típico hello world y un poco más de eso. Pero nosotros no queremos que sólo se vea un "hola mundo" en el sitio sino que el objetivo del curso es hacer un sitio como el que se ve a continuación:

Así que el basic tamplate que teníamos no nos será muy útil por lo que vamos a buscar otra plantilla en el sitio de bootstrap. La que más nos será útil será el template jumbotron.

Le damos clic y se abre la página:

Acto seguido con el botón derecho le picamos y nos vamos a ver el código fuente. Este código lo vamos a copiar y pegar en nuestro documento index. Obviamente primero eliminamos el código que tenemos en index para pegar el del template de jumbotron.

Salvamos el documento y recargamos la página de index o la abrimos y veremos que no se parece en nada a lo que queremos. Es decir, se ven los elementos básicos pero de ahí en más no parece ser lo que nosotros deseamos. El problema es el CSS.

Vemos que el link tiene un href que nos manda a bootstrap.min.css pero la ruta no es adecuada para nosotros así que habrá que cambiarla.

La cambiamos de tal manera que se enlace bien al archivo que nosotros tenemos en nuestra carpeta css.

Como ya tenemos el archivo css que queremos eliminamos el resto de archivos en la carpeta css.

Ya guardados los cambios recargamos nuestra página index y se verá como sigue:

Casi está listo, pero si observas la página que aparece cuando le diste clic al template de bootstrap, te darás cuenta que tiene entre la barra de navegación y el Hello, world! un espacio mayor que nuestra página index. Una vez más el problema es del css.

En nuestro código html hay otro link:

Nos está diciendo que el estilo de la página viene dado por jombotron.css, pero en nuestros archivos no tenemos ese código css así que hay que ir por él.

Volvemos a la página de donde copiamos el código fuente y buscamos el link href que vemos en la imagen de arriba.

Le picamos al hipervínculo jumbotron.css y nos va a abrir el código css.

El código de arriba lo copiamos y vamos al sublime text para abrir un archivo nuevo en css. Ahí pegmaos el código. Le damos guardar poniéndole como nombre a custom.css a nuestro nuevo archivo.

Guargamos y recargamos nuestra página index y ya tenemos el resultado deseado.

Hasta aquí esta parte.

@EricAraujoM

Aprende a crear un sitio con bootstrap y sublime 3 (for free) parte 1

Este es un resumen de lo que aprendí en Udemy en el curso Build Your First Website in 1 Week with HTML5 and CSS3, impartido por Ryan Bonhardt, quien nos enseña a construir un sitio web con las herramientas bootstrap y sublime text 3. Apenas llevo una pequeña parte pero ha sido buenísimo el curso y además gratis. 

Primero que nada es necesario que obtengamos sublime 3 y bootstrap, así que vamos a sus sitios respectivos y bajamos las herramientas, si es que aún no las tenemos.

Instalamos Sublime Text 3 y descomprimimos la carpeta que bajamos desde bootstrap.

Ahora bien, en el curso a la hora de bajar boostrap la carpeta que muestra el instructor viene con una carpeta menos. El instructor nos pide que renombremos la carpeta principal de bootstrap cuando descomprimimos el zip, sin embargo la que hay que renombrar es la carpeta que viene dentro de la carpeta principal, llamada disp, para que el ejercicio salga tal y como dice el instructor a la hora de abrir la carpeta con sublime text 3. El nombre que ponemos a la carpeta es first-site. Si no renombramos la carpeta disp y renombramos en su lugar la carpeta contenedora lo que pasará será lo que se observa en el directorio de la imagen siguiente. Es decir aparece una carpeta disp.

Recuerden que lo que se tiene que abrir es una carpeta completa no un archivo individual.

Renombrando la carpeta disp nos aparece el directorio que se observa en la imagen de abajo que es el que necesitamos.

Los archivos que se muestran en las carpetas css, fonts y js, los podemos observar en el sitio de bootstrap.

Luego vamos a la carpeta first-site que vemos en sublime text y con el botón derecho le picamos y le damos en archivo nuevo (new file).

Regresamos al sitio de bootstrap y copiamos el código que aparece como basic html template.

Este código lo pegamos en el archivo que recién hemos creado en sublime text.

Ahora grabamos el archivo con el nombre index.html en la carpeta first-site (donde la tengamos en nuestro equipo) pero fuera de la carpeta css, fonts o js. Una vez hecho esto aparecerá el nombre del archivo hasta abajo del directorio.

Ya tenemos nuestro primer sitio web, el cual saluda al mundo como sitio recién nacido. Sólo hay que ir a nuestra carpeta en la cual tenemos el archivo index.html y le damos clic para que se abra. En mi caso uso chrome, así que mi archivo index.html ya aparecía con el ícono de google chrome. 

El curso está programado para una semana. Esto fue lo del primer día.

@EricAraujoM

Estructura de un Sistema Gestor de Bases de Datos

En entradas apartados anteriores se abordó lo que eran los Sistemas Gestores de Bases de Datos, también conocidos como Sistemas de Gestión de Bases de Datos, por lo que en esta sección se abarca la estructura y el funcionamiento de un SGBD.

La estructura de un SGBD está conformada por:

• Procesador de consultas: Es su elemento principal de un SGBD, transforma las consultas en instrucciones en lenguaje de bajo nivel, que se envían al gestor.
• Gestor: Es la interfaz entre los datos de bajo nivel almacenados en la base de datos, acepta consultas y examina los esquemas externo y conceptual, posteriormente determina qué registros se requieren para satisfacer la petición.
• Gestor de ficheros: Se encarga de manejar y controlar los ficheros en almacenamiento en la base de datos.
• Lenguaje de Manipulación de Datos (MDL): trabaja con el procesador de consultas para el código apropiado.
• Lenguaje de Definición de Datos (LDD o DDL, por sus siglas en inglés Data Definition Language): Convierte las sentencias en un conjunto de tablas que contienen datos almacenados en el diccionario de datos.
• Diccionario de datos: Almacena la información de la base de datos.
• Gestor del diccionario: Controla los accesos y la información del Diccionario de datos.
• Control de autorización: Se encarga de revisar las credenciales de los usuarios para accesar a determinada información.
• Optimizador de consultas: Establece la estrategia para el procesamiento de las transacciones.
• Gestor de transacciones: Es la parte encargada de realizar las transacciones.
• Planificador: Organiza las transacciones que llegan a la base de datos para su realización.
• Gestor de recuperación: Cuida la integridad de la base de datos en caso del algún fallo.
• Gestor de buffers: Es el enlace entre la memoria principal y la memoria de almacenamiento.

*Apuntes tomados de la UNADM

MySQL vs PostgreSQL vs Oracle

¿Qué es un sistema gestor de base de datos?

Un sistema de gestión de base de datos (DBMS) es un conjunto de programas que permite almacenar, modificar y extraer información de una base de datos. Hay muchos tipos diferentes de DBMS, que van desde pequeños sistemas que se ejecutan en los ordenadores personales hasta grandes sistemas que se ejecutan en los mainframes. Los siguientes son ejemplos de aplicaciones de bases de datos:

-          Sistemas automatizados de bibliotecas

-          Cajeros automáticos

-          Sistemas de reserva de vuelo

-          Sistemas de control de inventarios

Desde un punto de vista técnico, los DBMS pueden variar ampliamente. Los términos relacionales, red, jerárquica, etcétera, todos se refieren a la forma en que un DBMS organiza la información internamente. La organización interna puede afectar la rapidez y flexibilidad con que se puede extraer información.

GESTORES LIBRES

MySQL

Una de las aplicaciones de bases de datos de código abierto más influyentes y ampliamente distribuidas que manipula grandes bases de datos y a la cual se puede acceder a través de la Web es el servidor de base de datos MySQL.

MySQL se ejecuta como un servicio que proporciona acceso a múltiples usuarios a varias bases de datos. MySQL es muy popular para las aplicaciones web y opera con los elementos de base de datos para las plataformas (Linux / BSD / Mac / Windows).

La popularidad de MySQL para su uso con aplicaciones web está estrechamente asociada a la popularidad del lenguaje de programación PHP que se utiliza a menudo junto con MySQL. Muchos sitios web de alto tráfico utilizan MySQL como backend para su almacén de datos. MySQL es muy popular entre las compañías de lanzamiento, pequeñas o medianas empresas y proyectos, ya que puede ser fácil de usar a un bajo costo.

PostgreSQL

Es un DBMS relacional que muchos desarrolladores de aplicaciones web prefieren como el componente de gestión de datos de back-end. Se utiliza principalmente por muchas organizaciones que cuentan con aplicaciones de misión crítica* o de amplio alcance. Los registros de nombres de dominio .info y .org lo utilizan como su almacén de datos principal, también lo hacen muchas instituciones financieras y grandes empresas.

Aunque PostgreSQL no es la opción correcta para cualquier proyecto, su conjunto de funciones avanzadas y ventajas clave, tales como el apoyo de la comunidad de código abierto, el costo de implementación muy bajo, y fácil administración lo convierten en el gran opción para aquellos que lo utilizan para la base de datos aplicadas al desarrollo de sitios web.

*Podemos entender por sistemas de misión crítica a aquellos servidores que ejecutan aplicaciones esenciales que, si fallan, tienen un impacto significativo en el funcionamiento de cualquier empresa, organización o institución que dependa de su información.

Oracle

Es uno de los principales sistemas comerciales de gestión de base de datos relacionales SQL. Está disponible en una variedad de configuraciones desde pequeñas versiones personales a prueba de fallos hasta versiones enormes de alcance empresarial.

Oracle ofrece muchísimas características y alta funcionalidad para resolver problemas complicados de bases de datos y es ampliamente usada por los almacenes de negocios medianos y grandes. Este sistema de gran alcance requiere una gran cantidad de conocimientos profundos y habilidad técnicas por parte de los administradores de bases de datos para su correcta implementación y mantenimiento.

Ventajas del SGBD MySQL (Software Libre)

·      Cualquiera puede usar y modificar el software, bajándolo desde Internet y usarlo sin coste alguno.

·         Su Servidor de Base de Datos es muy rápido, fiable y fácil de usar.

·  Tiene soporte para subconsultas, procedimientos almacenados y control de transacciones.

  

Desventajas del SGBD MySQL (Software Libre)

·        Los privilegios de una tabla no se eliminan automáticamente cuando se borra una tabla, hay que usar el comando REVOKE para quitar los privilegios de la tabla.

·         No tiene un panel de control gráfico y detallado.

·       El Soporte para disparadores es básico, por lo tanto hay limitaciones en lo que puede hacerse con ellos.

Ventajas del SGBD PostgreSQL (Software Libre) 

·         Es un Sistema de Gestión de Bases de Datos de código abierto y gratuito.

·      Permite el uso de particiones para la mejora de la eficiencia de replicación e incluso algunas versiones admiten la administración de Bases de Datos distribuidas.

·         Los tipos de Datos Internos han sido mejorados incluyendo nuevos tipos. 

Desventajas del SGBD PostgreSQL (Software Libre)

·         Es fácil de vulnerar sin protección adecuada.

·        Es un poco “Duro” ya que la sintaxis de algunos de sus comandos o sentencias no es nada intuitiva.

·        Consume más recursos por lo que se necesitan mayores características de hardware para ejecutarlo.

Ventajas del SGBD Oracle (Comercial)

·         Oracle es el motor de Bases de Datos Relacional más usado a nivel mundial y puede ejecutarse en cualquier plataforma, desde un simple PC hasta un Superordenador.

·         Soporta todas las funciones que se esperan de un Servidor “Serio” ya que dispone de un lenguaje de diseño de Bases de Datos muy completo como es el PL/SQL.

·         Este sistema ha comenzado añadiendo tipos de clases, referencias, tablas anidadas, matrices y otras estructuras de datos complejos.

Desventajas del SGBD Oracle (Comercial)

·         Las licencias de Oracle son excesivamente caras.

·     La necesidad de configurar bien Oracle, ya que si está mal configurado puede ser excesivamente lento.

APLICACIONES QUE TIENE UNO U OTRO SISTEMA GESTOR DE BASES DE DATOS

MySQL: Popular para aplicaciones web. Usado por muchas startups y compañías pequeñas y medianas.

PostgreSQL: para aplicaciones de misión crítica o de amplio alcance. También es utilizado ampliamente en aplicaciones para usuarios individuales como las que se utilizan para descubrir patrones y estadísticos de juegos en tiempo real online (ejemplo de estos son todos los asistentes de poker que existen).

ORACLE: Almacenes de negocios medianos y grandes. Bases de datos gigantescas como las de todo tipo de entidades financieras. 

Conviértete en Desarrollador Web en ACAMICA

Hace unos días un miembro de ACAMICA me contactó para darle una mirada a su plataforma de aprendizaje. ¿Qué es ACAMICA? Una escuela online para aprender a ser Web Developer, basada en JavaScript, CSS y HTML, los mismo en ese sentido que Code Avengers. Sin embargo ACAMICA es muuuuy diferente a Code Avengers; de hecho me recordó mucho más a Treehouse. 

Pues bien, me decidí a revisar la plataforma y lo primero que vi es que existían varios cursos (menciono algo más adelante) y un árbol de la carrera de Desarrollador Web, donde se veía la currícula de la Carrera, de manera muy similar a Treehouse. 

Bueno, pero hablemos de las diferencias. En primer lugar ¡ACAMICA está en Español! y esto será un tremendo aliciente para la gente que no domina el lenguaje de Shakespeare. Escuelas como Treehouse tienen subtítulos y Code Avengers tiene traducidos muchas de sus secciones al español, pero seamos sinceros, nada como escuchar lenguaje nativo. Por cierto que la última vez que entré a Code School, fallaban en este tema del idioma.

Algo que me gustó de ACAMICA es su elegante diseño, que es algo que siempre le he reprochado a Treehouse pero sobre todo a Code Avengers. En Treehouse de hecho dan bastante diseño web pero nomás no lo aplican. Lo contrario pasa en ACAMICA, en donde la disposición de los videos y las demás áreas del sitio se ven bonitas y  nada recargadas. 

Por cierto ¿dije videos? Sí, ACAMICA utiliza el video para sus clases y los expositores tienen bastante buen manejo de la voz. Las clases también están muy bien hechas. En este momento recién terminé los videos de Introducción al Desarrollo de Aplicaciones Web. La califico de excelente y no he visto nada parecido en las otras escuelas. No está en UDACITY, no la tiene Treehouse, ni Code School, mucho menos Code Avengers, Khan Academy y tantas otras que ya he visto. No digo que no toquen estos temas, algunas escuelas los tocan más que en otras pero no tienen un intro que explique al futuro Desarrollador Web qué es a lo que se va a enfrentar y qué conceptos tiene qué dominar. Esta parte creo que hasta ahora es la que me ha gustado más. 

La carrera de la que he visto videos es:

Hay muchos otros cursos y a decir de la gente de ACAMICA, uno puede acceder al que uno guste. Vi cursos de github, de diseño, apps para ios, etcétera. 

Además de lo anterior habrá algo que posicione de inmediato a ACAMICA: su bajo costo. Esta es de las mejores partes porque ACAMICA es más barata que las competidoras directas como Treehouse o Code School. Digo competidoras directas porque usan formato muy parecido.

Miren, yo siempre he dicho que Code Avengers es barato, pero ACAMICA es más barato aún y eso cae como anillo al dedo a los aspirantes a desarrolladores web porque muchas veces es gente que está buscando de verdad cumplir un sueño y acceder a un trabajo distinto al que han tenido. Gente que tiene poco dinero para gastar y de verdad quiere sacar lo máximo de rendimiento de su inversión.

Mi primera evaluación:

Le voy a dar un 10 en contenido para su introducción. Al sitio le doy un 8 en utilidades por la sencilla razón de que me hacen falta algunos elementos que creo que pueden incorporarse. Por ejemplo, sería buenísimo que tuvieran un menú de notas desplegable como lo tiene Code Avengers, el cual es activado desde una pestaña en donde se activan también referencias a la clase, códigos de ejemplo, etcétera. La verdad es que es mucho más fácil tomar apuntes sobre la misma plataforma que sacar el cuaderno y anotar. Al menos a mí me lo parece y  miren que yo fui de cuadernito y máquina de escribir, tengo 36 años. También me gustaría poder conectarme vía google pero eso aún no está habilitado. En diseño le doy 9.5, como dije es un diseño elegante. En costo le doy 10++ pues es, junto con Udemy, la plataforma más barata que conozco. Comunicación con el equipo de ACAMICA: 10. He estado en contacto con ellos por email y la comunicación ha sido fluida. 

CALIFICACIÓN TOTAL INICIAL: 9.5

Por supuesto que falta por evaluar la clases en materia propiamente dicha de desarrollador web, pero hasta ahora la intro me dejó encantado por su claridad y utilidad. 

Espero que los amigos de ACAMICA me regalen unos accesos cuando se me termine el bono mensual :)

twitter @EricAraujoM

Sistema Gestor de Base de Datos (SGBD)

Al tener los conceptos, características, ventajas y desventajas de los tipos de Bases de datos, es preciso mencionar lo que son los Sistemas Gestores de Bases de Datos (SGBD o DBMS, por sus siglas en inglés: Data Base Management System).

Un Sistema Gestor de Base de Datos es un software específico dedicado a servir de interfaz entre la base de datos, el usuario y las aplicaciones que la utilizan. Su objetivo principal es manejar de manera ordenada y clara un conjunto de datos que se convertirán en información importante para una organización. En otras palabras, un SGBD es un software que sirve para crear, programar, administrar y controlar la información de una base de datos, asegurando la integridad, seguridad y confiabilidad de la información.

Existen dos tipos de Sistemas Gestores de Bases de Datos: libres y comerciales. 

Sistemas Gestores de Bases de Datos:

• PostgreSQL. Es un sistema de gestión de base de datos relacional orientada a objetos, publicado bajo la licencia BSD (Berkeley Software Distribution / Distribución de Software Berkeley), que no es más que una licencia de software otorgada para este tipo de sistemas. Es una licencia de software libre, como la GPL (General PublicLicense / Licencia Pública General) pero ésta es más cercana al dominio público. En el caso de BSD, permite el uso del código fuente en software no libre, a diferencia de GLP.

• MySQL. Es un sistema multiusuario y de código abierto. El uso de MySQL es muy popular en aplicaciones web, y es componente de las plataformas LAMP, MAMP, WAMP, entre otras, y suele combinarse con el popular lenguaje PHP. como sus principales características podemos decir que: está escrito en C y C++; utiliza multi-threaded mediante threads de kernel; pueden usarse fácilmente múltiples CPUs si están disponibles; emplea el lenguaje SQL para consultas a la base de datos; está disponible como freeware bajo licencia GPL; proporciona sistemas de almacenamiento, transaccionales y no transaccionales; trabaja en las plataforma AIX, BSDi, freeBSD, HP-UX, GNU/Linux, Mac OS X, NetBSD, Novell Net Ware, OpenBSD, OS/2 Warp, QNX, SGI IRIX, Sun OS, SCO Open Server, Solaris, SCO Unix Ware, Tru64 y Microsoft Windows (95, 98, ME, NT, 2000, XP y Vista); utiliza tablas en disco B-tree muy rápidas con compresión de índice y es relativamente sencillo añadir otro sistema de almacenamiento, esto es útil si se desea añadir una interfaz SQL para una Base de datos propia.

• Oracle. Es una herramienta importante y con muchas capacidades del tipo cliente/servidor para gestión de base de datos, aunque de precio muy alto.

¿Cómo instalar un servidor local?

En el curso de Introducción al Desarrollo de Juegos en HTML5 que imparte gruitamente ZENVA Academy, se nos pide tener un servidor local para ir haciendo las pruebas de los juegos que vamos a crear. Pues bien, recomiendan WAMP para instalar el servidor local. Les explicaré lo que hice pero antes unas definiciones sacadas de sitio de Gian Oliveira http://www.gianoliveira.com/:

A la hora de crear una página web será necesario contar con un dominio y un servidor donde alojar los archivos de nuestra web. Si se trata de una página web muy extensa lo recomendable es intentar hacerla en un servidor de pruebas o servidor local ya que si se contrata un hosting de pago antes de comenzar a hacer la página será mucho tiempo el que perdamos hasta tenerla terminada y lista para subirla y por otro lado si utilizamos el hosting de pago para hacer la página web desde cero cometemos el riesgo de tener un mal SEO ya que a medida que avanzamos se pueden realizar muchos cambios que a futuro se convertirán en páginas 404. Es por esto que antes recomiendo utilizar un servidor local.

¿Qué es un Servidor Local?

Un servidor local es simplemente un ordenador común y corriente con una serie de aplicaciones instaladas para que podamos utilizarlo de servidor de prueba y así corregir las imperfecciones y realizar los cambios necesarios en nuestra página web hasta que estemos 100% seguros de que la podemos subir por FTP y tenerla online.

Las aplicaciones necesarias para que nuestro ordenador funcione como servidor online son:

• Sistema operativo. Normalmente utilizamos Windows pero se puede utilizar un ordenador Mac o Linux.
• Apache. Es la aplicación madre que permite que el ordenador se convierta en servidor.
• MySQL. Es una aplicación de bases de datos controlada por Apache que permite crear todas las bases de datos necesarias para nuestro proyecto.
• PHP. Es la tecnología de programación utilizada en el servidor.

Todas estas aplicaciones han sido desarrolladas después del lanzamiento de Linux y son de código abierto. Pueden ser instaladas por separado cada una de ellas aunque hoy en día existe un paquete que las engloba a todas.

Originalmente este paquete de instalación se creó bajo el nombre de LAMP (Linux, Apache, MySQL y PHP) aunque hoy en día ya se puede encontrar para Mac en MAMP y para Windows el WAMP que es del que hablaremos aquí. 

Bueno, hasta aquí lo del buen Gian Oliveira del cual recomiendo su sitio ya que da unos explicaciones muy claras. Pues bien, ahí les van los pasos con imagen y todo.

1. Vamos a la página de WAMPSERVER (le cambié a idioma inglés pues está en francés).

2. Nos vamos a downloadas y le picamos a la que nos sea adecuada, ya sea la de 32 bits o 64 bits. Si no sabes de cuántos bits es tu equipo vete a "panel de control" y "sistema" y ahí te dice.

3. A la hora de querer el download nos saldrá que necesitamos tener instalado el visual  c++. Si no lo tienes hay que hacer la descarga. Descargamos WAMP y Visual c++.

4. Debes poner atención y elegir la descarga correcta de visual c++. En mi caso, mi máquina es de 32 bits y por esa razón descagué la versión que termina en x86 que es la que corresponde a 32 bits.

5. Instalamos Visual C++.

6. Instalamos WAMP.

7. Listo, ahora en la barra inferior le picamos con el botón izquierdo al ícono de WAMP y tranquilamente encendemos el servidor.

8. Ahora en nuestro navegador favorito podemos ver cómo funciona, sólo hay que poner en la barra de navegación localhost,

Ahora sigue Github, pero esa será otra entrada del blog.