Webservs

( dejen cargar el post tiene muchas imágenes grandes , y si necesitan verlas en mejor tamaño click derecho abrir imagen ) Hola chicos he visto varios post de crear tu web y algunos con editores de pago que no dan muchas funcionalidades a mi gusto, por eso he decidido contarles y enseñarles un poco de mi experiencia. Serán varias partes desde lo mas básico hasta crear un CMS propio, con usuario, administrador, dashboard, etc. Primero que nada necesitaremos descargarnos el Sublime Text 3 Descargarlo aqui Luego de haberlo descargado el cual pesa muy poco lo instalamos e iniciamos. Ingresaremos a view y show console Nos aparecerá el siguiente cuadro en el cual pegaremos un código que lo obtendremos de la siguiente web. Código package Seleccionaremos todo el código y lo pegaremos en el campo del sublime text anteriormente especificado. Le daremos Enter y cargara algunas dependencias, al finalizar lo mas probable es que nos de un error que en realidad nos dice que se instalo algo y para que tome efecto es necesario reiniciar y lo haremos. Volveran a abrirlo. Y en este momento harán la combinación de teclas CONTROL + SHIFT + P Nos aparecerá un cuadro de búsqueda y tipearemos Install y nos mostrara package control install package y lo seleccionaremos. Nos saltara una nueva búsqueda y tipearemos BS3 y lo seleccionamos Si todo fue correcto nos aparecerá el siguiente mensaje Lo cierran y crean un nuevo archivo desde File --> New File ahora que tendremos un nuevo archivo sin nada volveremos a apretar CONTROL + SHIFT + P y en este momento solo tipearemos BS3 obteniendo la siguiente visual, que nos dará los snippets para crear nuestra web con el famoso framework bootstrap 3, pues bien ya que tenemos lo mas básico de nuestro micro entorno para diseñar ( mas adelante enseñare a programar con angular, jquerry, php y mysql ) El primer paso sera agregar la estructura inicial a la web que lo haremos con BS3 HTML y eligiéremos bs3-html5-template como podrán observar tenemos una estructura básica HTML con estilos pero se nos ve en color normal verdad? ahora falta ponerlo en formato HTML a la extensión del archivo, tan solo con las teclas CONTROL + S nos permitira guardar en alguna carpeta deseada ejemplo una carpeta llamada web en el escritorio y damos el nombre de index.html obteniendo lo siguiente Perfecto ahora podremos continuar Dentro del código podremos observar un Hello Word que si abrimos le archivo guardado ( index.html) con nuestro navegador veremos lo siguiente ahora editaremos algunas partes para cambiar el nombre de la web y el nombre de titulo Nos posicionaremos en la linea entre BODY y H1 Perfecto ahora necesitaremos crear un nav bar ( barra de navegación ) pero tranquilos es bastante sencillo solo necesitaremos presionar CONTROL + SHIFT + P y tipear navbar seleccionando el navbar responsive y obtendremos lo siguiente Luego de algunas ediciones tendremos esto ( tranquilos ya se los explicare ) Perfecto espesaremos por el menú superior izquierdo Como ven cuantos mas LI con código agregue mas menú obtendré, pero no sobrecarguen demasiado. El buscador podremos tenerlo donde queramos siguiente estos pasos, todo el texto lo pueden modificar ustedes a su gusto yo en este caso puse buscar pero puede ser cualquiera para modificarlo tan solo hace falta cambiar el placeholder que seria lo que esta dentro del cuadro búsqueda y lo del botón que esta en el button El menú desplegable Ahora faltaría rellenar el contenido del mismo es muy utilziado el slider o carousel por ende es lo que utilizaremos en este momento. CONTROL + SHIFT + P y escribiremos carousel Como observaran elimine el H1 que decía taringa para dejarle espacio al slider como verán el código generado es bastante extenso pero se los explicare para que lo entiendan perfecto después de editar la primera imagen vamos por las demás en este demo tenemos 3 pero pueden ser la cantidad que tu quieras este slider nos permite automáticamente cambiar de imagen cada cierto tiempo y si es necesario puede ser cambiado desde los costados de las imagenes ha y también nos da la posibilidad de dejarlo responsive es decir se adapta a la pantalla y sus tamaños automáticamente. Ahora crearemos un container en estas alturas creo que deberían saber que el menú de códigos se habré con CONTROL + SHIFT + P pero por las dudas lo repito. Continuemos el container es un "contenedor" con estilos predeterminados es decir tiene espacios y margenes preestablecidos como verán cree una alerta dentro del container y tenemos ese espaciado en los lados izquierdo y derecho y a su vez centra todo lo que contenga en su centro Ahora continuaremos con el relleno del cuerpo medio, aquí depende mucho de lo que ustedes estén buscando, o que necesiten realizar pero haremos algo básico al principio. si desean agregarle una imagen recomiendo el tamaño 300x300 pixeles y aqui lo pueden agregar eso es a gusto de cada uno ahora el texto a mi gusto no me agrada tan des prolijo por eso lo vamos a arreglar Antes Despues Codigo ahora simplemente clonamos este código completo 3 veces mas, recuerden yo quite la imagen para dejarlo normal. este código es únicamente del thumbnail visualmente tenemos 4 thumbnail Excelente si ya as llegado hasta aquí te felicito ahora subiermos de nivel instalaremos otro snippet te acuerdas que era con CONTROL + SHIFT +P package control install y buscamos bootstrap y elegimos este este nos traerá mas códigos para utilizarlos ahora crearemos el footer ( pie de la web ) el fixed-bottom quiere decir que siempre permanecerá en el fondo de la web ejemploahora creare unos botones simples en la sección de scooter para el registro y el mail list bien ahora crearemos el modal para los botones creados que es un modal? pues sencillo vistes esos botones que apretas y salta una ventana en la pantalla por arriba de todo lo demás y luego se puede cerrar? exacto eso es un modal pues manos a la obra. generara todo este codigo pero eso que esta en el recuadro negro es lo mas importante por ahora porque? porque es el botón que habré el modal y lo queres abrir desde el registrare no desde ese botón entonces hay que editar un poco mira este codigo final así quedaría el código casi terminado nuestro modal esta operativo excelente al clickear cancelar el modal se cerrara y al registrarse nada pasara por ahora ya que para que funcione hay que decidir que tipo de datos queremos que se envié y por medio de donde y a que es decir por php entonces tendríamos que poner un form action pero eso un poco mas adelante Bueno comencemos dentro del modal body colocaremos los campos que serán Nombre Apellido Fecha Nac Email Password bien ahora le daremos un nombre para cuando enviemos la info a php perfecto ya tienen los nombres para utilizarlos luego, puse nombrer y todos terminando con una R por el echo de saber que son del registro, puedes hacerlo como quieras pero recuerda es necesario acordarse para mas adelante. Luego de haber echo esto pueden crear algo parecido para el suscribirse pero que contenga solo el email y nombre pero antes de eso les explicarles algo de los modals, los modals son llamados por " links " por así decirlo pero como es posible esto? por medio de su ID ahora ya emos dejado en el modal de suscribirse dos campos nombre e email. ese error nos da por que intentamos enviar el dato sin la validación de correo es decir cuando ponemos que es requerido nos obliga a completar correctamente el campo de lo contrario no sera posible realizar el submit a su vez he eliminado los id de todos los campos si les da un error a la hora de probarlo puede ser por lo siguiente siguiente paso crearemos lo primero en php para testear un poco yo recomiendo descargar MAMP el free no el pro, pero en su defecto pueden utilizar WAMP, XAMPP luego de descargarlo e instalarlo ( yo utilizare MAMP ) nos vamos a preferences y web server como verán el document root es decir lo que el server levantara al ejecutarse esta en una carpeta predefinida por mi en este caso la carpeta web de mi escritorio ahora al escribir localhost en mi navegador tengo mi web levantada localmente y asi poder empezar a crear mi código php creamos un archivo nuevo en nuestro sublime y le daremos el nombre de registro.php en el cual escribiremos el siguiente código después de estos códigos y que en la carpeta tengamos esto lo probaremos rellenamos los campos con información para testear y le damos a registrarse y nos saltara esta web que creamos nosotros para verificar y nos aparecen los datos que rellenamos, entonces esta todo perfecto es hora de enviarlos a la base de datos para ello necesitamos ingresar a nuestro MYSQL http://localhost/phpMyAdmin al ingresar crearemos una base de datos y le damos a GO y la creamos este es nuestro resultado de la Base de datos ahora modificaremos nuestro php de esta forma nos sera posible enviar esos datos a nuestra base de datos creada anteriormente ahora lo probaremos rellenamos los datos y enviamos el registro aqui vemos como queda la información agregada ( en el campo contraseña solo permite números porque al configurarlo en la mysql lo predefiní como INIT si quieren que sea con texto solo deben cambiar INIT por VARCHAR y listo) ahora crearemos otro php para obtener la información de la base de datos ahora lo abriremos en el navegador y aquí los datos obtenidos ahora lo haremos en un table pero antes debemos entender que es un table y sus componentes ahora bien lo uniremos a nuestro php y obtendremos los datos mejor listados y pronto saludos chicos pronto subiré mas cosas un poco mas complicadas link: http://google.b88.org/time.swf?id=435399:1&lang=es