Crear la Estructura de la Página
No importa si es el primer sitio que se desarrolla o es el número un millón. Siempre el contenido es lo más importante de un sitio. Y si el sitio contiene elementos que lo hagan amigables al sin fin de dispositivos desde donde acceden a él, esto le da un valor agregado muy redituado con mayores visitas, mayor retorno de inversión o mayor número de conversiones. Es por estas razones que hoy vamos a diseñar pensando en el contenido sin dejar de que dependa del diseño. Vamos a decidir en primer lugar el contenido que necesitamos mostrar en nuestro sitio, vamos a crear una estructura de página basada en este contenido. No importa si lo hacemos en una hoja de papel o en un programa, actualmente existen varios programas que nos permitirán realizar esta tarea( Ej. Prototyper, Mockups por mencionar algunos). Posteriormente presentaremos la página en un diseño simple y lineal que funcione bien en ventanas gráficas estrechas (Ej. smartphones) y anchas (Ej. Televisores).
Crear la Estructura de la Página
Ya sabemos qué necesitamos:
- Una sección que describa de forma general nuestro producto, el Curso CS256: Desarrollo de Web para móviles.
- Un formulario para recopilar información de los usuarios interesados en nuestro producto
- Una descripción y un video en los que se explique el producto detalladamente
- Imágenes del producto en acción
- Una tabla de datos con información que refleje lo que el producto ofrece
TL; DR (Too Long; didn’t read)
Mientas más largo es el contenido, no será leído, esta es una regla básica en el diseño web.
- Piensa primero en el contenido que necesitas
- Esboza la arquitectura de la información para ventanas gráficas estrechas y anchas
- Crea una versión básica de la página sin aplicar estilos al contenido
Además ya hemos pensado en una arquitectura de información y en un diseño generales tanto par las ventanas gráficas estrechas como para las anchas.
Esta podría ser perfectamente la estructura básica de la página que usaremos durante el proyecto.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CS256: Mobile Web development - structure</title>
</head>
<body>
<div id="headline">
<header>
<h1></h1>
<p></p>
</header>
<div id="blurb">
<p></p>
<ul>
<li>
</ul>
</div>
<form method="post" id="register">
</form>
</div>
<div id="section1">
<h2></h2>
<p></p>
<ul>
<li>
</ul>
<video></video>
</div>
<div id="section2">
<h2></h2>
<p></p>
<div id="images">
<img>
</div>
</div>
<div id="section3">
<h2></h2>
<p></p>
</div>
<footer>
<p></p>
</footer>
</body>
</html>
Añadir contenido a la estructura
Ya hemos acabado con la estructura básica del sitio. Ya sabemos qué secciones necesitamos, qué contenido se mostrará en estas secciones y en qué lugar de la arquitectura de información general colocarlo. Ha llegado el momento de crear el sitio e ir agregando la información que queremos mostrar. Nota: Los estilos se aplicarán posteriormente.
Crear el título y el formulario
El título y el formulario de notificación de solicitudes son componentes esenciales de nuestra página. El usuario debería verlos de forma inmediata. En el título, basta con añadir un texto que describa el curso:
<div id="headline">
<div class="container">
<header>
<h1>Mobile Web Development</h1>
<p>Building Mobile Web Experiences</p>
</header>
<div id="blurb">
<p>So you've heard mobile is kind of a big deal, and you're not
sure how to transform your traditional desktop-focused web apps
into fast, effective multi-device experiences.</p>
<p>This course is designed to teach web developers what
they need to know to create great cross-device web
experiences.</p>
<p>This course will focus on building mobile-first web apps,
which will work across multiple platforms including:</p>
<ul>
<li>Android,</li>
<li>iOS,</li>
<li>and others.</li>
</ul>
</div>
<form method="post" id="register">
</form>
</div>
</div>
Ver ejemplo en línea También debemos rellenar el formulario. Se trata de un formulario simple que recopila los nombres de los usuarios, sus números de teléfono y la hora ideal para llamarlos. Todos los formularios deberían contener etiquetas y marcadores de posición para facilitar que los usuarios se centren en determinados elementos, para que sepan lo que deben escribir en ellos y para que las herramientas de accesibilidad interpreten la estructura del formulario. El atributo de nombre no solo envía el valor del formulario al servidor, sino que también se usa para dar indicaciones importantes al navegador sobre cómo rellenar automáticamente el formulario para el usuario. Añadiremos tipos semánticos para que los usuarios puedan introducir contenido en un dispositivo móvil de forma rápida y sencilla. Por ejemplo, al introducir un número de teléfono, el usuario debería ver un panel con números.
<form method="post" id="register">
<h2>Register for the launch</h2>
<label for="name">Name</label>
<input type="text" name="name" id="name"
placeholder="Thomas A Anderson" required>
<label for="email">Email address</label>
<input type="email" name="email" id="email"
placeholder="neo@example.com" required>
<label for="tel">Telephone</label>
<input type="tel" name="tel" id="tel"
placeholder="(555) 555 5555" required>
<input type="submit" value="Sign up">
</form>
Crear una sección con vídeos e información
La sección de contenido con vídeos e información debe contener más detalles. Tendrá una lista de viñetas con las características de nuestros productos, además de un marcador de posición en formato de vídeo que muestre cómo se usa nuestro producto.
<div id="section1">
<div class="container">
<h2>What will I learn?</h2>
<p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
<p>You'll understand what it takes to:</p>
<ul>
<li>build great web experiences on mobile devices</li>
<li>use the tools you need to test performance</li>
<li>apply your knowledge to your own projects in the future</li>
</ul>
<video controls poster="udacity.png">
<source src="udacity.mp4" type="video/mp4"></source>
<source src="udacity.webm" type="video/webm"></source>
<p>Sorry your browser doesn't support video.
<a href="udacity.mov">Download the video</a>.
</p>
</video>
<br>
</div>
</div>
Ver ejemplo en línea Los vídeos suelen usarse para describir contenido de manera más interactiva y presentar un producto o un concepto. En caso de que no cuentes con un video de tu producto o del concepto, puedes agregar un carrusel de imágenes. Es posible integrar vídeo en tu sitio siguiendo las recomendaciones siguientes:
- Añade un atributo
controlspara facilitar a los usuarios la reproducción del vídeo. - Añade una imagen
posterpara ofrecer una vista previa del contenido. - Añade varios elementos basados en formatos de vídeo compatibles.
- Añade texto de respaldo para que los usuarios puedan descargar el vídeo si no pudieran reproducirlo en la ventana.
Ver ejemplo en línea