domingo, 28 de agosto de 2016

Que lenguaje de programación Aprender primero | Mi recomendación


Para ver en youtube clic aquí
(No olvides suscribirte)

Mi recomendación

  En el video que acabas de ver yo te recomiendo considerar a Java y a C# como una buena opción para que sean tus primeros lenguajes de programación a aprender, ya que cumplen con los criterios descritos en el video:
  • Son orientados a objetos
  • Tienen una sintaxis común a varios otros lenguajes
  • No son ni muy fáciles ni muy difíciles
  • Son estrictamente orientados a objetos

Pseudocódigo

   Esta es una recomendación aparte, sea cual sea el lenguaje que decidas aprender de primero, combina ese aprendizaje con pseudocódigo

Links del Video

  Nota: Algunos enlaces están patrocinados por Adfly, luego de hacer clic, debes esperar unos segundos para luego hacer clic en el botón que dice "Saltar publicidad" luego de esto serás llevado directamente a la página solicitada, si no es así comunícate conmigo inmediatamente a través de un comentario


Entornos de programación




Curso de Java

  Yo tengo publicado un curso de Java en mi canal de youtube, a continuación de dejo el enlace a la lista de reproducción:

sábado, 27 de agosto de 2016

Como hacer un juego de Snake en C# (Windows Forms)


Para ver en youtube clic aquí
(No olvides suscribirte)

Juego de snake

   Este juego fue lanzado a mediados de lo años 70, a diferencia de lo que muchos creen no fue desarrollado por la Nokia, pero gracias a esta última adquirió una popularidad masiva debido a que venia pre-instalado en los teléfonos de esta marca.

Archivos del Video tutorial

  Nota: Todos los enlaces están patrocinados por Adfly luego de hacer clic esperas unos segundos y haces clic en "Saltar publicidad", debería llevarte directamente al archivo para su descarga, si no es así comunícate inmediatamente conmigo a través de un comentario

Proyecto completo en Visual Studio

Código fuente solamente

Imágenes

Ejemplo de Snake en WPF (Windows Presentation Foundation) proyecto completo Visual Studio

   Este último ejemplo es para que compares las diferencias con Windows Forms, no son muchas, estas solo son referentes a la interfaz gráfica, suscríbete a mi canal para ver más tutoriales como este, pronto publicaré el mismo tutorial pero en WPF

sábado, 20 de agosto de 2016

Efecto foto doblada CSS3


Para ver en youtube clic aquí
Para ir a mi canal de Youtube clic aquí (No olvides suscribirte)

Compatibilidad de la propiedad filter

   La propiedad filter no está implementada completamente en los navegadores, por lo que se deben utilizar prefijos para que sea compatible con todos los navegadores
  • -webkit-filter para Chrome Safari y Opera
  • filter (Forma standard) Internet explorer y Firefox

Código fuente y archivos

  Si quieres visualizar el código fuente, puedes visualizarlo o descargarlo.
Instrucciones: Luego de hacer clic espera unos segundos y luego haz clic en el botón que dice "Saltar publicidad" si esto te presenta algún problema comunícate conmigo inmediatamente a través de un comentario 



Para ver el código en mi perfil de codepen


Sitio web que inspiró el tutorial:

domingo, 14 de agosto de 2016

Validar formularios con HTML5 CSS3 y JavaScript


Para ver en youtube clic aquí
Para ir a mi canal de youtube clic aquí (No olvides suscribirte)
Para ir al canal de  Developero clic aquí


Descargar plantilla HTML

Puedes empezar el tutorial con el mismo html que yo utilicé aunque da igual si utilizas un formulario creado por tí
http://adf.ly/1dAUFG  (Lee la aclaratoria sobre los enlaces al final de la entrada)

 Si solo quieres las imágenes que yo utilicé las puedes descargar en el siguiente enlace:
http://adf.ly/1dAUJB (Lee la aclaratoria sobre los enlaces al final de la entrada)

La importancia de la validación

    La validación no es más que la verificación de los datos antes de que estos puedan ser procesados por nuestro servidor. 
  Existe un tipo de ataque conocido como Inyección SQL que consiste en enviar código malicioso a través de los formularios, más información sobre este tipo de ataque puedes ver el siguiente enlace:
http://adf.ly/1dAP3c  (Leer aclaratoria sobre los enlaces abajo)

  La verificación más importante que debemos hacer consiste en evitar que un atacante pueda ingresar Javascript o SQL a través de nuestros formularios, también en evitar que se envíen espacios en blanco para que nuestra base de datos no se llene de datos basura

La diferencia entre el servidor y el cliente

   En el cliente, la validación ocurre en el navegador mismo, por lo tanto se lleva a cabo usando herramientas disponibles en el navegador, como por ejemplo HTML5 CSS3 y JavaScript.

En el servidor, la validación ocurre una vez que la información ha sido enviada a este a través de un formulario, esta se lleva a cabo con tecnologías disponibles en el servidor como PHP JSP Node.JS ASP etc

Como escribir patrones para el atributo "pattern"

 Las llaves [ ]

 Indican que caracteres debemos colocar, a continuación unos ejemplos :
  • [abc] Solo se puede escribir "a","b" o "c" puede ser por ejemplo: "ccc", "bbb", "aaa" o cualquier combinación que solo tenga una de las tres letras
  • [^abc] Al colocar el "acento circunflejo" (Es el nombre de ese signo) estamos pidiendo que se permita cualquier carácter excepto "a", "b" o "c", esto significa que se van a admitir, números, caracteres especiales y letras, siempre y cuando estas últimas no sean una de esas tres
  • [a-z], [0-9] o [A-Z] Con el guión podemos especificar un rango de caracteres, en el primer caso cualquier letra que vaya de la "a" hasta la "z" en minúscula, estos se pueden combinar sin necesidad de espacios de la siguiente forma: [a-zA-Z0-9]
  • [\s] o [\n] De igual forma que hicimos en el primer ejemplo podemos especificar estos caracteres para pedir que se solicite un espacio en blanco o una nueva linea respectivamente
  • \ El "slash invertido" lo usamos para poder identificar caracteres especiales por ejmplo si queremos solicitar que se coloquen guiones [\-] si se colocara el guión solamente pudiera causar conflicto ya que como vimos arriba este se usa para denotar rangos
  • \d Cualquier número, en este caso no es necesario colocar las llaves ([])
  • \D Cualquier letra o carácter especial, la igual que arriba no es necesario colocar as llaves

Los corchetes { }

  Indican la cantidad de caracteres que debemos colocar:
  • {7} Aquí exigimos 7 caracteres obligatoriamente, ni mas ni menos
  • {2,9} Siempre tiene que haber como mínimo 2 y no más de 9
En resumen, con la coma (,) creamos rangos para cantidad y con el guión (-) creamos rangos para el tipo de carácter

Ejemplos de patrones

Código postal Venezolano : Deben ser 4 números entre 0 y 9
[0-9]{4}

Código postal Mexicano : Contiene 5 dígitos 4 números agrupados de dos en dos y separados por un guión
[0-9]{2}[\-]{1}[0-9]{2} o también    \d{2}[\-]\d{2}

Número de teléfono formato USA internacional : debe ser algo así +99(99)9999-9999
[\+]\d{2}[\(]{1}\d{2}[\)]\d{4}[\-]{1}\d{4}

También cuando queramos un solo carácter no hace falta que especifiquemos el {1} por lo que lo de arriba puede quedar de forma más corta de la siguiente manera:
 [\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}

Fecha formato dd/mm/aa: 
\d{2}[/]\d{2}[/]\d{2}

Más información sobre los patrones

  A continuación comparto contigo una enlace a un sitio web que contiene una lista grande de patrones ya creados que puedes usar, adicionalmente te permite crear tus propios patrones de forma muy sencilla, el único problema es que este sitio está en inglés:
http://adf.ly/1dASXo  (Lee la aclaratoria sobre los enlaces al final de la entrada)

Códigos fuente

 En el enlace a continuación puedes descargar el formulario ya terminado, para que leas y compares el código fuente que yo escribí:
http://adf.ly/1dAUNf  (Lee la aclaratoria sobre los enlaces al final de la entrada)

Aclaratoria sobre los enlaces

  Los enlaces en este blog tienen un pequeño anuncio publicitario patrocinado por Adfly, luego de hacer clic esperas unos segundos y aparecerá un botón con el texto "Saltar publicidad" debes hacer clic ahí para llegar a la página de destino. Este patrocinio me permite producir más material como este, si te parece que los anuncios son incómodos o no llevan la página de destino escríbeme inmediatamente, puedes hacer un comentario aquí o en mi canal de Youtube



sábado, 13 de agosto de 2016

Como hacer Ventanas modales en Javascript (Sin librerías)



Diferencia entre usar opacity y rgba()

   Opacity aplica la opacidad a todo el objeto, por el contrario rgba solo a la propiedad a la cual se la apliquemos, en videotutorial que acabas de ver yo la uso en un fondo, por lo que la transparencia solo se aplica al fondo y no al resto del objeto. Como vimos en el video usar opacity nos puede causar problemas con los objetos hijo.
   A rgba le debemos pasar 4 parámetros los colores: rojo, verde y azul, el último parámetro se conoce como alfa y es la opacidad del fondo

Código fuente

  A continuación podrás descargar el código fuente siguiendo el enlace a continuación :
Este es un archivo de Winrar que contiene el html y las imágenes 

Aclaratoria sobre los enlaces: Luego de hacer clic, te saldrá una ventana patrocinada por "Adfly", esperas unos segundos y te aparecerá un botón con el texto: "Saltar publicidad" debes hacer clic en él para poder ver el código fuente. Estos enlaces con publicidad es lo que me permite producir este material, si consideras que es molesto, escríbeme inmediatamente, para buscar una mejor forma de trabajar.

domingo, 7 de agosto de 2016

¿Cual es la diferencia entre PHP y Javascript?


Para ver en youtube clic aquí
Para mas videos como este clic aquí (Recuerda suscribirte)


   En el video que acabas de ver se explican la diferencia entre los que podemos considerar los lenguages de programación más importantes en el desarrollo web. Acontinuación podrás descargar los códigos fuente de los ejemplos y podrás descargar los diferentes servidores web disponibles.

Aclaratora sobre los enlaces: Todos los enlaces que aparezcan a partir de este punto, tienen un pequeño anuncio publicitario, patrocinado por adfly, luego de hacer clic, puedes undir en donde dice "Saltar publicidad" para ir a la página de destino. Estos anuncios me permiten poder hacer más material como este, pero si te resultan molestos por favor escríbeme para buscar una mejor forma de trabajar

Servidores Web y sus diferencias

  Todos los programas que te voy a recomendar a continuación, son 100% gratis, ya que son software libre

  1. WampServer: El que yo uso, este servidor contiene: El interprete PHP, el servidor Web propiamente dicho y un servidor de bases de datos MYSQL. Todo ya configurado y enlazado para que puedas hacer scripts PHP que se comuniquen con tu base de datos. Adicional-mente viene con utilidades web como phpMyAdmin que permite administrar tus bases de datos desde el navegador web, en el ejemplo de PHP uso esta utilidad para verificar la base de datos. Para descargar wamp clic aquí
  2. AppServer: Nunca lo he usado, pero tienen las mismas características de Wamp. Para descargar AppServ has clic aquí
  3. XamppServer: Este es como Wamp pero con esteroides, tiene todo lo que tiene Wamp pero muchas otras cosas más, como por ejemplo un servidor de correo, una entidad emisora de certificados SSL para cifrar las páginas web que creemos, servidor FTP, interprete PERL, y un interprete JSP. Para descargar XAMPP has clic aquí
  4. MAMP: Este es para los que tienen Mac, es lo mismo que Wamp pero para Mac. Para descargar MAMP clic aquí
  5. EasyPHP: Tampoco nunca lo he usado, es similar a WAMP pero con algunos agregados como lo son Nginx, phyton, ruby etc. Para descargar EasyPHP haz clic  aquí
  6. NMP-Server: Es un servidor portátil, lo que significa que no tienes que instalar nada, solo ejecutarlo, contiene: PHP, Nginx y MYSQL. Clic aquí para descargar

Códigos fuente para descargar

 Recuerda leer la aclaratoria sobre los enlaces al inicio de la entrada.




   Recuerda comentar en el video cualquier cosa que creas que no haya sido cubierta por el video, igualmente comenta las cosas que creas que se puedan hacer con uno o con otro.


sábado, 6 de agosto de 2016

Animación Cubo 3D CSS3


Para ver en Youtube clic aquí
Para ir a mi canal de Youtube clic aquí (No olvides Suscribirte)
Para ver más videos de CSS3 clic aquí


Animación de Cubo 3D rotando

    En el tutorial que acabas de ver aprenderás a hacer un efecto 3D bastante atractivo, con elementos "DIV" ubicados de forma estratégica lograremos crear un Cubo y le daremos una efecto de rotación en 3D.
  A continuación podrás descargar el código fuente, y más abajo te recomiendo que leas una explicación escrita acerca de la propiedad "perspective" ya que algunas cosas se me pudieron pasar por alto.

Acerca de los enlaces para descargar: Tienen un pequeño anuncio publicitario, patrocinado por "adfly" luego de hacer clic puedes undir en saltar publicidad para ir al código fuente. Este patrocinio me ayuda a poder producir este material, si la publicidad te parece muy molesta comentalo inmediatamente para yo buscar una mejor forma de trabajar, ya que ante todo está tu comodidad

Código fuente


Perspectivas en CSS3

  Este es un concepto muy difícil de entender, ya en el video explique como funciona, ahora aquí voy a resaltar algunos detalles a tener en cuenta
  1. La perspectiva se aplica al objeto PADRE no al objeto al que quieras modificar, esta es una de las cosas que mas confunde. Si quieres mostrar un "div" con efecto de perspectiva, deberás poner este "div" dentro de otro "div" padre, y es a este "div" al que se le va a pasar la propiedad "perspective"
  2. Dentro del universo CSS las leyes de la física son parecidas pero no iguales, el valor en pixeles que se le pasa a la propiedad "perspective" significa "distancia" te estas alejando del objeto en cuestión, pero a diferencia del mundo real no se va a ver aparentemente mas pequeño, si no que siempre va a encajar en las medidas "width" y "height" que hayamos predefinido
  3. "perspective-origin" con esta propiedad podemos definir desde donde los estamos viendo, se le pasan dos valores, un "x" y un "y", este va a ser nuestro "punto de vista"
Más información acerca de las perspectivas clic aquí para ir al sitio de MDN
  Esta explicación de aquí arriba me parece muy buena y está en español