Paguina Web

DIRECCIÓN GENERAL DE EDUCACIÓN TECNOLÓGICA AGROPECUARIA Y CIENCIAS DEL MAR
CENTRO DE BACHILLERATO TECNOLÓGICO AGROPECUARIO NO. 35

“LEONA VICARIO”
PROYECTO TIENDA
PROGRAMACIÓN - MÓDULO III S3-DESARROLLA APLICACIONES QUE SE EJECUTAN EN EL SERVIDOR
PROF. JULIO CÉSAR MARTÍNEZ
jcmartinez@cbta35.edu.mx
CENTRO DE BACHILLERATO TECNOLÓGICO AGROPECUARIO
DIRECCIÓN GENERAL DE EDUCACIÓN TECNOLÓGICA NO. 35 “LEONA VICARIO”
AGROPECUARIA Y CIENCIAS DEL MAR
TABLA DE CONTENIDO
1. Creando la estructura del proyecto. 2
2. Creando página de inicio. 2
3. Creando estilos CSS. 7
4. Colocando clases CSS en la página de inicio. 13
5. Página de inicio terminada. 15
6. Creando página de nosotros. 18
7. Creando estilos para la página de nosotros. 20
9. Página de nosotros terminada. 24
1
Aprendizajes o competencias
Estrategias de aprendizaje Producto a evaluar
profesionales esenciales
Instrucciones: Lee los contenidos de cada

Diseña una aplicación que se ejecute en el
apartado y desarrolla las actividades de Aplicación web.
servidor.
aprendizaje indicadas.
1. Creando la estructura del proyecto.

Dirígete a la carpeta HTDOCS en los directorios de XAMPP, WAMP o cualquier entorno de desarrollo que hayas instalado en tu equipo de
cómputo. Dentro de la carpeta HTDOCS, crea la siguiente carpeta: tienda, dentro de esta carpeta crea los directorios img, js y css.
Fig. 1. Estructura de trabajo para el proyecto.
Una vez creada la estructura de tu proyecto, arrastra la carpeta al editor de código que vas a utilizar.
2. Creando página de inicio.

En el editor de código, crea un archivo llamado index.html, debes tener las siguientes líneas de código.
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tienda</title>
</head>
<body>
</body>
</html>
Creando el header
Dentro de las etiquetas <body> . . .</body>, vamos a crear las siguientes líneas de código.


<header>
<a href="index.html">
<img src="img/logo.png" alt="Logotipo de Tienda">
</a>
</header>


<nav>
<a href="index.html">Tienda</a>
<a href="nosotros.html">Nosotros</a>
3
<a href="nosotros.html">Contacto</a>
</nav>

Creando sección de contenido principal

Debajo de la sección anterior, coloca las siguientes líneas de código. A partir de ahora vamos a trabajar dentro de las etiquetas <main> .
. .</main>


<main>
</main>

Creando título y div para los productos

Dentro de las etiquetas <main> </main>, coloca las siguientes líneas de código.
<h1>Nuestros productos</h1>
<div>
</div>
Creando productos
Dentro de las etiquetas <div> </div>, coloca las siguientes líneas de código, tantas veces como sea necesario, tomando en cuenta el
número de productos que vas a colocar.
<div>
<a href="#">
<img src="img/1.jpg" alt="Camiseta Vue">
<div>
4
<p>VueJs</p>
<p>$25.00</p>
</div>
</a>
</div>
Para colocar un nuevo producto, selecciona todo el fragmento de código, copialo y pegalo debajo del anterior.
Creando sección pie de página

Fuera de las etiquetas <main> </main> coloca las siguientes líneas de código.
<footer>
<p>Front Store - Todos los derechos reservados - 2021</p>
</footer>
Enlazando archivo de estilos

Dentro de la carpeta css, crea un archivo llamado estilos.css. Abre el archivo index.html, dirigete al sección header, debajo de la última
etiqueta <meta>, coloca las siguientes líneas de código


<link rel="stylesheet" href="css/estilos.css">
Seleccionando fuente desde Google Fonts

La fuente que vamos a utilizar se llama"Staatliches", abre una ventana del navegador, ve al sitio Google Fonts, en la caja de búsqueda,
ingresa el nombre de la fuente que vamos a utilizar. Haz clic en el recuadro que aparece en la parte de abajo.
5
Fig. 2-3. Buscando fuente tipográfica en el sitio de Google Fonts.
Selecciona la fuente en la opción "Select this style". En la parte superior derecha de la pantalla, haz clic en la opción "View your selected
families". Copia todo el código que aparece en la ventana.
Fig. 4-5. Selección de fuente tipográfica en el sitio de Google Fonts.
6
Enlazando fuente de Google Fonts

Abre el archivo index.html, pega las líneas de código del paso anterior debajo del archivo de estilos. Debes tener las siguientes líneas de
código.


<link rel="stylesheet" href="css/estilos.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<linkhref="https://fonts.googleapis.com/css2?family=Staatliches&display=swap"rel="stylesheet">
3. Creando estilos CSS.

En el editor de código, abre el archivo estilos.css, ingresa las siguientes líneas de código.
/* Variables de color y fuentes */

:root {
--primario: #9C27B0;
--primarioOscuro:#811a93;
--secundario: #FFCE00;
--blanco: #ffffff;
--negro: #000;
--fuentePrincipal: 'Staatliches', cursive;
}
/* Hacks para ajustar contenido */

html {
font-size: 62.5%;
box-sizing: border-box;
}
7
*,*:before, *:after {
box-sizing: inherit;
}
/* Estilos globales para todo el sitio */

body {
background-color: var(--primario);
font-size: 1.6rem;
line-height: 1.5;
}
p {
font-size: 1.8rem;
font-family: Arial, Helvetica, sans-serif;
color: var(--blanco);
}
a {
text-decoration: none;
}
img {
width: 100%;
}
h1, h2, h3 {
text-align: center;
color: var(--secundario);
font-family: var(--fuentePrincipal);
}
8
h1 {
font-size: 4rem;
}
h2 {
font-size: 3.2rem;
}
h3 {
font-size: 2.4rem;
}
/* Header */
.header {
display: flex;
justify-content: center;
}
.header__logo {
margin: 3rem 0;
}
/* Navegación */
.navegacion {
background-color: var(--primarioOscuro);
padding: 1rem 0;
display: flex;
justify-content: center;
}
9
.navegacion__enlace {
color: var(--blanco);
font-size: 3rem;
margin-right: 2rem;
}
.navegacion__enlace:last-of-type {
margin-right: 0;
}
.navegacion__enlace--activo,
.navegacion__enlace:hover{
}
/* Contenedor */
.contenedor {
max-width: 120rem;
margin: 0 auto;
}
.contenedor {
max-width: 120rem;
margin: 0 auto;
}
/* Grid o reticula */
.grid {
10
/* Valor para visualizar en Smartphones */

display: grid;
grid-template-columns: repeat(1, 1fr);
column-gap: 2rem;
row-gap: 2rem;
}
/* Valor para visualizar en Tablets */

@media (min-width: 768px) and (max-width:1023px) {
.grid {
}
}
/* Valor para visualizar en PC y Superior */

@media (min-width:1024px) {
.grid {
}
}
/* Productos */
.producto {
padding: 1.2rem;
}
.producto__nombre {
font-size: 4rem;
}
11
.producto__precio {
font-size: 2.8rem;
}
.producto__nombre,
.producto__precio {
margin: 1rem 0;
text-align: center;
line-height: 1.2;
}
/* Footer */
.footer {
padding: 1rem 0;
margin-top: 2rem;
}
.footer__texto {
text-align: center;
font-size: 2.2rem;
}
12
4. Colocando clases CSS en la página de inicio.

En esta parte del proyecto vamos a colocar las clases que se han creado en el archivo estilos.css dentro de las etiquetas o secciones que
le corresponden, para que el diseño se ajuste a lo que pretendemos lograr.
Colocando clases en la sección Header

Abre el archivo index.html, dirígete a la sección Header. Dentro de la etiqueta header, debes tener las siguientes líneas de código.


<header class="header">
<a href="index.html">
<img src="img/logo.png" alt="Logotipo de Tienda" class="header__logo">
</a>
</header>

Colocando clases en la sección Navegación

Dentro de la etiqueta nav, debes tener las siguientes líneas de código.


<nav class="navegacion">
<a class="navegacion__enlace navegacion_enlace_activo" href="index.html">Tienda</a>
<a class="navegacion__enlace" href="nosotros.html">Nosotros</a>
<a class="navegacion__enlace" href="nosotros.html">Contacto</a>
</nav>

Colocando clase contenedor

Dentro de la etiqueta main, debes tener las siguientes líneas de código.
13

<main class="contenedor">
<h1>Nuestros productos</h1>
Colocando clase grid

Debajo de la línea anterior, dentro de la etiqueta div, debes tener las siguientes líneas de código.
<div class="grid">
Colocando clases en productos (playeras)
Dentro del bloque de código para cada producto, debes tener las siguientes líneas de código. Coloca las clases para cada producto,
recuerda que son 14 bloques de código.
<div class="producto">
<a href="#">
<img src="img/1.jpg" alt="Camiseta Vue">
<div>
<p class="producto__nombre">VueJs</p>
<p class="producto__precio">$25.00</p>
</div>
</a>
</div>
Colocando clases footer

Identifica la etiqueta footer , debes tener las siguientes líneas de código.


<footer class="footer">
<p class="footer__texto">Front Store - Todos los derechos reservados 2022 -Julio César Martínez</p>
</footer>

Debajo de la etiqueta <h1>, coloca las siguientes líneas de código.
<div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur
adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur
adipisicing elit.</p>
</div>
<img src="img/nosotros.jpg" alt="Nosotros">
</div>
18
Creando la sección por qué comprar

Fuera de la sección <main>, coloca las siguientes líneas de código.
Todo el bloque debe estar dentro de las etiquetas <section>. . .</section>.


<section>
<h2>¿Por qué comprar con nosotros?</h2>
<div>
<div>
<img src="img/icono_1.png" alt="¿Por qué comprar?">
<h3>EL mejor precio</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div>
<img src="img/icono_2.png" alt="¿Para Devs">
<h3>Para Devs</h3>
</div>
<div>
<img src="img/icono_3.png" alt="Envío gratis?">
<h3>Envío gratis</h3>
</div>
<div>
<img src="img/icono_4.png" alt="La mejor calidad">
<h3>La mejor calidad</h3>
19
</div>
</div>
</section>

7. Creando estilos para la página de nosotros.

En el editor de código, abre el archivo estilos.css, debajo la última línea ingresa las siguientes líneas de código.
Creando estilos para la sección nosotros
/* Nosotros */
.nosotros {
display: grid;
grid-template-rows: repeat(2 auto);
}
@media (min-width: 768px) {

.nosotros {
column-gap: 2rem;
}
}
.nosotros__imagen {
grid-row: 1 / 2;
}
@media (min-width: 768px) {

.nosotros__imagen {
grid-column: 2 / 3;
20
}
}
Creando estilos para la sección por qué comprar
/* Por qué comprar */

.bloques {
display: grid;
gap: 2rem;
}
/* Valor para visualizar en Tablets */

@media (min-width: 768px) and (max-width:1023px) {
.bloques {
}
}
/* Valor para visualizar en PC y Superior */

@media (min-width:1024px) {
.bloques {
}
}
.bloque {
text-align: center;
}
21
.bloque__titulo {
margin: 0;
}
8. Colocando clases en la página de nosotros.

En esta parte del proyecto vamos a colocar las clases que se han creado en el archivo estilos.css dentro de las etiquetas o secciones que
correspondan. Importante: El texto que aparece dentro de las secciones "nosotros" y "bloques" es de prueba, no es necesario que lo
captures todo, coloca cualquier otro conjunto de caracteres. En el sitio web https://es.lipsum.com/, puedes generar párrafos con texto de
prueba.
Colocando clases en sección nosotros.

<h1>Nosotros</h1>
<div class="nosotros">
<div class="nosotros__contenido">
<p>Mauris mattis nisi tempor, efficitur nisi quis, auctor nibh. Vivamus posuere
turpis eu quam commodo pharetra. Nulla ac nibh dignissim, blandit erat et, porttitor elit.
Mauris turpis nulla, egestas vitae posuere a, rhoncus sed lorem. Ut id hendrerit ante, nec
volutpat urna. Nullam et condimentum leo.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab odio inventore minus
minima. Delectus alias, voluptates itaque obcaecati iste pariatur. Ut molestie ante non libero
tempor tristique. Nulla rhoncus justo sed lacus mollis, quis maximus augue lobortis. Integer
ultricies arcu ut efficitur dapibus. Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ab odio inventore minus minima. Delectus alias, voluptates itaque obcaecati iste pariatur.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab odio inventore minus minima.
Delectus alias, voluptates itaque obcaecati iste pariatur. </p>
</div>
<img class="nosotros__imagen" src="img/nosotros.jpg" alt="Imagen nosotros">
</div>
22
</main>
Creando clases en sección por qué comprar.


<section class="contenedor">
<h2>¿Por qué comprar con nosotros?</h2>
<div class="bloques">
<div class="bloque">
<img src="img/icono_1.png" alt="¿Por qué comprar?">
<h3 class="bloque__titulo">EL mejor precio</h3>
</div>
<img src="img/icono_2.png" alt="¿Para Devs">
<h3 class="bloque__titulo">Para Devs</h3>
</div>
<img src="img/icono_3.png" alt="Envío gratis?">
<h3 class="bloque__titulo">Envío gratis</h3>
</div>
<img src="img/icono_4.png" alt="La mejor calidad">
<h3 class="bloque__titulo">La mejor calidad</h3>
</div>
23
</div>
</section>

9. Página de nosotros terminada.

El trabajo realizado hasta este punto, se debe ver igual a las imágenes que se presentan a continuación.
Fig. 9. Página de nosotros, vista en una resolución de 1024px o superior.
24
Fig. 10-11. Página de nosotros vista en una pantalla de Smartphone y Tablet.
25
10. Creando página de producto.

Abre el archivo nosotros.html, guarda una copia de ese mismo archivo con el nombre producto.html. Borra toda la sección por qué
comprar. Modifica la etiqueta <h1>, coloca el texto "Playera". Debes tener las siguientes líneas de código. Recuerda que las demás
secciones como header, navegación y footer, se quedan igual, no las elimines.

<h1>playera</h1>
AQUÍ VAMOS A TRABAJAR
</main>
<!-- Fin del contenido principal →
CONSIDERACIONES DE EVALUACIÓN Y ACREDITACIÓN

FACTORES: DESCRIPCIÓN
REQUISITOS
26

Paguina Web

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Paguina Web

Cargado por

Copyright:

Formatos disponibles

DIRECCIÓN GENERAL DE EDUCACIÓN TECNOLÓGICA AGROPECUARIA Y CIENCIAS DEL MAR

CENTRO DE BACHILLERATO TECNOLÓGICO AGROPECUARIO NO. 35

PROGRAMACIÓN - MÓDULO III S3-DESARROLLA APLICACIONES QUE SE EJECUTAN EN EL SERVIDOR

PROF. JULIO CÉSAR MARTÍNEZ

1. Creando la estructura del proyecto. 2

2. Creando página de inicio. 2

3. Creando estilos CSS. 7

4. Colocando clases CSS en la página de inicio. 13

5. Página de inicio terminada. 15

6. Creando página de nosotros. 18

7. Creando estilos para la página de nosotros. 20

9. Página de nosotros terminada. 24

Instrucciones: Lee los contenidos de cada

1. Creando la estructura del proyecto.

Fig. 1. Estructura de trabajo para el proyecto.

2. Creando página de inicio.

Creando el menú de navegación

Creando sección de contenido principal

Creando título y div para los productos

Creando sección pie de página

Enlazando archivo de estilos

Seleccionando fuente desde Google Fonts

Fig. 2-3. Buscando fuente tipográfica en el sitio de Google Fonts.

Fig. 4-5. Selección de fuente tipográfica en el sitio de Google Fonts.

Enlazando fuente de Google Fonts

3. Creando estilos CSS.

/* Variables de color y fuentes */

/* Hacks para ajustar contenido */

/* Estilos globales para todo el sitio */

/* Valor para visualizar en Smartphones */

/* Valor para visualizar en Tablets */

/* Valor para visualizar en PC y Superior */

4. Colocando clases CSS en la página de inicio.

Colocando clases en la sección Header

Colocando clases en la sección Navegación

Colocando clase contenedor

Colocando clase grid

Colocando clases footer

5. Página de inicio terminada.

Fig. 6. Página de inicio, vista en una resolución de 1024px o superior.

Fig. 7-8. Página de inicio vista en una pantalla de Smartphone y Tablet.

6. Creando página de nosotros.

AQUÍ VAMOS A TRABAJAR

Debajo de la etiqueta <h1>, coloca las siguientes líneas de código.

Creando la sección por qué comprar

7. Creando estilos para la página de nosotros.

Creando estilos para la sección nosotros

@media (min-width: 768px) {

@media (min-width: 768px) {

Creando estilos para la sección por qué comprar

/* Por qué comprar */

/* Valor para visualizar en Tablets */