Esto puede interesarte

Como Ganar dinero por Internet es la pregunta que muchos nos estamos haciendo hoy en día y estoy seguro que es una de las frases mayor buscadas en google, bueno pues no esta nada mal querer tener ingresos pasivos mes a mes y de una manera facil y seguro.

En  Internet existen numerosas paginas que nos permiten ganar dinero viendo a nuncios de otras paginas web, haciendo pequeñas tareas o viendo videos de youtube, estas paginas o plataformas te hacen ganar apenas centavos cuanto mucho 1 dolar por día no esta nada mal para quienes no tienen obligaciones o cuantas que pagar etc. Esta es la razon por la cual vengo hablarte de MECOIN.

Pero que es MECOIN ?

Me-Coin es una plataforma de inversiones donde puedes comprar paquetes de inversion o centros de inversion como ellos le llaman esto para conseguir dinero a cambio de dinero, no se si esta es la palabra correcta pero lo cierto es que si paga. Te explicare a detalle que es y como podemos ganar dinero ten en cuenta algo importante para poder ganar buen dinero hay que invertir solo el capital que tienes disponible ya que para tener exito hay que dejar que el tiempo vuele sin desesperarnos


Me-Coin la empresa numero del 2017

Como hacer un contador de visitas on line con php


Ya muchos de nosotros a lo mejor hemos oído hablar de este lenguaje de programación creado por google pero a lo mejor no es por eso que he decidido crear un articulo sobre este novedoso lenguaje de programación y lo mas importante que tienes que saber para que puedas decidir si quieres aprenderlo o no






Loading...

Go el lenguaje de programación del lado del servidor hecho por google



Es un gustazo volver a escribir para los interesados en aprender día a día este bonito pasatiempo, trabajo o como quieras llamarle, pero la verdad es que todo informático, estudiante o titulado que apenas esta saliendo de la universidad no llega a tener todos los conocimientos que se adquiere a ya afuera en el trajin de todos los días es por eso que aquí estamos para servirle al mas necesitado jeje.

Bueno en esta ocasión vamos aprender a enviar los datos de un formulario por correo electrónico y  para eso solo nos vamos a enfocar solo el código  ya que usaremos el formulario que hicimos anteriormente si aún no has visto el post de como hacer un formulario con html y css aquí esta el link Como hacer un formulario responsivo con html y css ahí aprenderás como realizar un sencillo pero bonito formulario de contacto responsivo.

Bueno gente abajo pondré el código comentado con la explicación esto bien lo pueden copiar y pegar para sus propios proyecto recomiendo que ustedes mismos lo estudien y lo hagan para que se les pegue en la mente.

Aquí te muestro una función la cual nos permite validar el correo ingresado en nuestro formulario

Aquí aplicamos nuestra función dentro de un if para validar si el correo es correcto y si no es correcto nos mandara un mensaje de error.


Este seria el código completo del programa en si, la función mail es la que hace posible el envió y le pasamos los valores del header o cabecera el mensaje, mas el titulo y el contenido que es una variable que declaramos con el contenido html necesario para que nuestro correo este maquetado correctamente.

Luego declaramos una variable $envio para validar si el mensaje fue enviado o no y a si el usuario sabrá si el mensaje se envió o no ya que la función mail siempre devuelve true.

Algo muy importante que tienes que saber es que para que esto funcione tienes que subirlo al servidor, hosting que prefieras de lo contrario no sera posible el envío y desde luego cuando pruebes el código te enviara el mensaje que hemos puesto cuando intentes enviarlo. 







Loading...

Como enviar formulario de contacto por correo con php

Muy buenas a todos, esta vez les traigo algo muy simple pero de mucha utilidad, se trata del diseño de un formulario de contacto en html y css para tu web o blog.

El propósito de este pequeño aporte es muy simple pero estoy seguro que le va a servir a más de alguno claro que si ya sabes como hacer esto bueno pues no pasa nada aquí estamos para los que no saben pues de eso se trata estos pequeños tutoriales más que nada para ayudar y motivar a quienes están con el deseo de aprender y querer aumentar sus conocimientos.

Bueno pues esto no va hacer de tanto blabla puesto que estoy seguro que hay gente que maneja el html aunque sea un poquito de hecho mas adelante estaré haciendo un curso de html5 y de las apis que posee recuerda que esto se trata de aprender de abajo hacia arriba.

El código a continuación para el maquetado en html es el siguiente.





El proyecto consta de dos archivos el index.html y el style.css, ya que estás viendo la imagen de arriba notaras que arriba en el head puedes ver una etiqueta esta nos permite enlazar ambos archivos para que el index.html pueda reconocer los estilos que le daremos más adelante.

Luego dentro del body tenemos la etiqueta form esta es importante para que el formulario pueda ejecutar el envió por medio del atributo actión, bueno en realidad form tiene mas atributos pero no lo detallaremos en este post ya que mas adelante veremos como procesar este formulario.

Dentro del form hay mas contenido importante como es el caso de los input, estas son etiquetas de entradas muy importante para almacenar la información que envía el formulario, como puedes ver en nuestro caso hay tres tipos de input los cuales son de tipo texto, email y tel estos trabajan de diferentes formas según el dispositivo y los medios en los que nos encontremos por ejemplo el input de tipo text almacenara cualquier texto, numero o cadena de caracteres que el usuario introduzca pero el de tipo email posee un formato de tipo tucorreo@correo.com que si no se respeta marcara error a la hora de enviar el form, el de tipo tel o teléfono es muy similar al de tipo text la única diferencia  es que cuando un usuario entra al formulario por media de un dispositivo mobil este abrirá una especie de teclado numérico que permitirá al usuario ingresar nuemeros.

Tambien puedes ver una etiqueta textarea que le permite al usuario visualizar e introducir mucho texto que por lo normal es alguna información que el usuario envía como reclamos, detalles de algo en especifico o cualquier petición que el usuario solicite.

Cada una de las etiquetas poseen atributos class, estas permiten identificar el estilo para cada uno de ellas el cual se encuentran en el archivo style.css ademas si ves detalladamente vas a ver un atributo llamada placeholder esto permite añadir un texto de ejemplo para cada una de las entradas de texto en nuestro formulario.

Para finalizar la explicación de ver una etiqueta button esto no es mas que un botón para enviar nuestro formulario claro que para enviar un formulario vendría mejor usar la etiqueta esta es la clásica para envíos de información por medio de php. Seguidamente vamos a ver que al final esta la etiqueta de cierre
esta nos sirve para dar por finalizada la maquetación de nuestro formulario.

Ahora vamos a lo bonito, en este momento nuestro maquetado se ve a si.

Se ve totalmente feo claro ya que no tiene el css necesario para verse bien.

Por si no sabes que es css, es una hoja de estilo en cascada o Cascading Style Sheets(css) esta hoja de estilo es el que hace posible la magia de esconder lo feo del puro html claro que si, pero bueno no vamos a entrar mucho en el tema de css, hay que enfocarnos en el codigo de la hoja de estilos que pondré a continuación.

form{
margin: 0 auto;
width:450px;
margin-bottom: 20px;
padding: 10px 20px;
border-radius: 7px;
background-color: rgba(10,60,70,0.7);
box-sizing:border-box;
margin-top:20px;
text-align: center;
}
input,textarea,select{
width: 100%;
margin-bottom: 20px;
padding: 7px;
box-sizing:border-box;
font-size: 17px;
border: none;
}

form h2{
color: #fff;
font-size: 40px;
margin-bottom: 20px;
display:inline-block;
font-family: monospace;
}
textarea{
max-height: 200px;
min-height:100px;
max-width: 100%;
}
#boton{
background-color: #31384A;
color: #fff;
padding: 20px;
border: none;
width: 100%;
font-family: monospace;
font-weight: bolder;
font-size: 2em;
}
#boton:hover{
cursor:pointer;
}

@media (max-width:480px){

form{
 width:100%;
}

}


No entrare en fondo a explicar el css por la razón que ustedes mismos deben estar pensado jajaja ya me lo imagino tan largo este código que explicarlo todo seria una locura por lo que explicare algo importante ya que este formulario es responsive se adapta a dispositivos mobiles sin perder su diseño.


Entonces te voy a explicar rápidamente en que consiste el diseño responsivo, yo le he dado a la etiqueta form del index.html el diseño principal desde el archivo css si sabes un poco de css sabrás leerlo sinproblema alguno pero hay una propiedad que quiero mostrarte box-sizing: border-box esta es es una propiedad CSS para cambiar el modelo de caja por defecto de los navegadores, con esto hacemos que el ancho especificado sea equivalente al ancho total ya que como verán le hemos puesto padding:10px 20px; estas propiedades agregan mas anchura a nuestro diseño y viendolo con un dispositivo mobil quedaría a sí. 



Como podes ver se ve bastante mal, algo muy importante que tienes que saber para que la propiedad box-sizing:border-box sea compatible con todos los navegadores es que debes agregar los prefijos para cada navegador los cuales serian.

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
     box-sizing: border-box; 

Debes agregar estos prefijos para cada navegador en otros tutoriales aprenderemos mas sobre estos prefijos.

Ahora por ultimo esta el media query que hara posible que se vea totalmete responsivo a continuación.


@media (max-width:480px){
form{
          width:100%;
}
}

Con esto terminamos este pequeño aporte y bueno para explicar un poco aquí creamos un media query para los que no saben que es un media query.



Media Quieres
  
es un modulo de CSS3 que permite adaptar la presentación del contenido de un sitio web a características de dispositivos móviles como ejemplo esta la resolución de la pantalla.

Entonces el modo en que creamos o declaramos media queries es @media() y entre paren-tisis van las diferentes resoluciones que abarcan distintos dispositivos en nuestro caso tenemos @media(max-width:480px) esto significa que la media query creada sera para dispositivos de 480px  dentro encontramos el selector form con ancho del 100% que nos dice todo esto, bueno pues es fácil de entender,en todo dispositivo que tenga 480p nuestro formulario tendrá 100% de ancho osea tomara el ancho total del navegador.


Espero que esto sea de utilidad para alguien que este aprendiendo sobre estilos css y html, ahora prometo que haré un post donde aprendas a enviar los datos de este form a un correo electrónico y luego a una base de datos es un gusto y sera hasta la próxima.

adjunto link para que descargues los archivos que trabajamos.

Descargar archivos del proyecto

Formulario de contacto con html5 y CSS3 responsive

En esta ocasión les traigo un tutorial muy básico para todas aquellas personas que están comenzando a programar con C#, este es uno de los tantos que estaré realizando con este lenguaje y el IDE Visual Studio.Net, esto con el propósito de que personas interesadas en el tema puedan encontrar los recursos necesarios para iniciar el aprendizaje en este tan solicitado lenguaje en el mundo laboral.

Si estas haciendo un programa que hará peticiones a una base de datos, entonces necesitaras una base de datos y una conexión a la misma, si aún no sabes como hacer una no te preocupes aquí aprenderás como hacer una base de datos desde cero y a conectarla con tu programa en C#.

Bueno pues para comenzar haremos una base de datos y a provecharemos la misma para crear una tabla la cual nos servirá para futuros tutoriales.

Entonces si estas comenzando a estudiar C# ya habrás instalado Visual Studio te recomiendo de la versión 2010 en adelante si no lo has instalado te pondré aquí el link para descargar e instalar Visual Studio.Net versión Express para C# que viene bien tenerlo y no cuesta nada los link te lo pondré abajo, también necesitaras descargar SQL Server o bien si ya lo tienes descargado mucho mejor si no... abajo te pondré el link de descarga de la versión express  


Teniendo instalado los recursos necesarios pasamos ya a lo que nos importa, primero es necesario crear una base de datos pero...... como hacemos esto?, fácil abrimos el SQL Server esperamos que cargue y cuando estemos dentro vamos a dar clic en nueva consulta como aparece en la imagen a continuación.


Luego de hacer esto nos va aparecer una ventana de color blanco a la derecha y ahí colocaras el siguiente código que te pondré a continuación.




Te voy a explicar cada código que detalla la imagen anterior.



create database ---> este es el comando que se utiliza para crear la base de datos.



Como ven después de este comando escribimos la palabra comoprogramasDB este es el nombre que recibirá nuestra base de datos (tu puedes poner lo que te venga en ganas). Al finalizar el script que crea la base de datos vemos la palabra reservada go esto indica al servidor la instrucción final de un lote de instrucciones Transact-SQL.




Create table ---> este comando nos va a servir para crear una tabla en nuestra base de datos.



Después del comando create table se coloca el nombre de la tabla cursos( tu puedes poner la que te venga en ganas) a si podrá ser identificada en tu base de datos ya que en una base de datos puede a ver un sin número de tablas. 



Luego ya para finalizar esta pequeña explicación sobre la base de datos rápidamente te voy a explicar que significa el resto del código de abajo.



Es importante de después de colocar el nombre de la tabla encierres entre paren-tisis todo lo demás, bien pero..... que es todo eso? simplemente son los campos que contendrá la tabla que hemos creado como ves cada uno de los campos tiene propiedades las cuales son muy importante te explico.



id int identity ----> es un campo que he creado para identificar el registro dentro de la tabla a si de sencillo int es el tipo de datos que tendrá este campo y no es mas que de tipo entero, identity es una propiedad de Transact-SQL que permitirá incrementar automáticamente al momento de insertar un registro dentro en la tabla.



Nombre_curso varchar(50) not null ----> Este campo se identifica como una cadena de caracteres por la propiedad varchar el valor en parenti-sis es 50 y representa la longitud máxima de caracteres que se le permitirá al campo agregar y por ultimo esta not null y esto sirve para decirle al campo que no permita valores nulos.



FechaInicio date not null ----> es otro campo pero de tipo fecha y lo representa la propiedad date este también tiene una propiedad no nula ya antes explicada.



Por lo general no es necesario explicar los otros campos ya que es exactamente lo mismo en otros tutoriales veremos mas a fondo lo necesario para aprender Transact-SQL.



Ahora teniendo la base de datos lista podemos ir a lo que nos importa ya que este tutorial se trata de crear una conexión a una base de datos y por esta razón me tome el tiempo de explicar como hacer la base de datos, creo que es una parte esencial de quienes desean aprender.







Como conectarnos a una base de datos desde C# 


Esto es tan sencillo como crear la base de datos por lo que tratare de ser lo mas breve posible, ok pues manos a la obra.




Abrimos el Visual Studio nos aparecerá una pantalla y hacemos clic en nuevo proyecto a si como en la imagen a continuación.




Luego de esto nos aparecerá otra pantalla donde vamos a configurar nuestro nuevo proyecto, le ponemos el nombre que queramos en mi caso le puse tutorial_n1 tu le pones como quieras, asegúrate de tener seleccionado Visual C# y aplicación de windows form, escojo windows forms porque lo mas probable es que estés queriendo hacer una aplicación con ventanas y todo eso. Fíjate bien en la imagen de abajo la forma en que debes configurar tu proyecto para programar en C#.


 


Ahora bien lo que nos aparecerá después de esto es el diseñador de formularios y para no a largar esto un poco mas el diseño te lo pondré a continuación, tu si quieres puedes hacerlo o bien descargar el archivo de este este tutorial que esta mas abajo pero te recomiendo que lo hagas tu para que vallas aprendiendo más.


  
Como ves este es el diseño mismo fácil y rápido sin complicaciones, ahora te detallare el código y te voy a explicar el funcionamiento básico y mas importante.



Antes de leer esta parte de la explicación del código detente un poco y visualiza el código de la imagen de arriba.



Como podrás ver he usado un botón para hacer la prueba de la conexión en tu caso si esta desarrollando tu primera aplicación con bases de datos tendrás que crear una función la cual vas a estar llamando cada vez y cuando hagas alguna consulta a la base de datos, en mi caso lo hice así porque no haré ninguna solo probare la conexión.claro que pude a verlo hecho pero no es el caso en otro tutorial les estaré enseñando como hacer una clase solo para conexión y que permita cambiar el servidor en tiempo de ejecución.



Bueno pues me toca explicarte como funciona el código, teniendo el formulario diseñado das doble clic al boton1 y es ahí donde metemos todo el código.



ahora bien si logras ver el código esta dentro de un try catch pero ¿que es? y para que sirve.



Try Catch es un controlador de excepciones, sirve para controlar las excepciones  Common Language Runtime (CLR) ya que cuando se produce busca la instrucción catch que es el encargado de controlarla, si en este código no estuviera esta instrucción muestra un mensaje al usuario de excepción no controlada y detiene la ejecución del programa.



En todo caso es necesario usar excepciones en tus programas esto ayudara a que tengas más control de tu código.



Sintaxis de Try Catch 




Try{


    //Operación a realizar



}catch(Exception ex){

   
         //Aqui controlamos las excepciones para que nuestro programa no se detenga repentinamente
}

Ahora bien entramos a lo más importante, la explicación en si de como conectarnos a un servidor de bases de datos SQL Server, bien pues... para esto necesitaremos importar la librería SQL y se hace de la siguiente manera.




Entonces si ves la imagen detalladamente podrás ver que hay muchas librerias en uso cada una de ellas tiene una función en especifico la que a nosotros nos interesa es la que esta final.

using System.Data.SqlClient; esta nos permite usar las instrucciones para cada operación que vallamos a realizar con el servidor SQL Server.



En la imagen arriba puedes ver la cadena de conexión y esta entre comillas y esta nos permite acceder al servidor y seleccionar la base de datos que necesitamos.

Pero necesitas saber para que sirve cada propiedad.

SqlConnection; ---> es una clase que nos sirve para construir objetos de conexión  a una base de datos sql server. 

Para crear un objeto de conexión se declara una variable del tipo sqlconnection en mi caso le puse cn y luego con la palabra reservada new creamos el objeto d conexión y le pasamos la cadena de conexión (Recuerda cambiar el nombre de servidor al nombre del servidor SQL que tu tengas) que hará el trabajo de conectarnos a la base de datos y desde luego abrimos la conexión con el objeto creado accedemos al método open.

De esta forma estaríamos conectando nuestra aplicación a una base de datos de sql server, solo quedaría hacer un validación con un if básico para saber si nuestro objeto hizo la conexión o no y luego enviar un mensaje al usuario para que sepa que la conexión ha sido un éxito.

Bueno amigos espero que este aporte sea útil para aquellos que estamos aprendiendo desde cero, se que es un poco extenso este post pero es necesario explicar detalladamente cada una de las partes mostradas aquí.

Como siempre digo mi única intensión es que aprendas y mi recomendación es que practiques lo mas que puedas y a si tengas la practica y la teoría de la mano.

aquí te pondré el link para que descargues los archivos y pruebes el código. 

Link aquí Turorial Como conectarnos a una base de datos con C# y SQL Server   


Loading...


C# Conectando base de datos SQL SERVER

Es un hecho que para iniciarnos en el aprendizaje de cualquier lenguaje de programación empezamos por comprender la sintaxis que tiene cada uno de ellos, por ejemplo nos enfocamos en como declarar variables, como realizar una estructura selectiva o repetitiva etc, por lo que en esta ocasión estaremos aprendiendo que es una variable y como declar una variable en JavaScript.

JavaScript es uno de los lenguajes mas utilizados por los diseñadores web ya que su pontecial nos permite implementar novedosas características a nuestros sitios web.

Para comenzar hay que definir que son las variables y para nos sirven cuando estamos programando.

¿Que son las variables?

Son elementos empleados para el almacenamiento de datos cuyo principal objetivos es guardar la información en memoria para ser utilizados en procesos matemáticos o procedimientos, como ejemplo podemos decir que una variable es un espacio reservado para una actividad especifica.

Las variables en JavaScript

Podemos declarar variables en JavaScript como en cualquier otro lenguaje de programación pero claro la sintaxis en mucho más diferente e incluso mucho mejor que en otros lenguajes esto debido a que en JavaScript no existe la necesidad de inicializar variables e incluso declarla con algun tipo de datos.

Para declarar variables en JavaScript se utiliza la palabra reservada var por ejemplo.

var suma; 
aquí estamos declarando la variable suma pero ojo no aún no tiene definido un tipo de datos, para asignarle un tipo de dato se requiere inicializar la variable de la siguiente manera, si dejamos las variable suma sin nungún valor asignado no pasa nada de hecho estaría tomando un dato null que mas adelante puede cambiar dependiendo de lo que estés realizando.

var suma=10;
Como se observa aquí si estamos asignando un valor de tipo entero por lo que automáticamente la variable suma se convierte en una variable de tipo entero.

El tipo de dato estará adependencia de lo que le asignemos a la variable por ejemplo si a la variable suma le asignamos 10.5 esto hace referencia a que es una variable de tipo flotante de igual manera que si le asignamos una cadena de caracteres por ejemplo.

var suma="10";
Aparentemente pareceria que la variable es de tipo entero pero no, el valor diez está entre comillas por lo tanto estamos hablando de una cadena de caracteres, igual sería si le ponemos "10.5" estariamos hablando de una cadena de caracteres o de tipo string.

JavaScript identifica si las variables están en mayuscula o minuscula por lo tanto no es lo mismo decir SUMA que suma ambas variables son totalmente diferentes e independiente una de otra.

Los tipos de datos en JavaScript son los mismos que en cualquier lenguaje, podemos encontrar string, integer, float, boolean etc. Para declarar una variable booleana es necesario asignarle true o false ejemplo de esto sería.

var verdadero=true;

Las variables no requieren de declaración podemos declarar una varia con un tipo y mas tarde asignarle un dato tipo string por ejemplo; var cantidad=20; y en otro lugar del programa escribir cantidad="veinte".

Es importante saber que cuando declaramos una variable se utiliza la palabra reservada var una sola vez cuando declaramos la variable pero tambien podemos declarar la variable sin la palabra reservada varvarvarvarvar ejemplo de esto sería.

var suma; ó suma; seria erróneo hacer esto, var suma=1+2; alert('La suma es '+ var suma);

Hay mucho mas cosas por las que hablar sobre las variables en JavaScript pero creo que esto es lo mas básico que debes saber para empezar a programar eso si debes practicar mucho porque aunque veas sencillo el lenguaje veras más adelante que JavaScript es mas que eso.

Esto es solo el comienzo de muchas mas cosas interesantes que estaré haciendo en este blog te invito a explorar mi sitio y a volver quisas encuentres lo que estas buscando. Recuerda que puedes hacerme cualquier consulta y si necesitas ayuda en clases me puedes contactar estaré gustoso de ayudarte en tus inicios como programador.

Estoy libre a criticas de cualquier índole ya que una critica no es una amenaza ni ofensa más bien es una oportunidad para mejorar en lo mas mínimo.

Saludos y un fuerte abrazo nos vemos en la proxima.





Loading...

Tutorial JavaScript-Variables