Entradas

JS convertir una cadena de texto en mayúsculas, minúsculas o solo la primer letra de cada texto

Imagen
Ejemplo en JS con Jquery de como podemos transformar las letras de un texto ingresado en un texto capitalizad o en cada una de sus palabras o solo la primer letra de todo el texto, convertir en mayúsculas todo el texto o todo en minúsculas . <html>     <head></head>     <body>         <input type= "text"  class= "capitalizeText"  placeholder= "Texto Capitalizado" /><br><br>         <input type= "text"   class= "firstLetterText"  placeholder= "Primer letra mayúsculas" /><br><br>         <input type= "text"  class= "toUpperText"  placeholder= "TODO MAYÚSCULAS" /><br><br>         <input type= "text"  class= "toLowerText"  placeholder= "todo minúsculas" /><br><br>                  <script src=" https://ajax.googleapis. com/ajax/libs/jquery/3.1.1/ jque

NoSQL - MongoDB

Imagen
Las bases de datos durante mucho tiempo se rigieron mediante el esquema SQL, pero en la actualidad, las necesidades de las empresas y de los usuarios se incrementan día a día, es ahí cuando nacen las bases de datos NoSQL, las cuales presentan un versatilidad en su empleo y desarrollo, es decir las bases de datos NoSQL presentan la oportunidad de manejar y almacenar los datos de manera distinta, es por eso que se dice en el bajo mundo que el acrónimo se refiere a la frase “No Only Structure Query Languaje”. Este tipo de bases de datos lo que propone es el almacenamiento de los datos de manera más sencilla, ya que se vuelven bases de datos no relacionales,  con una escalabilidad que es bastante fácil de implementar, permite el uso de búsquedas geoespaciales, en el caso de MongoDB los procedimientos almacenados son cambiados por funciones de JavaScript, permiten la implementación de la escalabilidad horizontal, su rendimiento de escritura y lectura tiende a hacer mejor que el de

Efectos con textos en CSS3

Imagen
Efectos CSS3 Este ejemplo es bastante sencillo de realizar, ya que solo utilizaremos instrucciones de CSS3 , como se aprecia en la imagen los efectos son texto 3D , efecto blur , un efecto mayor de negritas , un desvanecimiento en el color de texto, que nuestro texto gire de manera automática en el eje Y y en el eje X.  El HTML usado en este ejemplo es el siguiente: Efecto 3D: Efecto 3D en CSS3 #ddd {         margin : 0;     text-align : center;        font-size: 90px;     line-height : 200px;         font-weight : bold;     color: #fff;     text-shadow:    0 1px 0 #ccc,                     0 2px 0 #c9c9c9,                     0 3px 0 #bbb,                      0 4px 0 #b9b9b9,                      0 5px 0 #aaa,                      0 6px 1px rgba(0, 0, 0, .1),                      0 0 3px rgba(0, 0, 0, .15),                      0 1px 3px rgba(0, 0, 0, .2),                      0 3px 5px rgba(0, 0, 0, .2),                      0 5px 10px rgba(0,

Como Crear Las Esferas de Dragon Ball en CSS3

Imagen
En este ejemplo aprenderás como crear las poderosas esferas de DragonBall utilizando solo CSS3. El documento HTML, contiene la siguiente estructura y es bastante sencilla por lo cual omitiré su explicación: Código HTML Bien lo primero que haremos será establecer el fondo del documento: body {             padding : 2em 5em;             background-image : url(grass.png);             background-attachment : fixed;             background-size : 100% 100%;         } Después mediante el uso de div con id " container " establecemos que todo lo que vaya dentro del el se deberá de ubicar en la parte inferior del documento: #container {             position : fixed;             bottom : 27px;             text-align : center;         } Bien ahora si creamos el diseño de nuestra esfera mediante CSS3, los puntos calve dentro de esta esfera el utiliza border-radius , un background con radial-gradient y para obtener el efecto de reflejo del luz utilizaremos 

Fundamentos Web - Diseño Responsivo

Imagen
En un plano general podemos definir el D iseño Responsivo como la manera que conjugamos distintas tecnologías en la construcción un sitio para que este sea lo suficientemente flexible para funcionar bien a través de una amplia gama de dispositivos. El diseño responsivo en la web se construye en parte a través de  HTML5 y CSS3   las cuales son nuevas especificaciones lanzadas por la W3C (World Wide Web Consortium) y son parte de un conjunto de tecnologías que se denomina " open web platform .", Ademas de trabajar con Javascript o de librerías desarrolladas mediante este lenguaje de programación. ¿Diseñar primero para dispositivos móviles o primero para escritorios?  ( Mobile First vs. Desktop First ) Esta es una discusión que nos podría llevar una entrada por separado totalmente, ya que la mayoría de los programadores nacemos con una manera de desarrollar y de pensar en las soluciones a los problemas con los que nos enfrentamos, y esa misma manera de pensar e

Creación de Efecto Parallax y Texto 3D solo con HTML5 y CSS3

Imagen
Este ejemplo permite de manera muy simple generar el diseño de una página web con estilo parallax, con solo utilizar HTML5 y CSS3 sin una sola gota de JavaScript . De manera similar dentro de la página crearemos un texto en formato 3D solo con ayuda de 6 directivas de CSS3 . Página Paralax Como se puede ver en la imagen el código se genera un texto con formato 3D el código que se utilizó dentro de  la página web fue una etiqueta <h1/> , la cual se enlaza con el siguiente código CSS3: De esta manera tan sencilla es como se genera dicho efecto fácil, cierto? Para obtener el efecto parallax es necesario, un poco más de código, las partes clave de dicho código que nos permiten crear este efecto se muestran remarcadas en color azul. Así de simple! Si quieres descargar el ejemplo y conocer un poco más de su funcionamiento da clic aquí .

Cronometro Táctil DEMO para Firefox OS

Imagen
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