Crea una Página Web en HTML5 y CSS: Parte 5

Crea una Página Web en HTML5 y CSS: Parte 4

Editor CSS TopStyle

TopStyle es un potente programa para Windows que nos permite crear hojas de estilo de forma fácil e intuitiva debido principalmente a las sugerencias que presenta cuando estamos creando nuestras hojas de estilos.

Para ver más información sobre el programa o descargarlo puedes visitar la página oficial del programa pulsando aquí.

jQuery Tools

jQuery Tools es una colección de los componentes de interfaz de usuario más importante de la Web. Como lo son las pestañas, acordeones, tooltips, superposiciones, los efectos de la exposición y scrollables. Con las cuales se logra mejorar la usabilidad y la capacidad de respuesta de su sitio. Se centran principalmente en la presentación de la información y el atractivo visual. Después de todo, esto es exactamente lo que la mayoría de los sitios Web quieren desesperadamente: dar a conocer su contenido para el lector de una manera fácil y agradable a la vista.

Otras bibliotecas JavaScript de IU se centran en características de escritorio, tales como, arrastrar y soltar, ordenamiento de tablas o ventanas que pueden arrastrarse. Tienen el propósito de construir “Aplicaciones Ricas de Internet” (RIAs), como clientes de correo electrónico, administradores de tareas, software CRM, organizadores de imágenes o feed viwers . Este tipo de aplicaciones son muy útiles dentro de un grupo pequeño o cuando se utilizan en Intranets, sin embargo, los sitios Web normales son de naturaleza muy diferente. Su propósito es verse bien y presentar información. jQuery Tools construye precisamente para ese propósito.

Se recomienda empezar a diseñar sus páginas sin necesidad de utilizar JavaScript. Hay muchos ejemplos de sitios Web muy funcionales, atractivos y fáciles de usar que no están usando JavaScript. El objetivo de esta biblioteca es para mejorar un sitio existente con las grandes posibilidades que las técnicas modernas de JavaScript tienen que ofrecer. Esta es esencialmente la idea de “mejora progresiva”, que es un patrón de diseño común en la actualidad. Usted debe darse cuenta de que los sitios altamente profesionales no utilizan JavaScript excesivamente sólo por el gusto de hacerlo. Se utiliza sólo cuando realmente hace que las páginas sean más legibles y fáciles de usar. Aquí es donde jQuery Tools entra en juego.

Estas herramientas se puede combinar fácilmente. Piense en scrollables que desencadenen superposiciones o superposiciones que contengan scrollables junto con tooltips o cualquier combinación que pueda imaginar. Las posibilidades son infinitas. Y si eso no es suficiente, se puede aprovechar el enorme poder de la biblioteca jQuery. Muchas veces puede ver implementaciones complejas de componentes JavaScript que se podía hacer con solo unas pocas líneas de código jQuery. Para muchos sitios Web, ésta puede ser la única biblioteca JavaScript necesaria.

Otro de los principales atractivos de esta biblioteca, es que podemos obtener toda su funcionalidad, en tan solo 4.05 Kb cuando se encuentra habilitada la funcionalidad de compresión en el lado del servidor.

Puedes ver demostraciones, más documentación y descargar en la página oficial.

Crea una Página Web en HTML5 y CSS: Parte 3

Moodle – Cursos Online

 

Moodle es una aplicación web de tipo Ambiente Educativo Virtual, un sistema de gestión de cursos, de distribución libre, que ayuda a los educadores a crear comunidades de aprendizaje en línea. Este tipo de plataformas tecnológicas también se conoce como LMS (Learning Management System).

Moodle fue creado por Martin Dougiamas, quien fue administrador de WebCT en la Universidad Tecnológica de Curtin. Basó su diseño en las ideas del constructivismo en pedagogía que afirman que el conocimiento se construye en la mente del estudiante en lugar de ser transmitido sin cambios a partir de libros o enseñanzas y en el aprendizaje colaborativo. Un profesor que opera desde este punto de vista crea un ambiente centrado en el estudiante que le ayuda a construir ese conocimiento con base en sus habilidades y conocimientos propios en lugar de simplemente publicar y transmitir la información que se considera que los estudiantes deben conocer.

En términos de arquitectura, Moodle es una aplicación web que se ejecuta sin modificaciones en Unix, GNU/Linux, OpenSolaris, FreeBSD, Windows, Mac OS X, NetWare y otros sistemas que soportan PHP, incluyendo la mayoría de proveedores de alojamiento web.

En cuanto al servidor web corre principalmente en Apache o IIS. No esta completamente probado o soportado pero debería funcionar en los siguientes: lightttpd, nginx, cherokee, zeus and LiteSpeed. La versión mínima de PHP soportada en la versión de Moodle 2.2 es PHP 5.3.2.

Los datos se almacenan en una base de datos SQL. Los sistemas de gestión de bases de datos soportados son: MySQL, PostgreSQL, MSSQL, Oracle, SQLite.

Su instalación del servidor no es muy diferente a la de otros sistemas de gestión de contenido conocidos hasta el momento. Se debe tener en cuenta la forma en que se desea realizar la instalación: si es de forma integrada (m) o distribuida (servidor de aplicaciones y de base de datos en servidores físicos diferentes).

Al ser una aplicación web el cliente puede ser casi cualquier navegador web moderno. Se debe contar con las extensiones necesarias para visualizar los vídeos, audio y demás material multimedia que un curso pueda contener.

Instalación de Moddle

Crea una Página Web en HTML5 y CSS: Parte 2

jQuery UI

jQuery UI es una biblioteca de componentes para el framework jQuery que le añaden un conjunto de plug-ins, widgets y efectos visuales para la creación de aplicaciones web. Cada componente o módulo se desarrolla de acuerdo a la filosofía de jQuery.



Podrás ver más documentación y demostraciones en su página oficial además de poder personalizar un tema y descargarlo para el posterior uso.

Esta biblioteca añade comportamientos complejos a los elementos:

• Draggable: Hace al elemento arrastrable.
• Droppable: Permite que el elemento responda a elementos arrastrables.
• Resizable: Permite redimensionar el elemento.
• Selectable: Permite seleccionar entre una lista de elementos.
• Sortable: Ordena una lista de elementos.

También incorpora algunos widgets o elementos:

• Accordion: Menú con efecto acordeón.
• Autocomplete: Caja con autocompletado.
• Button: Botón.
• Dialog: Ventanas con contenido.
• Slider: Elemento para elegir en un rango de valores.
• Tabs: Pestañas.
• Datepicker: Calendario gráfico.
• Progressbar: Barra de progreso.

Netbeans

 

NetBeans es un proyecto exitoso de código abierto con una gran base de usuarios, una comunidad en constante crecimiento, y con cerca de 100 socios (¡y creciendo!) en todo el mundo. Sun MicroSystems fundó el proyecto de código abierto NetBeans en junio 2000 y continúa siendo el patrocinador principal de los proyectos.

Al día de hoy hay disponibles dos productos: el NetBeans IDE y NetBeans Platform.

NetBeans IDE es un entorno de desarrollo – una herramienta para que los programadores puedan escribir, compilar, depurar y ejecutar programas. Está escrito en Java – pero puede servir para cualquier otro lenguaje de programación. Existe además un número importante de módulos para extender el NetBeans IDE. NetBeans IDE es un producto libre y gratuito sin restricciones de uso.

También está disponible NetBeans Platform; una base modular y extensible usada como estructura de integración para crear grandes aplicaciones de escritorio. Empresas independientes asociadas, especializadas en desarrollo de software, proporcionan extensiones adicionales que se integran fácilmente en la plataforma y que pueden también utilizarse para desarrollar sus propias herramientas y soluciones.

Ambos productos son de código abierto y gratuitos para uso tanto comercial como no comercial.

A nivel personal, he utilizado NetBeans IDE y la verdad es que va genial para desarrollar en HTML, PHP e incluso en CSS, ya que sugiere sentencias.

Puedes visitar la página oficial en español para descargar el programa.

Crea una Página Web en HTML5 y CSS: Parte 1

Notepad++

Notepad++ es un editor de código fuente de libre descarga que podría reemplazar al típico editor que incorpora Windows el “Bloc de notas” debido a que soporta archivos de mayor tamaño y muestra el código fuente en colores para su mejor comprensión. 

Funciona en un entorno Microsoft Windows y su uso está regulado por la licencia GPL.

Es un programa que está basado en el podereos componente de edición Scintilla. Notepad++ está programado en C y usa la API de Win32 y STL, lo que asegura una velocidad mayor de ejecución y con un programa de menor tamaño.

Mediante la optimización de tantas rutinas como sea posible sin perder la facilidad de uso, Notepad++ está tratando de reducir las emisiones mundiales de dióxido de carbono. Al utilizar menos energía de la CPU, el PC puede moderar la marcha y reducir el consumo de energía.

Lo que me resulta realmente interesante es la potencialidad que tiene para abrir y procesar ficheros de gran tamaño que por ejemplo con Bloc de notas o Dreamweaver sería imposible o impracticable abrirlos y trabajar con ellos.

Descargar Notepad++

HeidiSQL

HeidiSQL es una aplicación ligera basada en Windows para la gestión de bases de datos MySQL y Microsoft SQL. Le permite ver y editar los datos, crear y editar tablas, vistas, procedimientos, triggers y eventos programados. Además, puede exportar la estructura y los datos ya sea para SQL archivo, portapapeles o a otros servidores.

Es una aplicación que va fenomenal para exportar e importar bases de datos extensas en megas. Aunque a veces se cuelgue, tiene más potencia que la herramienta phpMyAdmin.

Descargar HeidiSQL

Consejos de seguridad Web

La seguridad es un aspecto muy importante al que hay que prestar atención cuando se desarrolla. Es importante tenerla en cuenta desde el mismo comienzo del desarrollo, no dejando la seguridad como algo secundario a realizar en momentos posteriores. Es por esto que vamos a dejar algunos consejos de como mejorar la seguridad durante el desarrollo de nuestras aplicaciones.

Nunca confies en los datos que vayan a introducir los usuarios. Considera todas los datos que tus usuarios envíen como maliciosos.

Es importante realizar la validación de los datos en el servidor. Aunque realicemos también validación en cliente, mediante JavaScript por ejemplo, no hay que olvidarse que es relativamente fácil saltarse esta. Validando los datos en el servidor desde el principio nos evitamos bastantes problemas.

Si permites que tus usuarios suban archivos al servidor comprueba estos adecuadamente. Si son imágenes comprueba su tamaño, su tipo MIME, etc, con la función getimagesize. En caso de que sean otro tipo de archivos puedes usar fileinfo (disponible desde la versión 5.3.0) para obtener información de los archivos.

Usa algún tipo de captcha para asegurar tus formularios contra bots de spammers. Hay distintas técnicas, puedes implementar uno propio, hacer uso de algún servicio externo o usar una librería de terceros.