Crear una pantalla de inicio similar a iOS con CoffeeScript

Hoy vamos a crear una pantalla de inicio similar a iOS usando CoffeeScript, un nuevo lenguaje basado en JavaScript y la biblioteca jQuery. CoffeScript tiene una sintaxis limpia que se encuentra entre Ruby y Python. Si no ha usado ninguno de ellos, no se preocupe, no es obligatorio. Sin embargo, deberá estar familiarizado con JavaScript para que pueda comprender mejor los conceptos detrás del lenguaje.

También vamos a usar el complemento Touchable, para que podamos escuchar los eventos táctiles.

Primero, ¿qué es CoffeeScript?

CoffeeScript es un lenguaje de programación ordenado destinado a mejorar las partes buenas de JavaScript, mientras trabaja con las no tan buenas. Facilita la programación orientada a objetos e introduce una serie de adiciones útiles, como comprensiones, nueva sintaxis para funciones y manejo de alcance, junto con numerosas pequeñas mejoras.

CoffeeScript funciona en todos los navegadores que existen y es compatible con todo su código JavaScript existente (incluidas bibliotecas como jQuery y complementos). Pero, ¿cómo funciona esto si es un idioma diferente? Simple:CoffeeScript se compila en JavaScript , por lo que funciona en cualquier navegador que lo admita.

Antes de comenzar a seguir este tutorial, le sugiero que lea los ejemplos en el sitio web de CoffeeScript (asegúrese de consultar la sección "Pruebe CoffeeScript ") y The Little Book on CoffeeScript para una introducción al lenguaje.

El HTML

Comencemos con el marcado HTML de nuestra pantalla de inicio similar a iOS. Como de costumbre, este es un documento HTML5 normal con hojas de estilo en el encabezado y JS incluye antes del cuerpo de cierre etiqueta.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>iOS Home Screen with CoffeeScript | Tutorialzine Demo</title>

        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <section id="homeScreen">
            <div id="mask">
                <div id="allScreens">
                                   <!-- The .screen divs will go here -->
                                </div>
            </div>

            <ul id="indicators">
                            <!-- A LI element for every screen -->
                        </ul>

            <div id="dock">
                            <!-- The three dock icons will go here -->
                        </div>
        </section>

        <!-- JavaScript includes -->
        <script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
        <script src="assets/js/touchable.js"></script>
        <script src="assets/js/coffee-script.js"></script>

        <script type="text/coffeescript">

            # Our Code Goes Here

        </script>

    </body>
</html>

Tenemos la #homeScreen sección, que es el contenedor principal de nuestro experimento. En su interior está la #máscara , que usa overflow:hidden para mostrar sólo una pantalla a la vez. El #allScreens div dentro de él, como sugiere el nombre, contiene todos los divs .screen generados dinámicamente con iconos.

A continuación se encuentran los #indicadores UL, que muestra los pequeños puntos con la pantalla que se muestra actualmente y el #dock div.

Como se mencionó anteriormente, CoffeeScript requiere un paso de compilación adicional, que convertirá el código fuente a JavaScript. Puede hacer esto con el paquete coffeescript para node.js (como se explica en su sitio web), o con coffeescript.exe para Windows, que es un ejecutable independiente y listo para usar. Para scripts pequeños, también puede incluir el compilador directamente en su página y escribir su código en línea en una etiqueta