Desc

Intentando codificar el mundo.

Proyecto blogger. Un post a la semana (la que se pueda).

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

domingo, 10 de enero de 2016

[Desarrollo] Por qué los desarrolladores deberían estar escuchando a los no programadores

Hay una enorme impulso hoy en día por abrir la educación informática e iniciar a más personas a la programación, algo que creo que es increíble y me habría gustado que se tuvieran más de una iniciativa cuando estaba en la escuela. Vamos a ver muchas más personas que son capaces de leer y escribir código en un futuro, y eso es emocionante.

Pero hay un concepto que escucho un montón (realmente de gente ajena a la tecnología) que dice que va a necesitar empezar a aprender a programar para hacerse un hueco en el mundo laboral tan competitivo que estamos y vamos a vivir en el futuro. Creo que esto es fundamentalmente falso, ya que uno de los objetivos de la tecnología es hacer las cosas accesibles cuando antes no lo eran. Eso incluye tareas que en principio las realizaban los programadorers, a lo que la respuesta no es un ''necesito aprender a programar'', lo que sería complicarse la existencia. En cambio, es una oportunidad en la que los programadores pueden entrar y simplificar las cosas.

Algunas de las funciones que se han hecho más accesibles hace relativamente poco tiempo (nota: no las he usado todas):

Data Scraping - Herramientas como Kimono Labs e Import.io han hecho que sea fácil convertir páginas web en información util sin necesidad de código (suponiendo que las estructuras de las páginas sean similares).

Uso de interfaces API - Una herramienta que me ha impresionado últimamente es Blockspring, que le permite conectar a las API y extraer datos directamente de estas (en lugar de realizar consultas SQL complejas). Aunque nunca lo he utilizado, he oído de otras herramientas como APISpark son una buena manera para que los no desarrolladores implementen sus propias APIs que otros puedan utilizar. Y me han comentado de este sitio como una forma de convertir archivos JSON a CSV para para usuarios con nivel medio en excel: http://konklone.io/json/

Automatización - Compañias como IFTTT y Zapier han hecho fácil la creación de "recetas" para automatizar cosas. Si puedes describir lo que tratas de hacer, lo puedes hacer con estas herramientas.

Desarrollar Apps/Página Web - Squarespace, WordPress y Weebly son algunas herramientas que permiten a lagente construir su sitio web de forma rápida (WordPress ahora esta detrasd de una cuarta parte de la web!). Appsbar, Infinite Monkeys, y AppMachine son sitios web que permiten crear una aplicación móvil facilmente.

Visualización de Datos - Silk y Tableau son unas muy buenas herramientas para presentar datos de forma rápida y agil, mientras que Prezi y Venngage pueden ayudar a hacer presentaciones e infografías para hacer que los puntos principales resalten.

Estas funciones cada vez serán más fácil en el tiempo. Recuerdo crear las páginas web con Dreamweaver, la mejor solución allá por el año 2001 si no sabías programar. Incluso entonces, tardé unos días para aprender a usarlo, y luego otras tantas horas para desarrollar sitios web. Hoy, he construido mi blog en poco menos de una hora y media gracias a WordPress y plugins de código abierto.

Las empresas del día de mañana se pueden construir mediante la comprensión de las necesidades de los no desarrolladores, intentando facilitar sus procesos de trabajo. Cada vez que alguien no técnico acude a un programador para pedir ayuda, se tiene una oportunidad. Cada vez que un proceso requiere de un aprendizaje de horas antes de llevarlo a cabo, no se está siendo eficiente. Es importante escuchar los problemas del personal no técnico, porque nunca se sabe si la solución a este problema es el siguiente elemento de cambio en el proceso productivo.

Are there any particular tools you use and like? Feel free to reach out to me on twitter@nikillinit ¿Hay alguna herramienta que te guste en particular? Puedes comentarla libremente tanto en la cuenta de twitter de Nikhil Krishnan (autor original), @nikillinit, como en la mia, @pnacar, (autor de la traducción)


Pulso original en LinkedIn.

viernes, 3 de julio de 2015

[JavaScript] Una guia básica de jQuery [ jqfundamentals.com ]

 jQuery Fundamentals está diseñado para que te sientas cómodo solventando problemas comunes que vas a resolver utilizando jQuery. Para sacar el mayor provecho de este sitio, usted querrá leer el contenido y tratar los diversos ejemplos interactivos. Cada capítulo cubrirá un concepto y le dará la oportunidad de probar ejemplo de código relacionado con el concepto.
Recomendamos de una manera especial usar este sitio con el navegador Google Chrome u otro que soporte la funcionalidades del JavaScript actual y que incluya buenas herramientas para desarrolladores

[JavaScript] jQuery

jQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC. jQuery es la biblioteca de JavaScript más utilizada.

jQuery es software libre y de código abierto, posee un doble licenciamiento bajo la Licencia MIT y la Licencia Pública General de GNU v2, permitiendo su uso en proyectos libres y privados. jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript que de otra manera requerirían de mucho más código, es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio.

Pasos para usar jQuery en tu página Web

Descargar la última versión del framework


Accede a la página de jQuery para descargar la última versión de la biblioteca.

Crear la página Web


Ejecutar código cuando la página ha sido cargada


Se trata de detectar el momento en que la página está lista para recibir comandos Javascript que hacen uso del DOM. Cuando hacemos ciertas acciones complejas con Javascript tenemos que estar seguros que la página haya terminado de cargar y esté lista para recibir comandos Javascript que utilicen la estructura del documento con el objetivo de cambiar cosas, como crear elementos, quitarlos, cambiar sus propiedades, etc:

window.onload = descargaArchivo; $(document).ready(function() {
    //código a ejecutar cuando el DOM está listo
    //para recibir instrucciones.
});

Ó

$(function() {
    //Hacer cosas
});

Lo que pongamos dentro de la función que acabamos de declarar se ejecutará cuando el documento esté listo. Jqueryestá muy orientado a eventos. Lo normal es asociar eventos que se ejecutan cuando el usuario realiza alguna acción. De esta forma podemos separar el comportamiento del contenido, de la misma forma que separamos el contenido de la presentación con las CSS.

Insertar un manejador de evento.


Es muy sencillo asociar eventos a elementos con jQuery.
Ejemplo:
$(document).ready(function() {
    $("a").click(function() {
        alert("Hola");
    });
});

Guarda el archivo html y abrirlo en un navegador

viernes, 8 de mayo de 2015

[JavaScript] Detectar el Sistema Operativo.

Pregunta: ¿Puedo usar JavaScript para detectar el sistema operativo en el lado cliente?
Respuesta: Pues si, mi querido usuario de  . Para detectar el sistema operativo en la máquina cliente, puedes consultar el valor de la variables navigator.appVersion o navigator.userAgent. A continuación se muestra un ejemplo sencillo de un script que establece el nombre del sistema operativo variable para reflejar el sistema operativo cliente real.

<script type="text/javascript">
<!--
     // En este script se estable la variable OSName el nombre del sistema operativo tal como sigue:
     // "Windows" para todas las versiones de Windows
     // "MacOS" para todas las versiones de Macintosh OS
     // "Linux" para todas las versiones de Linux
     // "UNIX" para todas las versiones de UNIX
     // "Unknown OS" indica fallo al detectar el sistema

     var OSName="Unknown OS";
     if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
     if (navigator.appVersion.indexOf("Mac")!=-1 OSName="MacOS";
     if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
     if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

     document.write('Tu sistema: OSName);
     //-->
</script>

viernes, 24 de abril de 2015

[Recomendación] W3School

Hola!
Hoy abro la sección de recomendaciones de sitios que me resultan utiles a la hora de programar.
Para empezar, hoy hablaré de W3School, un sitio we para desarrolladores que incluye todas las tecnologias web disponibles hoy en el mercado. Aparte de completos tutoriales, tiene una funcionalidad bastante util a mi parecer, denominada "Try it Youself". En cada ejemplo del sitio tiene un botón con dicho text, que, al pulsar, te lleva a una página dividida, en una mitad el código precargado del ejmplo en si, y en la otra mitad, el resultado final de dicho código. Lo bueno es que puedes editar ese código y var casi al instante como quedaría en el navegador real que estes usando.

Try it Yourself
Recomendaciones by Peter

viernes, 10 de abril de 2015

[HTML] Métodos HTTP: GET vs. POST

Los dos métodos HTTP más usados son: GET y POST.

¿Qué es HTTP?

El Protocolo de Transferencia de Hipertexto (Hypertext Transfer Protocol - HTTP) esta diseñado para permitir la comuicación entre clientes y servidores.
HTTP trabaja como protocolo de servidor de peticion-respuesta entre el cliente y el servidor.
Un navegador web puede ser el cliente, y una aplicación en un ordenador que alberga un sitio web puede ser el servidor.
Ejemplo: Un cliente (navegador) envia una petición HTTP al servidor; luegos el servidor devuelve una respuesta al cliente. La respuesta contiene información de estado sobre la petición y también puede contener el contenido solicitado.

Dos métodos de petición HTTP: GET y POST

Dos métodos usados de forma común para realizar peticiones-respuestas entre clientes y servidodres son: GET y POST.
  • GET - solicita los datos de un recurso especificado
  • POST - envia los datos a procesar a un recurso específico

El método GET

Teniendo en cuenta que la cadena de consultas (par nombre/valor) se envía en la URL de la peticiónGET:
/test/demo_form.asp?name1=value1&name2=value2
Oras consideraciones sobre las peticiones GET:
  • Las peticiones GET pueden almacenar en caché
  • Las peticiones GET permanecen en el historial del navegador
  • Las peticiones GET pueden agreagrase a la lista de favoritos del navegador
  • Las peticiones GET nunca deben ser utilizadas cuando se trata de datos sensibles
  • Las peticiones GET tienen restricciones de longitud
  • Las peticiones GET deben ser utilizadas sólo para recopilar datos

The POST Method

Teniendo en cuenta que las cadenas de consulta (pares nombre/valor) se envían en el cuerpo del mensaje HTTP de una petición POST:
POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2
Otras consideraciones sobre las peticiones POST:
  • Las peticiones POST nunca se almacenan en caché
  • Las peticiones POST no quedan en el historial del navegador
  • Las peticiones POST no pueden agreagrase a la lista de favoritos del navegador
  • Las peticiones POST no tienen restricciones de longitud

Comparativa GET vs. POST

La siguiente tabla campara los dos métodos HTTP: GET y POST.
GET POST
Botón ATRAS/Recargar Inofensivo Los datos serán re-envidos (el navegador deberí alertar al usuario que los datos están a punto de ser re-enviados)
Añadir a favoritos Puede ser añadido No puede ser añadido
Caché Permite ser almacenado en caché No permite ser almacenado en caché
Tipo de codificación application/x-www-form-urlencoded application/x-www-form-urlencoded o multipart/form-data. Utilice la codificación multiparte para datos binarios
Historial Los parámetros permanecen en el historial del navegador Los parámetros no se guardan en el historial del navegador
Resctricciones de longitud de datos Sí, al enviar los datos, el método GET añade los datos a la URL; y la longitud de un URL es limitado (longitud máxima de URL es 2048 caracteres) Sin restricciones
Restricciones de tipos de datos Solo permite caracteres ASCII Sin restricciones. Datos binarios también permitidos
Seguridad GET es menos seguro comparado con POST al transmitirse los datos como parte de la URL

Nunca utilice GET al enviar contraseñas u otra información sensible!
POST es un poco más seguro que GET porque los parámetros no se almacenan en el historial del navegador o en los registros del servidor web
Visibilidad Los datos son visibles en la URL Los datos no se muestran en la URL

Otros métodos de petición HTTP

La siguiente tabla muestra algunos otros métodos de solicitud HTTP:
Método Description
HEAD Igual que GET pero devuelve solo las cabeceras HTTP y no el cuerpod del documento
PUT Carga una representación de la URI especificada
DELETE Elimina el recurso especificado
OPTIONS Devuelve los métodos HTTP que admite el servidor
CONNECT Convierte la petición de conexión a un túnel TCP/IP

Traducción del orignal: HTTP Methods: GET vs. POST

viernes, 27 de marzo de 2015

[CSS3] Fuentes tipográficas: Google Fonts

Como ya dije en su día, hoy toca hablar un poco más detenidamente de las fuentes de Google.
Como todo en el mundo web, la utilización de recursos ajenos a nuestros servidores trae consigo una serie de ventajas e inconvenientes, que nunca esta de más recordarlos.
Para empezar con lo positivo, lo bueno de tener cierto recursos fuera de nuestro servidor implica una menor carga del mismo a la hora de mostrar un determinado resultado, con su correspondiente reducción de ancho de banda por nuestra parte, al estar repartida.
Y aqui es donde viene el pero, ya que al no ser nosotros los administradores de dicho contenido, podremos estar haciendo referencia a algo que con el tiempo cambie, y tendremos un enlace caido, o aún peor, un enlace a algo que nunca hubiesemos deseado que estuviese en nuestras página.
A lo que veniamos: aqui les dejo un enlace a las fuentes de Google, junto con un pequeño tutorial de como generar el código, tanto CSS como HTML: