Platform Code

Continuamos con las tendencias de diseño web que vienen bastante fuerte en este 2014, y en esta ocasión hemos decido hablar de el espacio en blanco.

Te preguntarías, ¿qué es el espacio en blanco?

El espacio en blanco dentro del diseño web, viene de dos tendencias más, o más bien de una, hablamos de a claridad y simplicidad, que todo esto se convierte en flat design o diseño plano.

Probablemente para los que no están muy familiarizados con el diseño, esta tendencia no sea muy conocida para ellos, sin embargo, es un aspecto muy importante que podrías tomar en cuenta dentro de tus diseños.

Aspectos de diseño

Podemos encontrar algunas páginas que cuando entramos, hay mucha cantidad de contenido, vemos un sitio abultado como si estuviéramos en una habitación donde no hay espacios para desplazarse, todo lo contrario a lo que queremos de un sitio ordenado.

Fondo

El espacio en blanco tiene como característica que no debe ser necesariamente de color blanco, puede ser de cualquier color o fondo tenue, es decir, simplemente un espacio vacío.

Hablamos de la ausencia de elementos, que en consecuencia nos da un sitio web mucho más ordenado y limpio. Los sitios web con espacios en blanco tienen como finalidad tener un sitio web que mientras navegamos podamos descansar la vista.

Lectura

Otro aspecto a tomar en cuenta es que debe haber comunicación, con esto nos referimos a que debe haber cierta ausencia de texto, no esperamos párrafos largos y llenos de palabras, queremos solo unas pocas pero pocas líneas, que realmente expresen lo que nosotros queremos, debemos ser muy precisos al escribir un mensaje de bienvenida por ejemplo.

Diseño

Debe haber un diseño atractivo, los espacios en blanco se caracterizan por eso, mantienen diseños que aseguran muchas visitas y un tiempo más largo de permanencia en el sitio.

Marketing

Además esto nos lleva a repercusiones en marketing, cosa que es buena, porque como dijimos anteriormente hay una permanencia mayor en el sitio. Hablamos de la reputación online de nuestro sitio.

Aquí te dejo algunos ejemplos, da clic para ir a la página:

Wistia

Nextr

Ogilvy One

El diseño Web ha venido creciendo constantemente, y con él han surgido modas y/o tendencias que han cambiado mucho la forma de diseñar.

El Diseño Plano o Flat Design es una de tendencia fuerte en el diseño web, es un diseño que se popularizó tras el lanzamiento de Windows 8, que ofrece una interfaz plana que está bajo el nombre Modern UI.

El flat design puede ser a la vez elegante, hermoso y encantador, no requiere de muchos adornos, es una manera sencilla y limpia de mostrarse.

Características

Como ya hemos visto con el paso del tiempo las modas cambian, y hasta hace un tiempo la moda de los diseños era completamente distinta, hablamos que estaban ‘sobre cargadas’ de elementos, de información.

El flat design consiste en permanecer en un diseño básico, donde no incluye relieves ni sombras, los elementos son más nítidos, no incluye imágenes complejas ni en tercera dimensión, hablamos de minimalismo, de algo sencillo.

Colores

La combinación de los colores deben ser agradables, no se debe exagerar en la cantidad de colores diferentes, sino que estos deben ser armónicos entre sí.

Tipografía

Cabe mencionar que la mayor parte del diseño será letra, así que el estilo de nuestra tipografía debe combinar con el resto del diseño, es decir, debemos elegir una tipografía visualmente atractiva y moderna, en estos casos se recomienda el uso de Sans Serif, pero actualmente podemos apoyarnos de fuentes libres en Google Fonts, Adobe Web Fonts y Typekit.

Cada palabra cuenta en el diseño plano, el uso de muchas palabras innecesarias hace que el sitio no se mantenga tan simple. Debemos concentrarnos en el uso de las palabras.

Botones

Los botones son una característica muy importante a la hora de diseñar, porque son una parte bastante llamativa de un sitio web.

En el flat design los botones, que entre más sencillos sean son mejores, deben tener un color llamativo y que combine con el tema. Un botón debe ser algo que pueda identificarse fácilmente, como se dijo anteriormente, deben ser llamativos.

Animaciones

En este tipo de diseño se habla de que las animaciones deben de dejar de existir, pero hay algunos tipos de animaciones bastante elegantes y suaves, estas no deben de ser tan extravagantes, deben ser suaves y agradables a la vista.

El uso de HTML5, CSS3 y JavaScript combinados, pueden crear diseños planos excelentes.

De igual forma otra de las recientes tendencias es el RWD (Responsive Web Design), el diseño adaptativo el cual está un crecimiento constante, por lo tanto es importante considerar el flat design dentro de las aplicaciones web y móviles.

Hemos hablado recientemente de las tendencias y estilos en el diseño web, y aunque estos se vienen dando a conocer ya desde el 2013, muchos diseñadores no han encontrado su estilo.

Uno de los estilos que más se han dado a conocer es el Flat Design o ‘diseño plano’, este ha venido creciendo a gran medida, y es que ofrece diseños bastante limpios y elegantes, algo que lo caracteriza por la sencillez y claridad que ofrece, además que está pensado en la fácil adaptabilidad a los diseños responsive, y los nuevos dispositivos.

Pero no todo ha sido diseño plano, sino que la tendencia era muy diferente hasta hace un par de años, donde el diseño realista era el que dominaba.

Recordemos que el diseño realista incluía sombras, texturas y algunos detalles que daban el aspecto al sitio de verse más real.

Intacto Digital Partner es una empresa argentina con sede en Miami y Buenos aires, dedicada a la creación de piezas online, ha diseñado una infografía interactiva donde nos muestra la caída del diseño realista gracias a la conquista del diseño plano.

Bueno sin más ni más te invito a hacer clic en FlatvsRealism y disfruta la aventura online. Antes debo decir que la decisión no está en la tendencia o moda que crezca, sino en tu decisión seas flat o realism debes saber que la creatividad puede más que la tendencia.

NetBeans IDE es un entorno de desarrollo, una herramienta para que los programadores puedan escribir, compilar, depurar y ejecutar programas. Está escrito en Java. Pero puede servir para cualquier otro lenguaje de programación. Existe además un número importante de módulos para extender el NetBeans IDE. Es un producto libre y gratuito sin restricciones de uso.

Todo programa en Netbeans IDE requiere la creación de un Proyecto, para esto debemos seleccionar desde el menú de opciones:

O desde la barra de íconos del Netbeans:

Ahora aparece el diálogo donde debemos elegir el tipo de proyecto a crear:

Presionamos en botón Next. Y a continuación aparece el siguiente diálogo donde debemos definir el nombre de nuestro proyecto:

En el campo de texto Project Name ingresamos como nombre: HelloWorld y dejamos las otras opciones con los valores por defecto. Presionamos el botón Finish. Ahora en la ventana Projects aparece el proyecto que acabamos de crear.

Luego de crear nuestro proyecto, el Netbeans nos genera nuestra primera Clase, ya que todo programa en Java requiere como mínimo una clase.

Todo programa en Java debe definir la función main. Esta función la debemos codificar dentro de la clase: HelloWorld. Procedemos a copiar lo siguiente:

Como último paso debemos compilar y ejecutar el programa, esto lo podemos hacer desde el menú de opciones:

O también lo podemos ejecutar desde la barra de iconos del Netbeans:

Si no hay errores de codificación, debemos ver el resultado de la ejecución en una ventana del Netbeans llamada Console, que aparece en la parte inferior:

Lo más importante es que quede claro los pasos que debemos dar para crear un proyecto en Java. El objetivo de una clase, el método main, entre otros. Los veremos a lo largo de este curso.

Si deseas obtener el proyecto en java del hola mundo, puedes descargarlo del siguiente enlace: Hello World.

Continuando con las tendencias del diseño en este 2014 vamos directo hacia la web del futuro, hoy las tendencias van desde colores, tamaños y estilos, ¿pero existen formas o estructuras para diseñar?

Bueno, sabemos que estamos en un momento en el que nadie le pone peros al diseño responsivo, y no es porque tenga estilo, bueno sí, pero más que eso, la razón está en que estamos viviendo en la era de los dispositivos móviles, en los inicios del diseño responsivo primero estaba la vista de escritorio y al final la vista del móvil.

La tendencia mobile-first se plantea como la metodología de trabajo lógica en diseño web. Empezar por lo pequeño y comenzar a crecer.

¿Qué es lo que hace mejor a Mobile-First que la forma tradicional de diseño web?

Hay razones bastantes convincentes, te diré tres.

La primera, es que concibes una percepción global de todo el conjunto y del contenido desde el inicio. Además puedes y debes crear una jerarquía del contenido que vayas a poner según su relevancia y ubicación, esto es muy importante porque debes seleccionar el contenido que debe o no estar en las resoluciones menores.

La segunda, el rendimiento es mejor en resoluciones menores. Lo que hacíamos en un inicio era que todas nuestras clases de CSS las teníamos preestablecidas para la vista de escritorio y mediante los mediaqueries sobrescribíamos las reglas de escritorio para los dispositivos móviles. Esto hacia que, en el momento en el que abrías la página en tu Smartphone requería de tiempo para poder visualizarla en su completo esplendor.

Y esto no es óptimo para el aparato, ya que los dispositivos de resolución inferior son sobrecargados de reglas, más de las necesarias. Un ejemplo: cuando nosotros queremos cargar una imagen con cierta resolución, suponiendo unos 200kb, y la resolución debe ser menor de 600px, todo esto en vista de escritorio, pero cuando vamos al responsivo, y no queremos ya dicho fondo, aunque nosotros tengamos un display: none; esto el dispositivo de resolución menor sigue descargando la imagen.

En el mobile-first no sucede esto, se trabaja de una manera más eficiente, aquí no vamos sobrescribiendo reglas sino que las vamos creando. Una manera más fácil de entenderlo es que vamos de lo menos esencial a lo que más se necesita en una mayor resolución.

La tercera, si aplicas esto, serás un diseñador enfocado hacia el futuro. Vete olvidando de las resoluciones estándar de un iPhone o de un iPad. Diseña según el contenido, establece saltos y mediaqueries que te sean necesarios para una mejor experiencia de usuario con esos contenidos, los menús, las imágenes, los sidebars, etc… ¿Sabes cuál será la resolución de los dispositivos futuros? Prepara a tu web para que cuando estos lleguen, todo se vea de forma natural y correcta.

Analizando esto es lógico creer que esto llegaría a pasar, después de trabajar con diseños responsivos, reformular la estructura convencional con la que trabajamos, no es fácil adaptarse pero te aseguro que hacer webs más rápidas y correctas es posible, empecemos de menos a más, muchos de los estilos a la hora de diseñar nos muestran lo limpios y elegantes que pueden ser, pero no solo eso sino la rapidez con la que podemos navegar a través de ellos.

Piensa en grande, ve hacia donde el viento sopla, ve hacia el futuro… ¿Y tú, ya diseñas mobile-first?

Como resultado de la gran demanda de dispositivos móviles, Smartphones y Tablets, el diseñador web se ha visto obligado a adaptarse al formato web de estos dispositivos y a su estructura, y es por eso que viene esta nueva tendencia de los web sites adaptables o el ya llamado “Responsive Web Design”.

Estos dispositivos inteligentes vienen en diferentes gamas de tamaños y resoluciones, esto ha provoca que hagamos sitios inteligentes que se adapten a estos dispositivos.

¿Qué es el Responsive Design?

Como explicamos antes es una tendencia correspondiente a hacer sitios web que se adapten perfectamente a todos tipo de dispositivos, hablamos desde monitores de escritorio hasta pantallas de smartphones y tablets.

¿Cómo es que funciona esto?

Bueno, hemos visto páginas hechas solo para celulares, otras más exclusivamente para ordenadores e incluso para Smart TV.

El responsive design sugiere o establece crear una sola website que se adapte a todos los dispositivos mediante el uso de CSS3 y sus media queries, además de un layout y el uso de imágenes flexibles. De esta manera nuestro sitio será capaz de detectar desde que dispositivo están accediendo a él y muestra la versión más óptima del sitio, reorganizando los elementos en ella e incluso deshaciéndose de algunos de ellos.

HTML5 brinda una mejor experiencia para los usuarios, de manera que no es necesario desarrollar una app para cada dispositivo. Lo que el responsive design ofrece son puras ventajas, al menos yo no veo nada de malo en él, ya que hablamos de sitios óptimos para todos los dispositivos en una misma web, ahorramos tiempo y dinero en hosting.

¿Cómo afecta en el posicionamiento de mi web?

Una web creado con diseño responsive mejora el SEO, es decir la búsqueda en dispositivos móviles es diferente a la búsqueda de un ordenador, es por eso que tener una versión móvil de tu sitio es bueno, pero tener una diseñada responsive es aún mejor, porque entre más dispositivos puedas cubrir, más tráfico tendrá tu web. Buscadores como Google priorizan en el ranking a las web sites móviles en búsquedas móviles.

También existen guías para el diseño responsive como la que ofrece Google: Guía de Google

Así que si quieres que tu web se vea bien en toda la gama de dispositivos móviles no dudes en hacerla responsive.

Existen alternativas en la construcción de un sitio web responsive, debido a los problemas de carga de ellos, por eso llego el “Mobile First”, esto es un cambio en la estructura de la construcción de un sitio responsive, te invito a conocerlo.

No solo se trata de encontrar una solución para todos los dispositivos, también se trata de ganar puntos en el ranking de los buscadores móviles, de manera que generemos más visibilidad y tráfico en nuestro sitio web.

Después de aprender los lenguajes o a utilizar las herramientas necesarias para hacer diseños web se nos presentan problemas para crear nuestros diseños, y es que no es solamente el utilizar estas herramientas o aprender las distintas instrucciones que nos ayudan a crear nuestros sitios web.

En mucho tiene que ver la creatividad del diseñador y no solamente en la imaginación sino saber combinar los elementos que van a componer nuestro sitio.

Hemos de escuchar en múltiples ocasiones a personas o programadores que se apasionan por el diseño web, pero dicen tener un problema, que no tienen la creatividad suficiente para poder crear un portal. Podemos decir que si, la creatividad es un factor o sino es que es el factor mas importante para diseñar una página web.

Consejos

En esta ocasión nos enfocaremos a como mejorar nuestra creatividad con el paso del tiempo, por eso te compartimos los siguientes consejos:

1. Los fracasos son el principio, no el fin: Las cosas no siempre salen como esperamos. Puedes fracasar en el camino, pero te fortalecerá, aprende de tus errores, si te caes levántate porque eso te ayudará a mejorar como persona y como el profesional que eres.

2. Actualiza tus conocimientos: Nuestro deber es nunca dejar de aprender, las personas creativas son muy curiosas e inquietas, se aburren de hacer lo que ya han hecho. Si estudias y pones en práctica lo que sabes podrás mejorar el área en la que te desempeñas, si haces siempre lo mismo nunca vas a mejorar. Entre más sabes es más fácil aprender algo nuevo, ya que el cerebro se vuelve más rápido con el aprendizaje.

3. Analiza los proyectos de los demás y pregúntate como lo hacen: ¿Has visto algo que te gusta, pero no sabes como lo hicieron?, es bueno ver los diseños de los demás porque en muchas ocasiones son la base de nuevos diseños, así que si ves algo que te gusta siempre pregúntate como lo hicieron, y como lo habrías hecho tú. Es una técnica buena, porque te ayuda a aprender cosas nuevas que tal vez te sean útiles mas adelante.

4. Analiza objetivamente: En muchas ocasiones cuando estamos haciendo un proyecto nos perdemos en detalles inútiles y nos perdemos en cosas que nos separan del proyecto. Queremos imponer nuestro estilo, y más cuando vemos otros proyectos que nos gustaron y queremos aplicar ciertas cosas de ellos en nuestros proyectos, no te enfoques en si te gustan o no, enfócate en la funcionalidad de tu proyecto.

5. Escucha las opiniones de los demás: Siempre es bueno pedir la opinión de la gente, ya sean familiares o amigos, siempre pide la opinión de ellos porque nos ayudan a saber lo que estamos haciendo bien o lo que estamos haciendo mal y no las has notado.

6. Comparte tus conocimientos: Así como tú has necesitado ayuda o asesoría para un proyecto, también hay personas que necesitan de esa ayuda o de un consejo. Si sabes algo que otra persona no, compártelo, ayudala explicando lo que sabes, comparte tus técnicas y estrategias te ayudará a ser mejor persona.

7. Dale crédito a quien lo merece: En muchas ocasiones los diseños que creamos nacen por circunstancias diferentes, y muchas de ellas son cuando tomamos como referencia sitios creados por personas externas a nosotros, sitios que encontramos vagando por internet, y esas referencias como ya sabes son creadas por alguien y ese alguien necesita ser reconocido, porque llegará un momento en el que alguien te tome como referencias y tendrá que reconocerte.

8. Críticas constructivas: A veces es molesto y duro recibir criticas fuertes y negativas sobre los proyectos a los que les dedicamos mucho esfuerzo, pero si llegan de alguien que sabe lo que dice debes tomar estas criticas para mejorar, debes darte cuenta que te ayudarán a enfrentar proyectos futuros, utiliza esas palabras de manera positiva.

9. Toma la iniciativa: Para triunfar como persona creativa debes tener la iniciativa de hacer las cosas que siempre haces de manera diferente, así desarrollaras más tu creatividad y además te reconocerán como alguien que lucha por cumplir sus metas.

10. Ama lo que haces: Creo que no hay mucho que decir, lo importante es que si lo amas hacer hazlo con pasión, hay muchas personas a lo lejos que les gustaría hacerlo que tu haces, esta profesión es muy cansada, los horarios afectan en mucho la vida personal, así que debes de estar preparado para lo que venga, si no lo estas o no puedes con todos los inconvenientes que esto involucra búscate otra carrera que sea aburrida y monótona.

La creatividad es importante, pero lo más importante es que si te gusta y amas tu trabajo, lo que hagas te ayudará a mejorar cada día, la pasión y el esfuerzo de lo que haces te llevará a ser una gran persona creativa.

Introducción

El curso de programación en Java de Platform Code te ofrece la enseñanza de este lenguaje de programación orientada a objetos.

Este curso te enseñará cuál es la sintaxis de Java, sabrás cómo crear interfaces gráficas para el desarrollo de aplicaciones y cómo elaborar programas sencillos.

Las personas que se dediquen profesionalmente a la informática pueden realizar esta formación para obtener nuevas competencias en el ámbito de programación con Java.

El curso lo desarrollaremos en el entorno de desarrollo Netbeans IDE 8. Si alguno quiere realizar el curso en otro entorno, no me hago responsable de que los programas no ejecuten correctamente.

Objetivos

General: Permitir que el estudiante resuelva problemas de distinta índole: administrativos, contables, gráficos, matemáticos, entre otros.

Específicos:
1. Ser desarrollado por una persona que no conoce nada de programación.

2. Recorrer un largo camino donde cada tema es fundamental para conceptos futuros.

3. Tener paciencia cuando los problemas no se resuelvan por completo.

4. Utilizar Java como primer lenguaje de programación.

Requisitos

1. Poseer conocimientos básicos de Base de Datos.
2. Manejo Básico de los computadores y el Windows.
3. Tener instalado Netbeans IDE, SQL Server 2014, MySQL.
4. No se requiere un conocimiento previo de programación.

Conceptos básicos

1. Programa:
Es una secuencia de instrucciones mediante las cuales se ejecutan diferentes acciones de acuerdo con los datos que se estén procesando. Sin embargo, el equipo sólo es capaz de procesar elementos binarios, es decir, una serie de ceros y unos. Por lo tanto, necesitaremos un lenguaje de programación para escribir de manera legible, es decir, con comandos que el ser humano pueda comprender (por ser similares a su propio lenguaje) los comandos que el equipo deberá ejecutar. Luego el compilador traduce este lenguaje de programación a un lenguaje binario para ser entendido por la computadora.

Existen dos clases de programas: unos los programas del sistema, que serían los sistemas operativos (windows, ubuntu, debian, etc) y otro los programas de aplicaciones que son los que la mayoría de nosotros desarrollamos, como aplicativos de audio, gestor de notas académicas, entre otros.

2. Lenguaje de programación:
Cabe decir que un lenguaje de programación son símbolos y reglas que permite la construcción de programas con los que la computadora puede operar así como resolver problemas de manera eficaz. Ellos contienen un conjunto de instrucciones que nos permiten realizar operaciones de entrada, salida, cálculos, manipulación de textos, lógica, comparación, almacenamiento y recuperación de datos.

Existen tres tipos de lenguajes: el lenguaje máquina, aquellos cuyas instrucciones son directamente entendibles por la computadora y no necesitan traducción posterior para que la CPU pueda comprender y ejecutar el programa, dados en binarios. Otro lenguaje sería el de bajo nivel o como muchas personas los llaman el lenguaje ensamblador, en estos las instrucciones se escriben en códigos alfabéticos conocidos como mnemotécnicos para las operaciones y direcciones simbólicas. Y por último los lenguajes de alto nivel, aquellos en los que las instrucciones o sentencias a la computadora son escritas con palabras similares a los lenguajes humanos (generalmente en inglés), lo que facilita la escritura y comprensión del programa, entre ellos encontramos JAVA.

3. Lenguaje de programación Java: Tanto como lenguaje es una tecnología que se usa para el desarrollo de aplicaciones que convierten a la Web en un elemento más interesante y útil. Java no es lo mismo que JavaScript, que se trata de una tecnología sencilla que se usa para crear páginas web y solamente se ejecuta en el explorador. Java permite jugar, cargar fotografías, chatear en línea, servicios bancarios en línea y mapas interactivos. Si no dispone de Java, muchas aplicaciones de escritorio y sitios web no funcionarán.

Tutorial

Para mayor comprensión de cada concepto, los invito a ver el siguiente video:

Presentaciones

Si deseas tener la información presentada en el video, puedes descargarla de los siguientes links:

Introducción al curso | Conceptos básicos

Entre los estilos y diseños más vistosos hemos encontrado el efecto Parallax, como hemos visto en artículos anteriores (Orientación en diseño Web: Parallax) este efecto se enfoca a una animación al hacer scrolling, podemos ver como los elementos de una pagina con efecto Parallax se mueven a velocidades distintas, con trayectorias, incluso los elementos del sitio se pueden mover al mismo tiempo cuando movemos el mouse sobre él.

El Parallax nos ofrece muchos efectos, y claro todo depende de la creatividad del diseñador para que el sitio sea atractivo para el usuario, pero ¿qué pasa con el codigo o como podemos hacerlo?, bueno en este post te ofresco algunas librerias de JavaScript para que puedas hacer un efecto Parallax de manera sencilla, también cada librería nos ofrece efectos distintos y bastante atractivos.

Cabe mencionar que cada librería o al menos la mayoría de ellas las tendrás que descargar de GitHub nada complicado, entrando un poco a detalle debemos estar conscientes que cada una de estas librerías tiene sus propias funciones y animaciones como ya fue mencionado anteriormente, ahora si, sin más detalles por mencionar y aclarar te dejo los enlaces de cada una de ellas para que las veas en acción, las descargues y las implementes en tus diseños web.

Wagerfield Parallax.js