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

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

  • 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…gracias

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

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 “Autoguardado” en el menu “Archivo” para no estar tecleando Ctrl + s

Ahora si biene lo chido!!!

GRACIAS

En VSCode pueden activar el “autoguardado” 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 “ENTER” 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