Foto del autor Osledy Bazo

Audio - Edicion de Caracas Game Jam 2018

Ciro Durán desarrollador de videojuegos y Jorge Veloso diseñador gráfico, conversaron con César Miguel Rondón y Luis Carlos Díaz, acerca del Caracas Game Jam, que es uno de los eventos anuales más emocionantes para los desarrolladores de videojuegos , el cual se llevo a cabo el 26 a 28 de enero.

Este evento se lleva haciendo cada año desde 2009, el Caracas Game Jam ha reunido a programadores y artistas y los ha convertido en desarrolladores de videojuegos en tan solo un fin de semana.

Puede escuchar el audio aquí, en el Circuito Éxitos.

Puedes escucharlo aqui: http://exitosfm.com/edicion-caracas-game-jam-2018/

Foto del autor Dulce Ramos

Cómo iniciarse en el diseño web

El mundo del diseño web es grande y diverso tanto en herramientas como en el proceso de diseño y desarrollo. No existe una fórmula específica que te diga estos son los únicos pasos a seguir, hay que tener la mente abierta como citaba Albert Einstein “la mente es como un paracaídas… Solo funciona si la tenemos abierta”. Es decir, puedes iniciarte en el diseño web, según el camino que se te haga más práctico.

Sin embargo, ¿cómo iniciarte en algo, sin comprender los conceptos básicos? Pues, en este post podrás conocer los términos básicos del diseño web para que puedas tener un mejor dominio de los conceptos claves que muy seguramente emplearás.

Secciones:

  • Conceptos básicos del Diseño web que deberías conocer
  • Consideraciones sobre el diseño web
  • ¿Qué tipo de web debo diseñar para empezar en los diseños web?
    • Bosquejo de la web, WIREFRAME
    • Estructura de navegación de la web: piramidal, en ramificaciones. ¿Cuál es el más adecuado?

Conceptos básicos del Diseño web que deberías conocer

W3C: World Wide Web Consortium, es una comunidad internacional responsable de desarrollar y fijar los estándares de la Web. Fue fundada por el inventor de la Web Tim Berners-Lee.

WWW: World Wide Web es la red mundial de informática, donde interactúan elementos interconectados y accesibles desde la interconnection networks (Internet).

Wireframe: esquema de un plano de pantalla, en donde se detalla la ubicación de los elementos de una web.

Hipervínculo: enlace que permite acceder a otra página web o a diferentes recursos dentro de una misma página.

Página web: son documentos o elementos básicos de la WWW que funcionan con hipervínculos.

Sitio web: conjunto de páginas web relacionadas, que comparten un mismo dominio o subdominio.

Dominio: nombre único que identifica a una web. Ejemplo de nombre de dominio: youtube.com

Subdominio: serie de caracteres o palabra que funciona como anexo de un dominio. Ejemplo: blog.andy21.com, en este ejemplo el subdominio es blog y el dominio andy21.com.

Responsive design: enfoque orientado al diseño y desarrollo de sitios web que se adapten al tamaño de la pantalla y plataformas.

Favicon: imagen de pequeñas dimensiones (por lo general, 16x16) asociada a un sitio web. Se ubica en la pestaña de un sitio web en cualquier navegador.

URL: Uniform Resource Locator representa la dirección de un sitio web en internet.

Front -End: es la parte de una aplicación web que interactúa con los usuarios.

Back -End: es la parte de una aplicación que procesa las entradas o peticiones realizadas por el usuario desde el front-end.

Servidor: aplicación que recibe y responde a las peticiones (solicitudes) de otra aplicación (cliente).

Cliente: en informática es una aplicación que usa y se conecta a recursos de un servicio remoto conocido como servidor.

HTML: lenguaje básico de la web, cuyas siglas en inglés corresponden a Hyper-Text Markup Language, en español, lenguaje de marcas de hipertexto.

Hipertexto: tecnología que agrupa información por medio de enlaces, cuyo uso permite acceder a la información que se encuentra dentro de dichos enlaces.

Consideraciones sobre el diseño web

¿Qué tipo de web debo diseñar para empezar en los diseños web?

Existen dos grandes tipos de web: estáticas y dinámicas.

Las web estáticas, presentan una estructura que no varía mucho en su contenido constantemente (¡OJO!: estático no quiere decir que no se puedan incluir animaciones en la web), están hechas principalmente en lenguaje HTML, no poseen conexión a bases de datos y su tiempo de desarrollo es relativamente corto. (Ejemplo de una web estática diseñada por la empresa LUISROC: http://www.azimutglobal.com/es/ )

“Las web estáticas son ideales para la construcción de sitios que muestran información básica de una empresa o persona que desee tener presencia en la web”

Por su parte, las web dinámicas requieren mayores conocimientos de programación y base de datos, ya que no solamente están desarrolladas en HTML, sino que pueden incluir otros lenguajes de programación, constantemente requieren modificaciones en su contenido y conexión a base de datos. Por ello, llevan mayor tiempo de desarrollo. (Ejemplo: https://www.provincial.com/ )

“Algunas web dinámicas incluyen un panel de control CMS (Content Management System)”

Esta clasificación responde a la forma en como se construye una web, sin embargo, si decides ampliar tus conocimientos en el diseño encontrarás que hay otros criterios para clasificar a las web como por ejemplo, las que se desarrollan según su intención (Ej.: e-commerce o transaccionales, blog)

Bosquejo de la web, WIREFRAME

Antes de ir directamente a echar código, es recomendable realizar un bosquejo de la web para tener una idea clara de cómo quieres que este organizada.

Para ello, puedes hacer uso de un wireframe. Hay aplicaciones online como: Lovely Charts (tiene una versión gratis y una profesional que si es paga) y Pencil Project, donde puedes crear wireframes. También esta la opción que lo hagas tu mismo en papel o en digital con la herramienta gráfica de tu preferencia.

Estructura de navegación de la web: piramidal, en ramificaciones. ¿Cuál es el más adecuado?

“La estructura de navegación es un aspecto muy importante, aquí se debe tener en cuenta la practicidad del sitio en función del usuario que va a visitar el sitio web”

De acuerdo con el libro Studio MX: creación de sitios web de TOM GREEN; JORDAN L. CHILCOTT; CHRIS S. FLICK (2003), existen 4 tipos de estructuras de navegación web:

Lineal

Su navegación es lineal, empezando su recorrido desde la página de inicio hasta la página final.

Jerárquica

Todo parte de una página raíz que da la bienvenida al usuario, y de ahí parte a diferentes secciones del sitio.

Cada sección posee enlaces a otras páginas creando así distintos niveles o jerarquías

Radial

Presenta páginas derivadas de una página principal, que no tienen enlaces entre sí más si uno hacia la principal.

Red

Todas las páginas se relacionan entre sí

Foto del autor Osledy Bazo

Curso gratuito - Advanced React.js Patterns

Inside the paid Advanced React.js course are lectures on various advanced React.js component patterns. We've pulled them out into their own free course here.

These videos represent only about 20% of the advanced course.

Deepen your understanding by enrolling in the full Advanced React.js course. You'll gain access to hands-on, real-world exercises and detailed video solutions, you'll also learn to reimplement the two most popular libraries in React: React Redux and React Router.

Start Imperative vs. Declarative, "extending" React (18:35)
Start Implicit State with Compound Components and cloneElement (34:51)
Start Implicit State with Compound Components and Context (10:17)
Start Explicit State with Higher Order Components (15:55)
Start Explicit State with Render Props (11:44)
Start Controlled Custom Components (19:18)

https://courses.reacttraining.com/p/advanced-react-free

Foto del autor Osledy Bazo

Plantilla para hacer un buen README.md

Como siempre el gran Andrés Villanueva dando aportes a la comunidad de programadores en Venezuela.

Andrés Villanueva ha creado un Readme.md Basico para que agregues a tus proyectos, el mismo tiene los datos básicos que debería tener cualquier proyecto o libreria, para guiar al usuarios en su uso. Si eres muy [email protected] para inventarte algo, sigue este template y listo.

https://gist.github.com/Villanuevand/6386899f70346d4580c723232524d35a