Css
C/Cpp
HTML5
JavaScript
JQuery
MySQL
Linux
PHP
Programación
Programas
Tutoriales
Windows
Web
Anterior
1
2
3
4
5
6
7
8
Siguiente
En los anteriores tutoriales vimos un tipo de captcha muy básico que requería introducir el resultado de una suma en una caja de texto, pero esta vez vamos a enfocar el tema de otra forma. Se mostraran nueve resultados en recuadros independientes, y debajo una suma, y lo que habrá que hacer es arrastrar el resultado correcto para validar el captcha.
Para hacer esto vamos a utilizar PHP y JQuery. También necesitaremos la librería JQuery UI que es la que nos permite hacer el efecto arrastrar y soltar compatible para todos los navegadores.
En el tutorial anterior se vio con qué facilidad se puede sortear un captcha creado únicamente con JavaScript, y más bien fue un tutorial de cómo NO se debe hacer un captcha.
Con todo esto en mente hoy vamos a ver como podríamos crear un captcha similar al del primer tutorial pero que sea más difícil de hackear.
La parte que generara los valores aleatorios estará en el código PHP, y la parte que validara el captcha también. Además crearemos una imagen utilizando PHP con los valores a sumar, de esta forma será mucho más seguro contra hacks de JavaScript.
Hoy en día quien no ha tenido que lidiar con un captcha, y quien no ha fallado más de una vez en su validación?
Los captchas más utilizados en la actualidad se basan en una imagen que contiene texto distorsionado de alguna forma, que a veces resulta imposible incluso para un ser humano de identificar.
En la mayoría de casos el captcha se utiliza para proteger páginas web que tienen una sección de mensajes para que a nadie se le ocurra hacer una aplicación que mande mensajes de spam, o en servidores de descarga directa tipo fileserver y demás para evitar ataques que puedan colapsar sus servidores a base de descargar miles de ficheros a la vez.
Pero cuando llega un punto en que ni nosotros mismos somos capaces de validar un captcha, vale la pena utilizar ese sistema? yo creo que no. Por ello voy a intentar hacer una serie de tutoriales sobre cómo podemos construir nuestros captchas para que sean mas amigables.
Hoy vamos a hablar sobre las tipografías o fuentes para la web, que es un tema muy importante a la hora de definir un buen diseño en vuestras páginas.
Lo primero que debéis saber es que al existir todo tipo de dispositivos que pueden mostrar una página web bajo distintos sistemas operativos, no es algo que resulte fácil de implementar.
Hasta no hace mucho una página web estaba limitada a ciertos tipos de fuentes, e incluso podía darse el caso de que se eligiera una tipografía que no estuviera disponible por lo que al final se re-emplazaba por otra.
En este tutorial podréis ver cómo crear un menú simple para vuestras páginas web que no requiere grandes conocimientos de programación.
Por otro lado este menú no será ni mucho menos tan flexible como el que se muestra en el articulo Menu PHP + XML + JQuery + JavaScript + CSS. Pero tampoco requeriréis conocimientos de PHP ni de JQuery ni de JavaScript para hacerlo, lo cual es una ventaja para aquellos que estáis empezando en esto.
En esencia se construirá todo el menú utilizando estilos CSS, y podréis ver entre otras cosas que podéis mostrar y ocultar etiquetas dependiendo de vuestras necesidades.
Hoy para salir un poco de la rutina de la creación de páginas web desde cero y del objeto canvas 2d, os voy a mostrar cómo crear un menú para vuestra pagina web igual al que tengo en la mía.
Este menú obtiene sus datos a partir de un archivo XML, y puede tener tantos submenús como quepan en pantalla, además es absolutamente recursivo por lo que podemos crear tantos submenús dentro de un submenú como nos hagan falta (siempre que el tamaño de la pantalla nos lo permita).
Por desgracia está pensado para trabajar en una posición fija de la ventana del navegador, por lo que habría que retocarlo para trabajar con posiciones relativas / absolutas (en términos de la propiedad css position).
Ha pasado algo más de una semana desde el ultimo tutorial del canvas 2d, pero tranquilos que no me he olvidado de él.
Esta vez vamos a trastear con imágenes, y veremos hasta que punto podemos toquetearlas.
Para ello voy a tomar una imagen del bender, y la voy a mostrar utilizando un único canal de color cada vez, de esta forma veréis como queda distribuida la imagen en memoria una vez cargada, y como poder modificar uno o más pixeles de ella.
En este tutorial veréis algunos trucos para añadirle botones gráficos a vuestra web.
Lo más normal es que este tipo de controles se utilicen para llegar a otro documento web o a una descarga, y siempre resulta interesante que se vean bien para que el usuario no se pierda fácilmente.
No es lo mismo poner un enlace de texto plano con la etiqueta "<a>" que tener ese enlace dentro de un marco con borde y un color de fondo bien resaltado.
En los tutoriales anteriores se han tratado varios temas de una índole muy básica respecto a etiquetas HTML y estilos CSS, pero en cuestiones de diseño no se ha hecho gran cosa. Por ello hoy vamos a ver algunas técnicas para crear marcos y posicionarlos a vuestro gusto.
Esto os llevara a crear una serie de marcos y alinearlos de a la derecha, a la izquierda y al centro.
También veréis por encima como añadir una imagen de fondo y como crear efectos de transparencia en los marcos.
En el tutorial anterior se vio muy por encima los estilos CSS y cómo utilizarlos con el atributo "style" sobre cualquier etiqueta.
Hoy crearemos nuestro primer documento CSS, y dejaremos el atributo "style" de lado para empezar a probar los atributos "id" y "class" ya que con ellos podemos utilizar estilos definidos en un archivo CSS a parte.
Pero antes de nada necesitamos aprender un poco sobre selectores CSS, que son y cómo utilizarlos correctamente en nuestras hojas de estilos.
Css
C/Cpp
HTML5
JavaScript
JQuery
MySQL
Linux
PHP
Programación
Programas
Tutoriales
Windows
Web
Anterior
1
2
3
4
5
6
7
8
Siguiente
