Arquitectura inicial

4/31
Recursos

Aportes 82

Preguntas 10

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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>

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

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

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/

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>

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

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 鈥楲ive 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.

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

header+(main>section*4)+footer
<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.

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

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>

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.

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?

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 鈥減ages鈥 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

  • 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.

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.

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>

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

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鈥racias

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!

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.

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

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.

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

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

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.

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.

<!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>```
// 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 馃槃

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.

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

@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.

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>```

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>

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>

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

htm:5
y presionar Tab

Adem谩s de guardar nuestro trabajo continuamente, recomiendo usar 鈥淐ontrol 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! 馃槃

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

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馃榾

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

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. 馃檶馃槑

El famoso Emmet, nos simplifica codear.

  header^main>section*4^footer

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

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

ya tenemos la arquitectura inicial de la web

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.

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

<!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>

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

=P

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

un shortcut section*4

      header+main>section*4^footer

En Visual Studio Code chequear 鈥淎utoguardado鈥 en el menu 鈥淎rchivo鈥 para no estar tecleando Ctrl + s

Ahora si biene lo chido!!!

GRACIAS

En VSCode pueden activar el 鈥渁utoguardado鈥 en la seccion archivo de la bara de herramientas, pero recuerden, un gran poder conlleva una gran responsabilidad.

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

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...???

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.

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

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

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

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

Para reproducir el simulador:

馃槂

Muchas Gracias Profe!

vamos con todo en este curso

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

no se porque, este docente me aburre

header+main>section*4

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

驴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.

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

section{}*4

Posteriormente presiona 鈥淓NTER鈥 y listo.

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

Si quieren que visual les ayude pueden hacer esto:

Compa帽eros, 驴Qu茅 herramienta puedo usar para crear videos como los de Platzi? Me refiero a poder colocar la c谩mara de un lado, la presentaci贸n del otro lado, crear un dise帽o personalizado etc.

隆As铆 de f谩cil la arquitectura inicial! Esto es totalmente emocionante.

qu茅 emoci贸n comenzar con 茅ste curso 馃槂馃槂馃槂馃槂馃ぉ

Con Emment se puede simplificar la construcci贸n con la sintaxis:

header+main>section*4^footer

Ac谩 les dejo un p贸ster con las principales etiquetas HTML:

#PlatziDay