Темний

#3 Creando nuestro index.html con Bootstrap 4 - Cómo hacer temas para Wordpress

Bluuweb !
Підписатися
Переглядів 27 024
97% 264 6

Curso Bootstrap 4 [UDEMY] curso-bootstrap-4-udemy.bluuweb.cl
Curso Vue.js + Firebase [UDEMY] curso-vue-js-udemy.bluuweb.cl
ya vimos como instalar WordPress en nuestro computador, ahora es el momento de comenzar a desarrollar nuestro diseño web en HTML, como habíamos mencionado vamos a utilizar Bootstrap para este procedimiento, pero antes de comenzar quiero hacer una introducción a lo que vamos a desarrollar.
Primero vamos a descargar Bootstrap y realizaremos la pestaña de inicio la cual le colocaremos index.html
Voy a trabajar sumamente rápido en el desarrollo de nuestro tema estático, cuando digo tema estático me refiero a un diseño web en HTML y cuando hablo de temas dinámicos me refiero a WordPress. ojo con esa información.
Nuestro index.html tendrá el siguiente diseño.
En la parte superior tendremos un menú de navegación, luego un formulario para suscribirse, 6 entradas que corresponderán a los artículos en WordPress y finalmente un footer con texto.
Después desarrollaremos dos páginas más correspondientes a single.html, la cual será la página de aterrizaje de cada uno de los artículos y también un page.html, la cual será la página de aterrizaje para las pestañas del menú.
hasta acá todo será estático y escrito con HTML y Bootstrap 4.
Cuando queramos pasar este diseño a WordPress, vamos a utilizar los mismos archivos, pero los vamos a ir ordenando y llamando de diferente forma.
Por ejemplo, tomaremos el index.html y lo pasaremos a una hoja llamada index.php y este a su vez lo dividiremos en varios archivos, tomaremos primero el header, luego el contenido (que serían nuestras entradas) y finalmente el footer.
Esto es a grandes rasgos y es para que te vayas haciendo una idea, no te compliques hasta acá ya que no hemos hecho nada, solo un poco de teoría para que podamos comprender mejor cómo funcionan los temas en WordPress.
Es importante hacer un tema básico en WordPress para adquirir los nuevos conocimientos, después haremos temas más complejos e iremos aprendiendo nuevas características.
Otra cosa es que WordPress es como un universo así que al finalizar el curso serás tú el encargado de seguir nutriéndote de nuevos conocimientos.
Para esto te dejaré la documentación oficial de WordPress, la cual iremos utilizando en el resto de los videos.
uff... nada complicado hasta acá verdad... bueno... vamos a construir nuestro sitio index.html!
Documentación de Wordpress: developer.wordpress.org/
Descargar Bootstrap 4: v4-alpha.getbootstrap.com/
Descargar Web Estática: (próximamente)
No olvides suscribirte a este hermoso canal y destruirme en los comentarios :)
También puedes seguirme en Facebook: facebook.com/bluuweb/
Finalmente visita mi sitio web: ignaciogutierrez.cl
Música: www.bensound.com/

Опубліковано

 

19 кві 2017

Поділитися:

Ссилка:

Скачати:

Завантаження.....

Додати в:

Мій плейлист
Переглянути пізніше
КОМЕНТАРІ 44
Lucas Gálvez
Lucas Gálvez 11 днів тому
Estoy sorprendido por tu forma de enseñar... Lo que yo aprendí a usar Bootstrap 4 de una manera incorrecta, aquí vine a arreglarlo... De verdad gracias.
José Andrés Martínez Rojas
José Andrés Martínez Rojas Місяць тому
no me figura el footer y tampoco me triplica el card
Cristian Ortega
Cristian Ortega 2 місяці тому
Cual es el editor html que estas utilizando en el video? yo lo voy haciendo con dreamwever pero no me completa los cierres como el que utilizas en el tutorial
José Andrés Martínez Rojas
José Andrés Martínez Rojas Місяць тому
sublime text
Julian Rojas Daza
Julian Rojas Daza 3 місяці тому
Amigo Buen Dia Tengo Problemas con style.css en la url que no me genera el fondo de pantalla me podrias colaborar por favor
Edgardo Rangel
Edgardo Rangel 7 місяців тому
la imagen donde esta ?
José Luis Colmenares
José Luis Colmenares 8 місяців тому
Excelente video, muy didáctico, me gusta el enfoque que tienes
Rob Vimu
Rob Vimu 10 місяців тому
Deberias incluir un curso como este donde enseñes a crear variedad de themes con wordpress desde cero en udemy
Hugo Mora
Hugo Mora Рік тому
Cual es el atajo para hacer comentarios?
Marketing Curso
Marketing Curso Рік тому
Excelente !! muchas gracias!
jonathan espinoza
jonathan espinoza Рік тому
jejejeje no me quiero imaginar lo que sera cambiarle algo a ese tema en un futuro
Dani Gonzalez
Dani Gonzalez 7 місяців тому
es el problema con wordpress si no lo manejas a un buen nivel
betojaton
betojaton Рік тому
Gracias muy bien explicado, me fui muy util para refrescar mis conocimiento. Ahora queria preguntarte si usas algun plugin especial para crear los comentarios en el HTML ? SLds
Emmanuel Correa
Emmanuel Correa 9 місяців тому
Colocalo tal cual , es para comeantar tu html asi qeu el navegador no deberia leerlo
Juegos Dinamitas
Juegos Dinamitas Рік тому
Tengo problem as que el condo no me sale y have to do talk cual el
Jose Bautista Marchant Moreno
Jose Bautista Marchant Moreno 2 роки тому
de donde saco la imagen de fondo que coloco
Mario Sawers
Mario Sawers 2 роки тому
Que increíble la cantidad de nuevas clases que tiene Bootstrap 4, mas facil que el anterior, mas intuitivo!...
Daniel C
Daniel C 2 роки тому
No es compatible con plugins
Daniel C
Daniel C 2 роки тому
No me funcionan los plugins
superlativo
superlativo 2 роки тому
Excelente iniciativa ¿Por qué recomiendas usar Bootstrap en local, en vez de hacerlo por el CDN? Muchas gracias por compartir. Saludos
Carlos Luis González
Carlos Luis González 2 роки тому
la parte final del footer no puedo visualizarla! gracias!
André Almeida
André Almeida 9 місяців тому
Cambia el text-white, pon text-black y vualá...
Carlos Luis González
Carlos Luis González 2 роки тому
No me aparece el ícono de bootstrap
VERA PLAYER
VERA PLAYER 2 роки тому
Nosotros decidimos usar pingendo para crear la plantilla index es algo mas rápido no crees?
Juma Fajardo
Juma Fajardo 2 роки тому
de donde saca esa carpeta images???
VERA PLAYER
VERA PLAYER 2 роки тому
tu creas la carpeta
Jonathan Tellez Giron Muñoz
Jonathan Tellez Giron Muñoz 2 роки тому
Excelente tutorial amigo, solo que si deberías dejar en claro la forma en como clonaste el código del card un par de veces más, es muy confuso. Sin embargo note en la parte derecha ha del Sublime como antes de "Actualizar" tienes solo el código de un card y al regresar después de la vista del navegador ya tienes 3. Y es que, cualquiera que haya utilizado Bootstrap debe saber que es la única forma de hacerlo, al menos antes de que WordPress genere las cards automáticamente. SALUDOS
SERGIO LEGUIZAMON
SERGIO LEGUIZAMON 10 місяців тому
Gracias por la explicación, por poco y no me entero jajaja
Alan Fermin
Alan Fermin 2 роки тому
Felicidades por el video..! Dónde se descarga el solid.svg?
Aitorvaan1
Aitorvaan1 2 роки тому
Muy bueno el vídeo. Una pregunta. En la parte final, cuando haces el ctrl+shift+g es solo para crear el div no? es que estoy usando otro editor (netbeans) y he metido toda la "card" en un div como en el vídeo pero a mano y solamente me aparece una vez la tarjeta. Gracias
Aitorvaan1
Aitorvaan1 2 роки тому
Al final lo he conseguido usando en el div general una clase "card-group" y asignando las clases "col-12 col-sm-6 col-md-4 mb-3" a cada tarjeta : Card title Some quick example text to build on the card title and make up the bulk of the card's content. Go somewhere Fecha / Categorías / Autor Card title Some quick example text to build on the card title and make up the bulk of the card's content. Go somewhere Fecha / Categorías / Autor Card title Some quick example text to build on the card title and make up the bulk of the card's content. Go somewhere Fecha / Categorías / Autor
Rawed Abou
Rawed Abou 2 роки тому
por que me perdiiiiiiiiiiiiiiiiiiiiiii :(
Sijolo Ediciones
Sijolo Ediciones 2 роки тому
eeeh... maestro,,, un poco más al paso,,, frécome!!
ivision
ivision 2 роки тому
Buena chileno! ;-)
Bluuweb !
Bluuweb ! 2 роки тому
+ivision jajajaja saludos !
Luis E Aponte
Luis E Aponte 2 роки тому
Ayuda: El background: url(images/bg.png); no se me ve
Jose Gallego
Jose Gallego 2 роки тому
background: url("../images/bg.png");
Luis Angel GR
Luis Angel GR 2 роки тому
El mejor video y curso que he visto
DarkSantiandre
DarkSantiandre 2 роки тому
Jajaja amigo, explícanos como salieron 3 cards como por arte de magia, aun no logro entenderlo. Muy buen contenido, sigue así!
Diego Hiroshi y sus Videos
Eso es por que te lo hace todo automático, para eso sirve el Framework, lo que tu te gastas en escribir, concatenar y llenar de archivos... MATERIALIZE te lo simplifica en pocas líneas de código. Si no me equivoco, esta programado en base a Material Design de Google.
Juegos Dinamitas
Juegos Dinamitas Рік тому
??
Borja Jonatán
Borja Jonatán Рік тому
Card title Some quick example text to build on the card title and make up the bulk of the card's content. Fecha / Categorias / Autor x3
Andrés Artsurdo
Andrés Artsurdo Рік тому
Copia y pega el código del primer card. No hay ninguna magia, simplemente no sale en el video. Fíjense en el minimapa de la derecha donde está todo el código: se ven tres artículos cuando está escribiendo el footer.
P-Ghex
P-Ghex Рік тому
me pasa lo mismo quisiera saber como por arte de magia saco 3 cards cuando copio uno solo XD no he podido avanzar y no logro poner una entrada al lado de otra :C
Softecnico RD
Softecnico RD 2 роки тому
Muy buen tutorial pero esta des actualizado y no sale tal como explica. Espero que tenga un tutorial mas actualizado, gracias.
Sofy Torres
Sofy Torres 2 роки тому
Hola, excelente tutorial. Una sola cosa, la imagen de background en la sección suscribir no me aparece, están correctas las rutas y también referencié al .css en el header con link, lo raro es que en el archivo style.css background-size: "cover" no cambia de color. Estoy usando Kate en Debian, y al resto de los parámetros me los coloreó de azul, menos a ese y sospecho que tiene que ver con la causa del problema. Si se te ocurre por qué puede ser te agradecería. Saludos
Victor Sanchez
Victor Sanchez Рік тому
Sofy Torres hola sofy...cómo resolviste ese problema? Yo estoy en la misma...
Joseph Marquez
Joseph Marquez 2 роки тому
Hola, la web Estática esta disponible para descargr?
Diego Andres Benitez Mendoza
Diego Andres Benitez Mendoza 2 роки тому
hola que tal tengo una problema, no me sale la parte en que seleccionas y decis control shift mas g , podrias explicarme mejor por favor
Diego Andres Benitez Mendoza
Diego Andres Benitez Mendoza 2 роки тому
y me podrias pasar el codigo html para hacer los tres en linea por favor
Bluuweb !
Bluuweb ! 2 роки тому
+Diego Andres Benitez Mendoza hola ! Tienes que tener instalado el plugin de emmet en sublime text ... en mi canal tengo un vídeo explicando esto ... saludos !!
jose A boyer
jose A boyer 2 роки тому
hermano estoy viendo tu curso pero en esta etapa no se de donde sacar la imagen he echo de todo y nada que consigo una imagen como esa que tienes por favor ayuda y muchas gracias por esos videos tan bueno
Fernando González
Fernando González 2 роки тому
Como hiciste para que de un contenido pase a tres?, dices Ctrl+Shift+G pero no hace lo mismo el Sublime que en el tuyo... aún no puedo crear los tres contenidos :( solo quedo en uno.
Sacha Barragan
Sacha Barragan 2 роки тому
Lo pudiste resolver? yo estoy en la misma
enzo gamer
enzo gamer 2 роки тому
tus cursos son geniales... trasmitis mucha tranquilidad y paciencia a la hora de explicar. Lo que nunca entendí es donde hay que poner para ver esa parte del diseño adaptable, es decir, responsivo porque te salen las medidas etc. En cualquier navegador lo puedo ver esas medidas?
Bluuweb !
Bluuweb ! 2 роки тому
+Flavia Paz gracias por tus comentarios, puedes ocupar firefox developer y ctrl + shift + m, ahí debería aparecer :)
FRANK FRR
FRANK FRR 2 роки тому
muy bien como explicas exelente aportacion, es solo que cuando triplicaste las entradas no me salio me podrias ayudar porfavor algun consejo o algo?
Ezequiel Cabrera
Ezequiel Cabrera 2 роки тому
la imagen de ejemplo bg.png, la puedes subir para descargarla, ya que tiene una dimención, o simplemente cuales son las dimenciones para generar una. Muchas gracias (Y)
José Andrés Martínez Rojas
José Andrés Martínez Rojas Місяць тому
@Ezequiel Cabrera me ocurrio lo mismo
180 S3GUNDOS
180 S3GUNDOS 2 роки тому
me paso lo mismo
Ezequiel Cabrera
Ezequiel Cabrera 2 роки тому
gracias, otra consulta, estoy sieguiendo el curso y llegue a la parte donde triplicaste las , hice lo mismo que tu pero no se me triplicó, por que podría ser?? :/ te la duda
Bluuweb !
Bluuweb ! 2 роки тому
Hola, te recomiendo imagenes de bg con una medida mínima de 1300px de ancho ya que es aprox el tamaño de monitores de nootebook... cualquier cosa me avisas no más... :) De igual forma voy a realizar un curso con optimización de imagenes para sitios web. Buen día!
João Gabriel Santos de Aquino
João Gabriel Santos de Aquino 3 роки тому
Te saludo desde Málaga España. Muchas gracias por el curso, tu explicas muy bien y es muy objetivo. +1 suscrito.
Bluuweb !
Bluuweb ! 3 роки тому
Eso +1 Vamos de poquito en poquito :) Saludos y gracias por tus comentarios!
Legend
Legend 3 роки тому
Excelente! una pregunta, haremos custom type post para un portafolio? gracias!!
Bluuweb !
Bluuweb ! 3 роки тому
Hola!, en esta primera parte nos centraremos en una plantilla básica... luego iremos agregando más elementos de Wordpress :) Saludos!
Francisco Guzman
Francisco Guzman 3 роки тому
te saludo desde ARGENTINA!! tengo que felicitarte,gracias a vos que explicas muy bien y simple me animó a encarar un proyecto muy bueno en diseño web!! te sigo en tu canal a la espera de los demas capitulos!! G-E-N-I-O-!!!!!!!
Bluuweb !
Bluuweb ! 3 роки тому
jajaja Gracias Francisco pero de Genio tengo bien poco jajajaja, Saludos y me hiciste reir... GRACIAS!
Jose Mª R. T.
Jose Mª R. T. 3 роки тому
Que ganas de la segunda parte!!!
Bluuweb !
Bluuweb ! 3 роки тому
Gracias Jose por tus comentarios! Saludos! :)
Jorge Rivera
Jorge Rivera 3 роки тому
esperaré la segunda parte :) Gracias por compartir tu conocimiento en tu canal.
Наступне
CURSO COMPLETO DE BOOTSTRAP 4
4:40:33
Переглядів 279 000
VISUAL STUDIO CODE 💪Tutorial en Español 💪
07:35
YARMAK - НА ЭКЗАМЕН
5:04
Переглядів 441 324