[Nick] Entonces, Jason, creo que la mejor manera de hacerlo es con un diseño web receptivo. Creo que si estás codificando para un montón de dispositivos diferentes, deberías apegarte a una base de código. [Jason] No estoy de acuerdo con tu posición. Creo que optará por diseños y sitios específicos del dispositivo. [Nick] Creo que es mucho más fácil tener… espera, ¿estamos…? [Jason] Sí, estamos listos. Olvidé decirte que estamos despiertos.
[Nick] Probablemente deberíamos comenzar el programa entonces. [Nick] Soy Nick Pettit. [Jason] Soy Jason Seifer. Y estás viendo The Treehouse Show, tu dosis semanal de Internet donde hablamos de todo, diseño web, desarrollo web y más, frente a una audiencia de estudio en vivo. [Jason] Y yo personalmente soy un gran admirador del "más". En este episodio de The Treehouse Show, hablaremos sobre los marcos de trabajo de CSS y JavaScript y las aplicaciones interesantes que pueden resultarle útiles al desarrollar sus sitios web y/o aplicaciones web.
Entonces, sigamos adelante y comencemos. [♪ reproducción de música♪] [El programa de la casa del árbol] [Nick] Entonces, de lo que estamos hablando antes de que comience el programa: diseño web receptivo versus sitios específicos para dispositivos móviles. El diseño web receptivo es básicamente una forma de codificar. con una sola base de código para múltiples dispositivos. Entonces, ya sabes, tienes tus computadoras de escritorio, tienes tabletas y también tienes teléfonos móviles. Y puede ser una verdadera molestia hacer que tu sitio web funcione en todos estos dispositivos diferentes. Ahora, si usa un diseño web receptivo , puede crear una sola base de código y todos sus sueños se harán realidad. [Jason se ríe] [Jason] No estoy seguro de eso, Nick. Ahora, cuando estamos hablando de codificar una versión específica del sitio para todas las diferentes aplicaciones, lo que sucederá es que vaya a la versión de escritorio del sitio, lo llaman el sitio completo, en muchas sitios web obtienes una sola versión del sitio.
Pero también puede usar un marco, como jQuery Mobile, para hacer una versión del sitio específica para iPhone, una versión del sitio específica para iPad y tal vez una versión del sitio específica para Android. El inconveniente de codificar en función de un dispositivo específico es que, a largo plazo, termina haciendo un poco más de trabajo en lugar de tener un diseño específico basado en un diseño web receptivo. [Nick] Ahora, para mí, eso suena como mucho trabajo, y realmente creo que solo hay una persona que puede resolver este argumento– [Jason] ¿Y quién es ese? [Nick] Y ese es el diseñador web de los 90. Tipo de diseño web de los 90, ¿qué piensas sobre todo esto, este material receptivo? [Tipo de diseño web de los 90] Oh, lo siento.
Estaba viendo el maratón de Dawson's Creek. ¿Sensible? Um, bueno, quiero decir, cuando estoy diseñando una web, quiero decir, solo hay una forma en la que debes ir. Recurra a las habilidades que aprendimos en los años 90. Esto es lo que haces, ¿de acuerdo? Le das a la gente lo que quiere. Le das a la gente un sitio que se ve bien. ¿Tengo razón? ¿Tengo razón? [Jason] Suena bien. [Nick] Realmente no puedo discutir con eso. [Jason] Realmente no puedo discutir con eso.
['90s-web-design-guy] Entonces, comienzas con una introducción flash en tu página de bienvenida. Y luego, dos enlaces, y solo dos enlaces, ¿de acuerdo? HTML o flash. ¿Bien? Y eso es lo que haces. Asegúrese de optimizar para Internet Explorer o Netscape, Netscape Navigator y, ya sabe, estará bien. Así que no te preocupes por que los androides lo usen. ¿Seres humanos? Van a usar su sitio. Asi que. [Nick] Está bien, bueno, gracias. Gracias por tu contribución, diseñador web de los 90. Eso es, eh… eso es, eh… [Jason] Muy perspicaz. ['90's-web-design-guy] Me voy de aquí.
Vienen amigos, así que nos vemos. [Nick] Sí, muy, muy buen consejo. Uh–en realidad, en absoluto. Continuaremos y hablaremos sobre esta herramienta realmente genial llamada Ceasar. Y básicamente, te permite crear transiciones CSS3 muy fácilmente. Existe esta función Bézier cúbica cuando crea una transición CSS que le permite crear una curva de animación personalizada. [Jason, interrumpiendo] Ahora, Nick. [Nico] ¿Sí? [Jason] Para aquellos de nosotros los desarrolladores en la audiencia– ¿Qué es esta curva "Bézier" de la que estás hablando? [Nick] Una curva de Bézier es, básicamente, esta curva en la que tienes dos manijas diferentes y puedes ajustar la curva de esa manera. Pero eso es realmente complicado cuando solo se trata de números o cuando se escribe código. Lo que Ceasar te permite hacer es ver una representación gráfica de esto, y puedes arrastrar estos controles y cambiará los números en tiempo real.
Y pueden verlo en… es www.MatthewLein.com/ceasar/, creo. Algunas cosas realmente geniales. Cuando continúa y hace clic en "izquierda" o "ancho" o "alto" en esta demostración en particular, puede ver cómo cambia la curva de animación a medida que la ajusta. Y también puede ajustar otras cosas, como la duración y cosas por el estilo, y creará un código que puede continuar y simplemente copiar y pegar en su sitio web. Entonces, cosas geniales para diseñadores o desarrolladores. [Jason] Creo que ambos podemos estar de acuerdo en eso. [Nico] Creo que sí. [Jason] Lo siguiente de lo que vamos a hablar hoy es una aplicación llamada Slowy. Esta es una aplicación para tu Mac. Se encuentra dentro de la barra de menú. Y lo que hace es simular diferentes velocidades de conexión.
No todo el mundo tiene una conexión a Internet de alta velocidad, por lo que mientras diseña o desarrolla su sitio web , puede simular una conexión de 56K. Puede simular una conexión 3G para su iPhone o LTE si tiene la suerte de tener un dispositivo habilitado para LTE. Esta es una aplicación paga y cuesta $ 4.99. No están patrocinando el programa, es una pena para ellos, y puede descargarlo en www.SlowyApp.com.
Es muy importante considerar la velocidad de conexión cuando estás desarrollando tus sitios web. [Nick] ¡Cosas realmente geniales! Lo siguiente de lo que queremos hablar se llama Scrollorama. Ahora, esto es… esto es muy, muy divertido. Básicamente, la gente está tratando de crear este efecto llamado paralaje o desplazamiento de paralaje, supongo. [Jason] Me gusta en el sitio web de Nike. [NIC] Exacto. Entonces, a medida que se desplaza hacia abajo en la página, comenzarán a suceder todo tipo de cosas diferentes. Así que voy a desplazarme hacia abajo en el sitio Scrollorama– o como se llama esta versión 2.0, Super Scrollorama– [Jason] Vuelvo a la costumbre. [Nico] Así es. A medida que se desplaza hacia abajo, puede ver que suceden todos estos efectos diferentes: atenuarlo, volarlo, girarlo, suena como una canción de Daft Punk, ¿verdad? [Jason se ríe] [Nick] Es realmente genial.
Y es solo un complemento de jQuery, por lo que es muy fácil de usar. Simplemente coloca jQuery en su sitio , agrega Super Scrollorama y luego tiene acceso a todos estos efectos. [Jason] A continuación, hablaremos de Meteor JS. Meteor JS es un servidor JavaScript y un marco del lado del cliente que ayuda a escribir aplicaciones web en tiempo real, o no en tiempo real. Lo realmente bueno de Meteor JS es que mientras escribe código y lo actualiza en el cliente, sus datos se envían inmediatamente al servidor.
Si hay algún tipo de error, esto puede ser un poco extraño. Los errores se propagarán de nuevo al lado del cliente. Esto puede ser un poco extraño en una situación en la que, por ejemplo, actualizas tu dirección de correo electrónico y ya está en uso. Si hace clic en Guardar, en el cliente se actualizará. Va al servidor, el servidor dice "Oye, lo siento, esa dirección de correo electrónico ya está en la base de datos". Devuelve el anterior al cliente. Desde el lado de la interfaz de usuario, ¿cómo crees que manejarías algo así, Nick? [Nick] Bueno, si vuelve así y hay algún tipo de error, es posible que desee seguir adelante y colocar un borde alrededor del área de entrada. la forma." También es posible que desee tener algún tipo de texto o algún tipo de información sobre herramientas al lado que explique un poco más sobre lo que salió mal o lo que el usuario debe hacer para corregirlo.
O incluso podría poner una 'x' allí en lugar de un borde o algo así, solo para llamar la atención del usuario y hacerle saber que "Oye, necesitas arreglar algo aquí". [Jason] Eso suena correcto. Otras cosas interesantes sobre Meteor JS es que tiene impulsos de código activo. Tan pronto como envía su nuevo código al servidor, no solo se actualiza inmediatamente en el servidor con la nueva versión del código, sino que los clientes también se actualizan. Por lo tanto, alguien ni siquiera necesita volver a conectarse al sitio o actualizar la página para obtener el nuevo código. Puede comprobarlo en www.Meteor.com. Hay algunos screencasts interesantes, así como código de ejemplo para descargar y jugar. [Nick] Eso es caliente. [Jason] Hace calor. Empujes de código caliente. [Nick] Ese también es un nombre de dominio popular: Meteor.com.
[Jason] Lo es. Eso es loco. [Nick] A continuación, vamos a hablar sobre los marcos CSS. Ahora, hay dos específicamente sobre los que quiero llamar nuestra atención para el episodio de esta semana porque estamos hablando de diseño web receptivo. El primero es Bootstrap de Twitter. Y Bootstrap es solo un marco CSS, al igual que muchos otros, excepto que puede crear todo tipo de maravillas flexibles que le gustaría usar en un sitio receptivo. Entonces puede crear su cuadrícula de 12 columnas, pero eso en realidad se flexionará o responderá a medida que cambia el tamaño del navegador web.
El otro es Zurb Foundation 3. Ahora, obviamente, esta es la tercera versión de Foundation, y salió recientemente. Y nuevamente, es solo otro marco CSS que le permite crear cuadrículas muy, muy fácilmente. Ahora, esto es… esto es genial tanto para diseñadores como para desarrolladores. Le permite comenzar con un montón de código que le permitirá codificar su sitio más rápido. Te ayudará y te ayudará a comenzar mucho más rápido. [Jason] Y también un poco más semánticamente. Ya sabes, hay un montón de clases si estás creando formularios complicados. [Sonido de teléfono celular sonando] Hay un… lo siento, ese fui yo. Sé que esto es terriblemente poco profesional. [Nick] Creo que ese fue el beeper del tipo de diseño web de los 90, en realidad. [Jason se ríe] [diseñador web de los 90] ¿Qué pasó? ¿Qué? ¿Estás hablando de la Fundación Zurb? [Jason] Sí.
['90s-web-design-guy] ¡Oh hombre, son uno de mis equipos favoritos de lucha libre de todos los tiempos, hombre! [Risas] ¡Hombre! Está bien, te alcanzaré más tarde. [Nick] Está bien, genial. Gracias. Gracias por eso. ['90s-web-design-guy] Te envié un mensaje, ¿de acuerdo? Fresco. [Jason] Gracias. Gracias por eso. Lo tengo en mi localizador. De todos modos. Así que adelante, echa un vistazo a Zurb Foundation o Twitter Bootstrap. Lo interesante de Twitter Bootstrap es que ahora tenemos complementos encima. Hay cosas llamadas Kickstrap que crean temas además de los componentes regulares de Twitter Bootstrap. Lo importante es que, cuando usa uno de estos marcos CSS , comienza con aproximadamente el 80% de un marco realmente excelente.
Luego, un buen diseñador puede continuar y agregar además de eso cualquier cosa que vaya a necesitar. Además, ayudará a los desarrolladores y diseñadores a ponerse al día más rápido en sus proyectos. [Nick] Y creo que también es muy útil para los desarrolladores porque si trabajas solo, solo eres un desarrollador que trabaja solo , es útil usar un marco CSS como este porque establece ciertas restricciones de diseño. –como una cuadrícula– para que no te vuelvas demasiado loco fuera de lo que podría ser una zona de confort muy pequeña. [Jason] Ya sabes, ahora tenemos todo este diseño web receptivo en estos marcos CSS . Creo que voy a ir a tu campamento y cambiar de opinión. [Nico] Gracias, Jason. [Jason] Elija un diseño web receptivo. Creo que hoy hemos encontrado un terreno común. [Nick] Creo que hemos progresado mucho. [Jason] Yo también lo creo.
Nuestro terapeuta estará orgulloso. Así que gracias a todos por escuchar The Treehouse Show. Si tiene algún comentario, envíe un tweet a @NICKRP o @JSEIFER y visite Treehouse en www.teamtreehouse.com. [Nick] ¡Muchas gracias por mirar! ¡Nos vemos la próxima semana! [Jason] ¡Mantente elegante! [♪ reproducción de música ♪] [El show de la casa del árbol] [casa del árbol™].