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.

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

Instrucciones:

  1. 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>
  1. Analiza lo que acabas de ver, observa cómo está compuesto y si lo crees conveniente, haz anotaciones.
  2. 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

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:

  1. 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.
  2. Benchmark de sitios similares
    - Análisis de por lo menos tres websites similares al de tu proyecto.
  3. Mapa de sitio
    - Diagrama que muestre las interacciones entre las páginas.
  4. 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

  1. 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.
  2. 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.).
  3. 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.
  4. Selección de paleta de color y tipografías.
  5. 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

  1. 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.
  2. 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