miércoles, 13 de abril de 2016

2º.Login con PHP, HTML y MYSQL

Bueno esta entrada es más una actualización del ejemplo de login utilizando el form de html, con php y mysql.
Hago esta actualización por que puedo ver que siguen entrando mucho a ese ejemplo pero ese ejemplo es de hace unos 4 años y pues algunas de las funciones que aparecen ya no son compatibles con las nuevas versiones de PHP por lo que vamos a actualizarnos.
Para dar una comparación pueden ver la antigua entrada aquí.


miércoles, 24 de febrero de 2016

Gráficas con HighCharts (Jquery,js,html)

En el Blog e posteado algunos tutoriales sobre gráficas utilizando la librería Jpgraph, que para mi es muy completa y sencilla de utilizar.  Pero hoy vamos a ver  otra librería (Plugin) que nos permite crear gráficas  se llama HighCharts.

La principal diferencia entre las dos:
- JpGraph  funciona de lado del servidor ya que es una librería PHP.
- HighCharts funciona del lado del cliente usando Js.

Y creo con eso englobo las diferencias jajaja.

Pero si es del lado del cliente entonces ¿Cómo las podrías utilizar para hacerla funcionar con consultas en Mysql?. Bueno una respuesta rápida podría ser  Ajax. Así que no hay gran trabajo para utilizarla.

Hoy les voy a dejar el ejemplo de inicio que nos presenta HighCharts en su página oficial, los invito a que la prueben y me dejen sus comentarios, que pros y contras encuentran en utilizar esta utilieria en lugar de Jpgraph. En lo general creo que las 2 son muy buenas. La diferencia rádica tal vez en lo visual.

Bueno para no entrar en más detalle les dejo una imagen de como se vería el resultado Final y empecemos con el código.





martes, 1 de septiembre de 2015

Ejemplo #1 Login Html-Ajax-PHP- mysql

Hoy les voy a mostrar un ejemplo de login HTML , js, PHP y utilizando Ajax para comunicar al cliente con el servidor.

Anteriormente subí un ejemplo de login con html y PHP utilizando el action del form de HTML pero en esta ocasión vamos a utilizar Ajax.

Una de las ventajas es que al hacer la verificación la página no se refresca ni cambia de ruta, dependiendo de la respuesta del servidor podemos mostrar contenido en algún otro objeto en la misma ventana.

El ejemplo final se verá así:


domingo, 30 de agosto de 2015

Las cinco nanotecnologías más sorprendentes


Les voy a compartir una nota que publicó la revista MuyInteresante, sobre las 5 nanotencologías más soprendentes (actuales) que ya existen, la mayoría son para el campo farmaceútico pero tambien encontramos unos más casuales como la Ropa antimanchas.

Les adelanto algunos de estos proyectos que aparecen en el artículo:

*El condón perfecto: Es un anticonceptivo creado apartir de fibras que contienen medicamentos, que ayudan a prevenir enfermedades de transmición sexual ente estos el VIH, además se disuelve en horas. Este proyecto lo estan respaldando Bill y Melinda Gates.

*Ropa sin manchas: Es un proyecto de la universidad Deakin en Australia, se trata de una capa protectora creada apartir de peliculas sobrepuestas de cargas positivas y negativas alternadas, que cualquier prenda que la tenga repelerá agua, grasa, lodo ó ácidos.

No cabe duda que la tecnología, aunque aveces parezca que se ha estancado, en realidad  ha crecido a pasos agintados, pero en  ocaciones es por su costo que no podemos ver el resultado de años de investigación salir a la luz del sol.

Bueno les dejo el link del artículo para que lo chequen completo,  en verdad esta Muy Interesante.

Tecnología increíble-Muy Interesante

Probablemente en unos cuantos años más seamos testigos visuales de estos proyectos o hasta los utilicemos casualmente.

Saludos y que esten bien. 
  
30/04/2013 

jueves, 20 de agosto de 2015

Efecto expander (leer más / leeer menos) en html con js

En esta entrada vamos a hacer un ejemplo de como expandir o esconder texto o contenido y mostrarlo al darle clic a un botón o liga (leer más / leer menos).

Anteriormente ya había subido un ejemplo utilizando la librería de jquery Expander pero esta es una manera más sencilla.

Aveces en nuestras páginas web existen secciones en donde hay que colocar mucho texto y para el usuario puede ser molesto o cansado ver una página con un montón de lineas que aveces no son de suma importancia para todos, o por ejemplo también podemos querer poner secciones de noticias y mostrar varios bloques con texto que por cuestión de diseño pues no se puede poner el texto completo. Para este tipo de ejemplos el expandir y contraer texto o contenido es una excelente opción.


En el ejemplo vamos a expandir un párrafo o tag <p> pero funciona igual con <div> <table> etc. 
Es algo realmente muy sencillo y es uno de esos trocitos de código que nos resuelven el día. El resultado se verá como la imagen pero vamos  a ver paso a paso como hacerlo.

martes, 20 de enero de 2015

Ejemplo de menu en html

Menus: menu horizontal (html, css)

Hola ya tenia tiempo que no posteaba, hoy les dejo un ejemplo básico de menu simple horizontal en html, este ejemplo es con puro css , este será el primero de varios ejemplos que les voy a compartir para crear menus.
Espero que les sea de utilidad, yo se que actualmente hay muchisimos estilos y hasta algunas páginas donde puedes crear tus menus y exportarlos para agregarlos a tu web, pero la mayoria de las veces  entre más simple más profesional y hces menos pesada tu página, así que manos a la obra.

El resultado final será algo como la siguiente imagen:

El menú cambiará su color y el estilo del texto al pasar el mouse.

lunes, 5 de mayo de 2014

Mi primera App en Android

Esta es la primera entrada del año lo e dejado un poquito pero trataré de subir más ejemplos.

Bueno como su nombre lo indica , en esta entrada vamos a ver nuestra primera aplicación en Android, va a hacer el tipico "Hola Mundo", pero servirá para irnos familiarizando con el IDE y el SDK.
Si todo funciona como deberia  el resultado final del ejercicio se verá así:




miércoles, 27 de noviembre de 2013

Introducción a ZendFramework: Instalación

Una de las cosas que más me han gustado en programación PHP  fue pasar a trabajar con el modelo MVC (modelo vista controlador), aunque no he llegado a ser ni cerquita experta en este arte.. si me ha facilitado mucho mis proyectos, todo por el manejo de los archivos ya que estan organizados de tal manera que el diseño esta separado de la programación  y a su vez  todo lo referente a las bases de datos  por lo que se termina el andar buscando entre miles de lineas de código (cuando es un sistema muy grande).

Por lo que voy a empezar una seríe de tutoriales sobre lo que e ido aprendiendo en Zend Framework, empezando por la instalación.

Lo que tendremos que ver al final de este tutorial es la siguiente pantalla en nuestro explorador.


miércoles, 11 de septiembre de 2013

"Mi cumpleaños"

Hoy no pondré Código en esta entrada... Solo les quiero compartir que Hoy 11 de Septiembre no solo es un aniversario más de las torres gemelas si no que hoy es MI CUMPLEAÑOS número 26!!! así es aunque soy mujer no me da pena decirlo al contrario..
Yo se que muchos de uds. van a pensar y eso a mi que?? pero ya que estan por aca viendo algunos de mis ejemplos  jejejeje no les cuesta nada enterarse que hoy cumple años la monita del blog!! jejejeje.

Me gusta cumplir años , por eso lo comparto, me gusta por que cada año que paso aprendo y más y por lo tanto puedo compartir más con uds.


"Programar no tiene que ser tan difícil como parece...."

jueves, 29 de agosto de 2013

Ejemplo de Sorteable y Obtener limites de un elemento en HTML

Este ejercicio nos va a servir en dos cosas diferentes vamos a ver por un lado un ejemplo muy sencillo de mover elementos de posición con una librería de Jquery y por otro lado tambien vamos aver como obtener las coordenadas de un elemento y así vamos a saber en que orden o posición se encuentran. Para que pues eso ya depende de cada quien jejje.
Cabe mencionar que este ejemplo es en particular para Camilo Andres Lopez Rojas  que muy amablemente  me dejo sus comentarios y me dio un buen ejemplo espero poder ayudarle un poco.

Bueno el ejemplo funciona así son una lista de 3 items y un boton de guardar cambios si yo oprimo el boton me va a mostrar un alert por cada item  y va a mostrar su limite con respecto al top de la pantalla con esto podemos saber si el item 1 se movio a la segunda posición va a estar más lejos del top y así sucesivamente. Claro que esto es solo un ejemplo de como se pueden saber las posiciones y no estoy diciendo que sea  la única ni la mejor  solo es una idea.





Para el sorteable solo es necesario agregar los links de la librería y una función que manda llamar la acción sorteable y los elementos que son una lista <ul> con el id de sorteable y a cada <li> se le agrega la clase "ui-state-default" y se agrega un elemento <span>  con las clases "ui-icon ui-icon-arrowthick-2-n-s", estas clases las obtiene desde uno de los links en esto no me voy a adentrar mucho, ahora el ejercicio original no los incluye pero para que funcione lo de la posición yo le agregue a cada unos de los elementos <li> un id para poderlos obtener desde la función en JS ok.
Tambien tiene un botón  de guardar cambios  que en su atributo onclick manda llamar la función salvar().

En la función salvar(), tengo  una variable texto y despues hago un for que lo que hace es recorrer de 1 hasta3 (que son los itemsque tengo) .Dentro del for lo que hago es que guardo en la variable texto el item, que lo obtengo por medio de document.getElementById("li"+i)i var a ir aumentando y como lo inicio en 1 el primer id seria "li1" e iría cambiando "li2" y "li3".
despues tengo una varibale rect que sería igual a  texto.getBoundingClientRect();  (recordando que texto es igual al item)

getBoundingClientRect es un Método que te ayuda a obtener los limites del elementos (márgenes), con ello puedes saber en donde se encuentra en relación con su margen superior, derecho, izquierdo o inferior.

Lo que estamos haciendo aqui es que va a mostrar el tamaño de margen superior que tiene el item y así podremos saber en que orden esta o debajo de cual item está.

Por lo que le decimos a la variable rect que tome el margen superior y quedaria así : rect.top
 y lo mostramos en un alert.

alert("item"+i+"="+rect.top)

Como todo esto lo tenemos dentro del for, cada que se oprime el botón de guardar cambios mostrará tres ventanas indicando el item y su margen superior.

El código quedaría así:



<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});

function salvar(){
            var texto=""
            for (var i=1; i<4; i++){
                texto=document.getElementById("li"+i)
                var rect = texto.getBoundingClientRect();

                alert("item"+i+"="+rect.top)
            }
        }
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default" id="li1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default" id="li2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default" id="li3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>

</ul>
<button onclick="salvar()">Guardar cambios</button>
</body>
</html>



Con esta información podemos tener una idea de en que orden se encuentran los items, espero que este ejercicio les sirva de algo. Si tienen otra idea de como conocer las posiciones. No duden en dejarla en la parte de los comentarios.


"Programar no tiene que ser tan difícil como parece...."