( 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
ejemplo
ahora 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
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
ejemplo
ahora 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
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