HTML5, CSS3 y Un Poco Más

En el ejemplo de hoy vamos a ver cómo realizar un pequeño cronometro táctil (para móviles Firefox OS), los elementos que utilizaremos son la librería JavaScript Zepto.js la cual es una versión comprimida de JQuery.js y a su vez es un tanto más ligera y fácil de emplear, otra librería que usaremos en touch.js, para detectar los toques (tap´s) o deslizamientos (swipe´s) dentro de un móvil, así también te mostraré como configurar la aplicación para que pueda ser cargada dentro del simulador de Firefox. Cronometro en Firefox OS El comportamiento que tendrá nuestra aplicación es el siguiente, cuando presionemos sobre el reloj, este comenzará su curso, y deseamos registrar un tiempo dentro de nuestro cronometro basta con deslizar nuestro dedo sobre el reloj, hacia la derecha, con lo cual el tiempo quedara registrado en la parte inferior del cronometro, si deseamos detener el cronometro, solo tenemos que presionar sobre él, o deslizar nuestro dedo hacia la izquierda ...

En ejemplo te mostraré como crear la validación de un formulario , con etiquetas de html5 y sus nuevos atributos y como manipular estos atributos con ayuda de CSS3. Como se aprecia en la imagen, el formulario indica cuales son los campos requeridos, el formato que deben de llevar cada uno de ellos, para poder ser aceptados, veamos como hacer cada uno de los campos. todas la etiquetas para el ingreso de datos que se utilizan en este ejemplo son de tipo <input/> . "Ingresa tu Nombre" Esta etiqueta es de tipo text y mediante el atributo autofocus indicamos que el cursor debe de iniciar por defecto en ese campo al cargar la pagina, al poner la palabra required dentro de las etiquetas input forzamos al formulario a no ser enviado mientras este campo no se encuentra debidamente rellenado, con el atributo title , generamos una texto que aparecerá cuando acerquemos el puntero del ratón al campo, con el atributo pattern establecemos el patrón con el qu...

En este ejemplo se muestra como trabajar dinámicamente, con iframes como agregar o quitar iframes internos solo con el uso de JS específicamente con la librería Zeptojs , y con la ayuda de flexbox, para hacer que automáticamente si llegamos al limite horizontal de nuestra pantalla los iframes se continúen agregando  en una linea inferior. Los códigos clave de de este ejemplo son: HTML: CSS: JS: Ejemplo: DESCARGAR

Selectores CSS3 Selectores CSS3 Los selectores son filtros que podemos aplicar dentro de nuestra hoja de estilos para poder marcar contenido especial en los elementos de nuestras paginas web estos selectores comunmente toman de apoyo el nombre de las etiquetas html(</>), los indentificadores que ponemos a algunas de las etiquetas (#), y tambien los selectores se pueden aplicar mediante el apoyo de las clases (.) que pueden compartir varios elementos en las paginas web. A continuación te presento algunos de los selectores que se encuentran disponibles dentro de la revisión mas actual de CSS3. Tabla de Selectores Selector Descripción * (asterisco) Selecciona todos los elementos que se encuentren dentro de la página. Ej. *{...} </...

Funciones en TypeScript Bien una vez que ya configuramos  WebMatrix (clic aquí para ver como se hace) para poder trabajar con TypeScript, vamos a ver cómo trabajar con funciones dentro del TS y cómo es  que nos ofrece cierta ventajas sobre JS. Para empezar con este ejemplo crearé un nuevo proyecto dentro de WebMatrix y un archivo TypeScript con el nombre “funciones.ts”. Una vez que se crea el archivo nos aparece una ventana como la siguiente, en la cual del lado izquierdo nos aparecen los archivos que contiene el sitio (1) en que estamos trabajando, que en este caso solo nos debería mostrar el archivo que recién creamos “funciones.ts”, en la parte inferior (2)nos aparecen los distintas pestañas dentro de las cuales se nos presentará información sobre los archivos que estemos trabajando para este ejemplo nos centraremos en la pestaña error la cual como su nombre lo indica presenta los errores que tendremos en nuestro código TypeScript cuando lo compilemos....