Arquitectura inicial

La arquitectura web se puede definir como la forma en que las páginas de un sitio web están estructuradas y enlazadas entre sí (de manera lógica y coherente). Una arquitectura web ideal ayuda a los usuarios y a los motores de búsqueda a encontrar fácilmente lo que están buscando en un sitio web.

Arquitectura del proyecto:

Header
4 secciones
Footer

<body>
    <header></header>
    <main>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
    </main>
    <footer></footer>
</body>

Eleazar Carreón Álvarez

Si quieres crear vairas veces un elemento, como cuando copea varias veces <section> usa:
section*4

Primero el nombre del elemento que quieres seguido del asterisco y como final la cantidad que quieres

Sí has usado el autocompletado, se le llama emmet y viene por defecto en Visual Studio Code.
Emmet - Visual Studio Code

MGuedez

hola, acá les dejo los atajos para emmet vsc.

FireShot Capture 003 - Ahorra tiempo al escribir código HTML en Visual Studio Code utilizand_ - coderslink.com.png

Gabriel Salazar Cortez

cada que se hace cambios significativos en nuestro proyecto es muy bueno tener un control de versiones como Git, el curso Profesional de Git y GitHub en muy bueno, les dejo el enlace https://platzi.com/clases/git-github/

Joel Dominguez Merino

Tenemos Arquitectura Inicial
Estoy muy emocionado por tomar este curso con el increíble Profe Diego 😄

Les dejo mi Código por si les sirve!

<!DOCTYPE HTML>
<html lang="es">
    <head>
        <title>iJCode - Betata Bit</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./styles/style.css">
    </head>
    <body>
        <header>
        </header>
        <main>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
        </main>
        <footer>
        </footer>
    </body>
</html>

Jhon Alexander Mondragon Trinidad

Este curso es sumamente importante, recomiendo realizar todo utilizando repositorios git y github, permite desarrollar las 2 habilidades al mismo tiempo.

Michael Steven Viloria García

Les recomiendo activar el Auto Save en el editor de codigo VSCode para que no se preocupen de estar guardando ya que por cada cambio realizado el automaticamente lo guarda y si instalan la extension ‘Live server’ se actualizara la vista previa de lo que hacemos de manera automatica cada vez que guardemos asi que todo este proceso será automatico si activamos el Auto Save.

Captura de pantalla 2021-01-25 114452.png

Carlos David Ramírez Gómez

Ya acá todos conocen emmet, sin embargo les dejo el atajo de la estructura inicial

header+(main>section*4)+footer

Valeria Vichy

<h3>Tip de atajos de teclado: para no tener que copiar y pegar los section uno por uno podemos hacer lo siguiente:</h3>

<section></section> <!-- posicionamos el cursor en la linea de código que queremos repetir -->

Con el cursor posicionado en esa linea de código pulsamos las techas ALT + SHIFT + flecha hacia abajo
…
Nota: se puede hacer lo mismo con varios elementos, solo tenemos que seleccionar las lineas de codigo que deseamos repetir y pulsar la combinación de teclas que les acabo de mostrar.
…
Espero que les sea de ayuda.

Santiago Quintero Guarin

Hola!
Existe una extensión en vsco que nos guarda automáticamente cuando cambiamos de ventana https://marketplace.visualstudio.com/items?itemName=mcright.auto-save, también el mismo vsco en sus configuraciones tiene una opción. Las dos formas funcionan

Efraín Hernández García

En un principio me costó trabajo entender la arquitectura inicial de este proyecto, pero ya voy viendo mejor como es que se hace!

<header></header>
<main>
	<section></section>
	<section></section>
	<section></section>
	<section></section>
</main>
<footer></footer>

Mauricio Ulises Martinez Velez

Para evitar copiar y pegar varias veces el comando de section, se puede escribir:

         section*4  <!-- luego enter o tab y se crea automáticamente la cantidad de secciones que le pediste -->
    <section></section>
    <section></section>
    <section></section>
    <section></section>

Así podemos ahorrar tiempo.

Josue Fredes

hace 8 meses

les dejo link del diseño en figma por si lo necesitan
https://www.figma.com/proto/sMmlQaZldfDcLERYYWe6h4/Bata-Bit?node-id=44%3A594&scaling=scale-down

dgpar

hace 6 meses

Si en el Visual Studio Code ingresan:
header+(main>section*4)+footer
y luego presionan Tab
aparecerá

 <header></header>
 <main>
     <section></section>
     <section></section>
     <section></section>
     <section></section>
</main>
<footer></footer>

Maravilloso ¿No les parece?

jesus manuel marquez martini

hace 7 meses

si llegas a tener problemas para conseguir en figma las imagenes del proyecto en mobile solo ve a barra izquierda en la parte superior donde dice “pages” solo tienes que deslizar hasta abajo y consigues el mobile, a mi me paso que no conseguia los mismos diceños que el profe por lo mismo normalmente aparece en cover page y tienes que buscar estar en mobile prototype

John Cardenas

main>section*4 -> De esta forma pueden crear el main y dentro de el las 4 etiquetas section.
Si quieren ponerle clase a las secciones: main>section.clase*4
.
Y como estos existen muchos otros emmets. Dejo un tutorial de VS Code sobre ello.

Jose Ortega

También puedes generar los fragmentos de código que quieras seleccionándolos y presionando SHIFT + ALT + flecha arriba o abajo para indicar la dirección en la que quieres que se copie.

Francisco Ezequiel Ferreyra

El código base para arrancar el index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Batatabit</title>
</head>
<body>
    <header>

    </header>
    <main>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
    </main>
    <footer>
        
    </footer>
</body>
</html>

Fabian Flores

Esas capturas de pantalla se hacen con CodeSnap es una extensión de Visual Studio Code

Felipe Molano Corredor

me encanta poder aprender y aplicar de una vez en un proyecto que se puede asumir que es real, tambien me gusta mucho que todo se hace muy despacio…gracias

LucasFer

Hola chicos algo que me sirve bastante es utilizar un multiplicador cuando creamos varias etiquetas idénticas, En vez de copiar ej. 4 etiquetas section y copiar y pegar… uso section*4 y me nos crearía 4 etiquetas (en este caso section ) idénticas. ojala les sirva, abrazo!

Yair Lira

Recomendación:
Aprobar el curso profesional de Git y GitHub.
Podrán realizar este sitio para su portafolio y luego reutilizar la base del sitio para crear nuevos sitios con características similares.

Eduardo Rafael Romero Bernal

presionando las tres teclas: shift + alt + flecha abajo puedes duplicar una línea de código.

César Andrés Turca Molina

hace 8 meses

Apenas que se está iniciando éste curso, opino que es buena práctica ir haciendo todo esto desde Git, y subirlo a GitHub u otra plataforma de control de versiones para asemejar más un entorno de desarrollo real.

JOSE PINTO VEGA

hace 6 meses

Lo mejor es iniciar de una con un repositorio en Github y sentir que vas aplicando lo aprendido a lo largo de los cursor

Yosstin Steven Castillo Ramirez

hace 5 meses

Estructura inicial con emmet:

html:5>header+main>section*4^footer

el que guste puede ver la documentación de emmet es muy útil para crear estructuras html mas rápido

Guillermo Castaño Vèlez

Con respecto al guardado, Visual Studio Code tiene una opción de auto guardar, pero veo que en muchos cursos de Platzi, o en ninguno si mi memoria no me falla lo usan, siempre están guardando. Esto me hace pensar si es que no es una buena práctica el autosave.

Iván R. Artiles Bretón

Arquitectura inicial
Una vez que ya hemos analizado nuestro diseño y lo tenemos dividido en secciones vamos a maquetar estas secciones en un archivo HTML. Como el estándar actual es HTML5, nuestra estructura se verá de la siguiente forma:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <header></header> <main> <section></section> <section></section> <section></section> <section></section> </main> <footer></footer> </body> </html>
Como nuestro proyecto cuenta con un header, cuatro secciones y un footer, hemos añadido estas etiquetas a un archivo llamado index.html, que es el nombre que por defecto lleva el archivo principal de un proyecto web (es una buena práctica mantener este nombre). Como las cuatro secciones de nuestro proyecto son el contenido principal las hemos puesto dentro de las etiquetas semánticas main.

Iván Arcos

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:[email protected];500;700&family=Inter:[email protected];500&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <header></header>
    <main>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
    </main>
    <footer></footer>
</body>
</html>```

Obed Paz

// en la carpeta del proyecto
git init

// luego de hacer la estructura inicial
git status
git add .
git commit -m "he agregado la arquitectura inicial del proyecto"

me gustan este tipo de cursos porque al ser principiante me ayudan a practicar otras tecnologias como Git 😄

FredyColorado

Para que no tengas que preocuparte por guardar (ctrl + s) en la barra de herramientas en VS Code, abre archivo y le das clic en autoguardado, así cada vez que cambies de interfaz o desplaces un menú tu proyecto se guardará automáticamente.

Nicolás Felipe Fernandez Fandiño

Pueden utilizar la herramienta de auto save del editor de código para VS code:
File -> Auto Save = Check
y si lo combinas con el auto recarga del navegador o la estencion Live Server queda genial

Oscar Eduardo Info Giraldo

@teamPlatzi acá viendo el archivo de Figma, se me ocurre una idea que estaría muy cool. Figma permite ver que usuarios están viendo el archivo; estaría super bacano ver que otras personas están viendo el curso al mismo tiempo que uno para así poder compartir información y experiencias en tiempo real.

Leandro Santiago Batista

Basado en el diseño identificamos las diferentes areas y definimos etiquetas HTML para todas.

La arquitectura de la web esta dividida de la siguiente manera:


    <header>

    </header>
    
    <main>
        <!--Seccion no.1-->
        <section>

        </section>
        <!--Seccion no.2-->
        <section>

        </section>
        <!--Seccion no.3-->
        <section>

        </section>
        <!--Seccion no.4-->
        <section>

        </section>

    </main> 
    
    <footer>

    </footer>
</body>
</html>```

Aldo Miguel Ortiz Parodi

1. Arquitectura Inicial

Por el momento esta es nuestra arquitectura inicial:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header class="header"></header>
    <main class="main">
        <section></section>
        <section></section>
        <section></section>
        <section></section>
    </main>
    <footer class="footer"></footer>
</body>
</html>

Cesar Roman Santillan

Les comparto un par de etiquetas adicionales que a mi me han ayudado a darle mejor estructura a los proyectos.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Font -->
    <link href="" rel="stylesheet">
    <!-- Styles -->
    <link rel="stylesheet" href="./css/style.css">
    <!-- Title -->
    <title>Batata Bit</title>
</head>
<body>
    <!-- Begin Header -->
    <header>

    </header>
    <!-- End Header -->
    <!-- Begin Main Content -->
    <main>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
    </main>
    <!-- End Main Content -->
    <!-- Begin Footer -->
    <footer>

    </footer>
    <!-- End Footer -->
</body>
</html>

Gerardo Martinez

Para las personas que no sepan generar de manera automática la base de html basta con poner

htm:5
y presionar Tab

Eduardo Peña Ramos

hace 2 días

Además de guardar nuestro trabajo continuamente, recomiendo usar “Control de Versiones” para tener un respaldo en la nube de nuestro trabajo y poder regresar, revisar, colaborar y respaldar nuestro trabajo.
Para eso hay que ir a la sección "Source Control" de VSCode y después de añadir nuestra carpeta y archivos, tenemos la opción de Inicializar un Repositorio nuevo (botón azul):

Obviamente debemos tener enlazada nuestra cuenta en Github en VSCode. Es fácil.

¡Saludos! 😄

Florian Martinez

hace 4 días

Muy buena presentación del proyecto! A practicar y nunca pares de aprender!

Simon Giraldo Colina

hace 6 días

hola si no quieren estar guardando tanto los archivos solo denle donde pone archivo o file y le dan a auto save o auto guardado y cada cambio que hagan va a ser guardado😀

Bulmaro Arellano Navarrete

hace 7 días

Para quienes gusten del uso de abreviaciones. con Emmet y para quienes no lo conozcan y se interesen, con el siguiente fragmento pueden generar todo el html contenido dentro del body:

(header>main>section*4)+footer

Emmet ya viene instalado dentro de VS Code, así que no deberían tener problemas con ello pero si al pegar el fragmento que les he compartido no les aparece la sugerencia de autocompletado debajo del puntero entonces borren la r del footer, reescribanla y entonces deberá aparecer. En caso de que no fuera así prueben instalando manualmente la extensión de Emmet.

Mas info sobre Emmet -> https://docs.emmet.io/abbreviations/syntax/

Saludos

Victor Ocampo

hace un mes

Estoy realizando este curso aplicando lo previamente aprendido en el curso de Git y Github. Se me quedo muy grabado lo que comenta Freddy acerca de que aprender Git y Github es imprescindible. Ademas me sirve como práctica y como mi primer proyecto en Github. 🙌😎

Arturo Castañeda

El famoso Emmet, nos simplifica codear.

  header^main>section*4^footer

Rafael Martínez Rodríguez

Wuou! Súper interesante y emocionado por desarrollar este curso junto al proyecto y seguir aprendiendo.

Luis Carlos Zapata García

vamos a poner en practica todo lo visto en el curso definitivo de htlm y css.

maximo galarza

ya tenemos la arquitectura inicial de la web

Yerson Felipe Ramirez Garnica

hace 3 meses

Andres Velasquez

hace 3 meses

En esta clase se analizó el diseño de la página que vamos a desarrollar. El cúal está dividido en header, main, y footer. Dónde el main contiene 4 sesiones que administran los contenidos que requerimos.

Algo nuevo para mi es crear la carpeta donde quieras y arrastrarla al programa VSCode, esto agiliza la creación de proyectos desde mi punto de vista. En mi caso estoy acostumbrado a crearlo desde linux con consola y esto fue interesante aprenderlo.

Cristian Omar Beltrán

Les dejo este tip para ser un poco más productivos al programar: tip para ser más productivo

Victor Hugo Cruz Carballo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile first</title>
</head>
<body>
    <header>

    </header>
    <main>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
    </main>
    <footer>

    </footer>
</body>
</html>

Kevinn Pérez Quesada

Tip para guardar

Hay una opción en Visual Studio Code que te permite autoguardar los cambios de manera automática. Esa opción está en el menú superior en la pestaña Edit

Michael Martinez

<body>
    <header></header>
    <main>
        <section></section>
        <section></section>
        <section></section>
        <section>Slide Aqui !!!</section>
    </main>
    <footer></footer>
</body>

Moises Israel Hernandez Nava

hace 7 meses

un shortcut section*4

Joel Bello

hace 7 meses

      header+main>section*4^footer

Ivan Flores

hace 8 meses

En Visual Studio Code chequear “Autoguardado” en el menu “Archivo” para no estar tecleando Ctrl + s

Kevin Alexander Chari Castillo

hace 10 meses

Ahora si biene lo chido!!!

Juan ELías Mucarcel Salvatierra

hace 10 meses

GRACIAS

Juan Felipe Barahona Gonzalez

En VSCode pueden activar el “autoguardado” en la seccion archivo de la bara de herramientas, pero recuerden, un gran poder conlleva una gran responsabilidad.

Jesus Federico David Herrera

Un shortcut para no copiar section en VS, es utilizar
section*4

gerardo.ramirez

creo que no es buena idea agregar los height a los textos y contenidos... por ejemplo en los textos del header y la posición absoluta del botón... que pasaría si el título crece más... o si la etiqueta p llega a tener más contenido... no sería mejor idea que todo se adapte la altura de los contenedores deacuerdo a las longitudes de los textos...???

Ignacio Consuegra

Recuerden instalar la extension de live server en sus VisualCode.
Si quiren saber mas vayan al curso de preworks, que es la primera clase de la carrera de javacript.

Lucy06Campos

Para obtener:
<section></section>
<section></section>
<section></section>
<section></section>
Podemos utilizar section*4

Juan Cruz

Si ya tiene un tiempo en desarrollo les recomiendo la herramienta emmet en vsc para poder agilizar los tiempos (ej = section * 4 )

R0Y3R

Comando de emmet header+(main>section*3)+footer

<header></header>
    <main>
        <section></section>
        <section></section>
        <section></section>
    </main>
    <footer></footer>

Jose Luis Idarraga

Para reproducir el simulador:

Jeisson Santiago Cortes Ortiz

😃

Joel Dominguez Merino

Muchas Gracias Profe!

JochuaOrtiz

vamos con todo en este curso

Andrés David Loaiza Zamudio

Para crear el main con sus respectivos section esta sería la forma abreviada:
main>section*4

Jose Luis Gutierrez Carcausto

no se porque, este docente me aburre

SebasPosada

header+main>section*4

Santiago Ramirez

Quien más usa Prettier en su VS !!! Like si lo usas

Team Platzi UNHEVAL

¿Por qué la metodologia de desarrollo Mobile-first tiene una gran aceptación?
-Para los desarrolladores es más fácil de ir de menos a más. A medida que crece el tamaño de pantalla puedes elegir que detalles agregar, como agrupar los elementos. De forma viceversa, es dificl ya que estarás indeciso que sacar… y esto es peor cuando crees que tdo es necesario … y eliminar algo… ufff! Mientras tanto, tu tiempo se disipa.
-Para los usuario. Menos es más PORQUE sienten que conocen tdo y dominan la navegación de tu página web.
-Negocios. mejor SEO por el algoritmo de google entonces mayor usuarios.

adassive

**Si quieres crear las 4 secciones de golpe, escribe: **

section{}*4

Posteriormente presiona “ENTER” y listo.

Carlos Dugarte

un truco en VSC para sacar 4 section con un shortcut es: section*4

Ignacio Consuegra

Si quieren que visual les ayude pueden hacer esto:

Joe Suárez