Entregables

A continuación puedes consultar las instrucciones de las actividades y evidencia correspondientes a esta competencia:

Haz clic en cada elemento para conocer sus instrucciones.

Actividad 1. Documentación de un sitio

Instrucciones:

Parte 1.

La Evidencia 1 consiste en crear un sitio web que sea alimentado de manera dinámica. Antes de empezar a escribir código, crear contenido y gráficas, debes planear cuál es el resultado al que quieres llegar.

Crea el briefing de tu proyecto. Escribe lo más detalladamente posible los requerimientos de tu sitio web: el tema, cómo piensas ordenarlo, cómo piensas alimentarlo de información, etcétera.
Entrega la planeación que hiciste en un documento. Incluye anotaciones gráficas. En esta liga podrás encontrar un formato básico de brief.

Parte 2.

Una vez que tienes tu briefing listo, es tiempo de que dibujes tu diagrama de navegación.

Al dibujar tu arquitectura de navegación, toma en cuenta que la información siempre esté ligada.
Puedes hacer un benchmark de páginas web parecidas al concepto de tu proyecto. Observa cómo está organizada la información de las secciones.
Tu entregable es un diagrama que muestre la conformación de tu sitio web.

Parte 3.

¡Ya casi está completa tu documentación del sitio!
En el benchmarking anterior pudiste ver el estilo que utilizan los websites que se asemejan al tuyo.

Selecciona tres tipografías que te gusten, la gama de color que te gustaría utilizar (por lo máximo tres colores).
Justifica la elección del layout en función de la finalidad de tu sitio web a desarrollar.

Puedes ver más información de cómo hacer un layout de un sitio web aquí.

Parte 4.

Comienza a dibujar de forma esquemática el esqueleto de al menos una página de tu sitio web.

Dibuja al menos una de las pantallas de tu sitio tomando en cuenta lo siguiente:

La página inicial puede ser única.
Las páginas de contenido serán una sola (es decir, habrá una plantilla reusable).
La página de contacto puede ser única o puedes usar una de las interiores y sólo cambiar la información.

Entrega tu esquema en formato digital.
Puedes ver más información de cómo hacer un esqueleto de un sitio web aquí.

Criterios de evaluación

Concepto	Ponderación
Crea el briefing del proyecto.	20
Dibuja la arquitectura de navegación.	25
Selecciona tres tipografías diferentes.	10
Selecciona una gama de color (máximo tres colores).	10
Justifica la elección del layout en función de la finalidad del sitio web a desarrollar.	10
Dibuja al menos una de las pantallas del sitio.	25

Actividad 2. Despliegue de información

Instrucciones:

De acuerdo al contenido de esta tabla:

id	user_name	gender	favorite_color	favorite_food

Crea una base de datos que incluya una tabla con esta información.
Agrega contenido a la tabla, por lo menos 10 registros, y despliega la información utilizando las técnicas que has aprendido.
¡Da un paso adelante! Crea ligas/botones que ordenen la información por usuario, género y por id.

Criterios de evaluación

Concepto	Ponderación
Creación de la base de datos con base en la tabla.	20
Despliegue de información a través de técnicas vistas en el tema.	40
Creación de botones que ordenen la información por usuario, género y por id	40

Actividad 3. Dando estilo a una página

Instrucciones:

Observa el siguiente código base:

                    
<body>
 	<div class="wrapper">
		<header>
 			<h1>Rico Como Aki</h1>  
				<nav>
   				<ul>
     					<li><a href="" class="current">home</a></li>
     					<li><a href="">page1</a></li>
     					<li><a href="">page2</a></li>
     					<li><a href="">page3</a></li>
     					<li><a href="">contacto</a></li>
   				</ul>
 				</nav>
		</header>
	<section class="courses">
 		<article>
   		<figure>
     			<img src="https://timeopinions.files.wordpress.com/2013/02/chinesefood.jpg" alt="Bok Choi" />
     			<figcaption>Koko©/figcaption>
   		</figure>    
			<hgroup>
     			<h2>Plato Koko</h2>
     			<h3>Muy bueno de verdad!</h3>
   		</hgroup>
   		<p>Hecho con muchas cosas ricas.Hecho con muchas cosas ricas.Hecho con muchas cosas ricas.</p>
 		</article>
 		<article>
   		<figure>
     			<img src="http://i.ytimg.com/vi/nMuJgtRdPpk/hqdefault.jpg" alt="Teriyaki sauce" />
     			<figcaption>Kung Pao</figcaption>
   		</figure>
   		<hgroup>
     			<h2>Yommy yommy!</h2>
     			<h3>Muy bueno</h3>
   		</hgroup>
   		<p>Hecho con muchas cosas ricas.Hecho con muchas cosas ricas.Hecho con muchas cosas ricas.</p>
 		</article>
	</section>
	<aside>
 		<section class="popular-recipes">
   		<h2>Otro platos sabrosos</h2>
   		<a href="">FuuKang Loo</a>
   		<a href="">FuuKang Loo Kha</a>
   		<a href="">FuuKang Taipei</a>
   		<a href="">Loo Loo Kie</a>
 		</section>
 		<section class="contact-details">
   		<h2>Contacto</h2>
   		<p>Aki si Komo
     		<br /> Calle China #9023
     		<br /> Pekin
     		<br /> China
   		</p>
 		</section>
	</aside>
	<footer>
 		< Aki Si Kommo Riko!
	</footer>
 </div>
<!-- .wrapper -->
</body>

Analiza lo que acabas de ver, observa cómo está compuesto y si lo crees conveniente, haz anotaciones.
A través de CSS genera estilos con la intención de que el HTML brindado se vea parecido a la siguiente imagen

Este ejercicio te dará idea de lo que debes de empezar a hacer para crear el layout de tu proyecto final. Con los conocimientos que tienes, puedes empezar a crear el “tema” que albergará a tu sitio web.

Criterios de evaluación

Concepto	Ponderación
Entregar el ejercicio completo	70
Calidad de diseño	20
Uso de los elementos de Layout en la página	10

Evidencia 1. Programación para páginas web y multimedia

Instrucciones:

En este proyecto desarrollarás habilidades de programación con PHP, CSS y Javascript, a la vez de pulir un poco más el conocimiento de HTML que ya tienes. Tu Evidencia 1 consiste en el desarrollo de un website dinámico, para el cual tendrás dos alternativas:

Puedes acudir con un cliente real a quien le ofrecerás el desarrollo de un sitio web dinámico que cumplan con sus necesidades especiales.
Si no tienes la oportunidad de trabajar con un cliente, puedes proponer el proyecto por tu cuenta, siempre y cuando cumplas con los requerimientos establecidos.

Independientemente de cual opción elijas, los requerimientos obligatorios que debe cumplir el sitio son:

Debe de tener una conexión con una base de datos por medio de MySQL y PHP, de manera que gran parte del contenido sea extraído de dicha base de datos.
Debes usar Bootstrap como estructura de tu website, de manera que puedas usar su CSS para poder crear un sitio responsivo.
Debes de crear por lo menos dos interacciones con el usuario por medio de Javascript, ya sea personalizar la página, hacer alguna dinámica con las imágenes, generar algún menú, etc.
El website debe tener por lo menos tres animaciones en distintos elementos del documento por medio de CSS o Javascript.
Son tres animaciones a tres elementos distintos, por ejemplo, si aplicas una animación sobre los botones del menú solo cuenta como una animación.
El website debe tener por lo menos tres secciones.
Debe tener imágenes responsivas.
Debe tener texto suficiente y bien redactado.
Finalmente, el diseño que se aplique debe permitir al usuario encontrar la información de manera sencilla, leer el contenido con claridad y navegar a través de las secciones sin perderse.

Eres libre de usar técnicas que no hayas aprendido en el curso, pero que consideres agreguen valor al proyecto final.

Primera parte.

En la primera parte de la evidencia debes entregar:

Diseño de brief
- ¿De qué se trata mi proyecto?
- ¿Cuál es el fin?
- Textos clave, logotipos y conceptos de diseño del cliente.
Benchmark de sitios similares
- Análisis de por lo menos tres websites similares al de tu proyecto.
Mapa de sitio
- Diagrama que muestre las interacciones entre las páginas.
Esquemas o sketches de diseño.
- Esquemas o sketches en digital (Photoshop, Illustrator, etc).
- Documenta las fuentes que vas a usar al igual que la paleta de colores.

En la primera actividad del módulo trabajarás los elementos que se piden en la primera parte de la evidencia.

Segunda parte

Estructura del sitio en XAMPP (estructura de carpetas e información).
- Usa tus conocimientos de organización para crear un sistema que te permita administrar tus archivos de manera efectiva.
Documentación del proyecto y esquemas finales del website.
- La documentación del proyecto debe contener el brief de diseño, el benchmark y su respectivo análisis, el proceso de diseño gráfico en digital, manual del website (qué fuentes usar y dónde, qué colores utilizar, si las imágenes deben estar en algún formato o tamaño especial, memorias de accesos, etc.).
Documentos de acceso y back-up.
- Memorias de acceso, el documento que contiene todos los accesos para entrar a la base de datos, el FTP, etc.
Selección de paleta de color y tipografías.
Estructura de las plantillas principales.
- El esqueleto del website, en el cual se puede identificar las secciones que se usan.
- Deben estar todas las plantillas que se usaron.

Entrega final

El website proyectado debe estar instalado en un servidor (local o externo), funcionando y con las características que se marcaron al principio del proyecto.
Entrega la documentación que avala que el website cumple con los requerimientos planteados al principio del proyecto.

La documentación incluye:

Brief (del cliente o propio)
Benchmark
Proceso de diseño gráfico
Manual del website
Memorias de acceso

Entregables:

El entregable final es un website instalado en un servidor local o externo que cumple los requisitos señalados, además de la documentación del proyecto.

Rúbrica

La rúbrica se encuentra aquí.

Puedes consultar información que te ayude a resolver los entregables en la sección Material de apoyo