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
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.
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
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
Código fuente completo (Windows Forms)
Form1.cs
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace snake1
{
public partial class Form1 : Form
{
Graphics juego;
Cola cabeza;
Comida comida;
int espacio;
int xdir = 0,ydir = 0;
int puntaje = 0;
Boolean ejex = true, ejey = true;
public Form1()
{
espacio = 10;
InitializeComponent();
juego = canvas.CreateGraphics();
cabeza = new Cola(10, 10);
comida = new Comida();
}
public void findeJuego()
{
xdir = 0;
ydir = 0;
puntaje = 0;
puntos.Text = "0";
ejex = true;
ejey = true;
cabeza = new Cola(10, 10);
comida = new Comida();
MessageBox.Show("Perdiste");
}
public void choqueCuerpo()
{
Cola temp;
try
{
temp = cabeza.verSiguiente().verSiguiente();
} catch(Exception err)
{
temp = null;
}
while(temp != null)
{
if (cabeza.interseccion(temp))
{
findeJuego();
} else
{
temp = temp.verSiguiente();
}
}
}
public void choquePared()
{
if(cabeza.getX() < 0 || cabeza.getX() > 760 || cabeza.getY() < 0 || cabeza.getY() > 360)
{
findeJuego();
}
}
public void dibujar()
{
juego.Clear(Color.White);
cabeza.dibujar(juego);
comida.dibujar(juego);
}
private void Form1_KeyDown(object sender, KeyEventArgs e)
{
if (ejex)
{
if(e.KeyCode == Keys.Up)
{
ydir = -espacio;
xdir = 0;
ejex = false;
ejey = true;
}
if (e.KeyCode == Keys.Down)
{
ydir = espacio;
xdir = 0;
ejex = false;
ejey = true;
}
}
if (ejey)
{
if (e.KeyCode == Keys.Right)
{
ydir = 0;
xdir = espacio;
ejex = true;
ejey = false;
}
if (e.KeyCode == Keys.Left)
{
ydir = 0;
xdir = -espacio;
ejex = true;
ejey = false;
}
}
}
public void movimiento()
{
cabeza.setxy(cabeza.getX() + xdir, cabeza.getY() + ydir);
}
private void bucle_Tick(object sender, EventArgs e)
{
dibujar();
movimiento();
choqueCuerpo();
choquePared();
if (cabeza.interseccion(comida))
{
comida.colocar();
cabeza.meter();
puntos.Text = (puntaje++).ToString();
}
}
}
}
Cola.cs
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace snake1
{
class Cola : objeto
{
Cola siguiente;
public Cola(int x, int y)
{
this.x = x;
this.y = y;
siguiente = null;
}
public void dibujar(Graphics g)
{
if(siguiente != null)
{
siguiente.dibujar(g);
}
g.FillRectangle(new SolidBrush(Color.Blue), this.x, this.y, this.espacio, this.espacio);
}
public void setxy(int x, int y)
{
if(siguiente != null)
{
siguiente.setxy(this.x, this.y);
}
this.x = x;
this.y = y;
}
public void meter()
{
if(siguiente == null)
{
siguiente = new Cola(this.x, this.y);
} else
{
siguiente.meter();
}
}
public int getX()
{
return this.x;
}
public int getY()
{
return this.y;
}
public Cola verSiguiente()
{
return siguiente;
}
}
}
objeto.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace snake1
{
class objeto
{
protected int x, y, espacio;
public objeto()
{
espacio = 10;
}
public Boolean interseccion(objeto o)
{
int difx = Math.Abs(this.x - o.x);
int dify = Math.Abs(this.y - o.y);
if(difx >= 0 && difx < espacio && dify >= 0 && dify < espacio)
{
return true;
} else
{
return false;
}
}
}
}
Comida.cs
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace snake1
{
class Comida : objeto
{
public Comida()
{
this.x = generar(77);
this.y = generar(37);
}
public void dibujar(Graphics g)
{
g.FillRectangle(new SolidBrush(Color.Red), this.x, this.y, this.espacio, this.espacio);
}
public void colocar()
{
this.x = generar(77);
this.y = generar(37);
}
public int generar(int n)
{
Random random = new Random();
int num = random.Next(0, n) * 10;
return num;
}
}
}
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
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:
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
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.
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
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í
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í
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í
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.
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
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
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"
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
"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"
