My girlfriend and me usually travel a lot as backpackers, we love to spend our time meeting new places, cultures and people. Our philosophy is to be integrated as much as possible in those new places, so instead of pay an agency to do everything for us and go with a tourist group, we (she) prepare the whole trip in a reasonable and affordable way, so it means the name of her blog “Viajes pa Tiesos” xD She is writing (in Spanish) really nice posts about our awesome travels, you can have maps, schedules, prices, transports and so on, or just read the summary, as you like. The idea is to share our experiences helping others with worthy information.
Here is her first post: London
Helios Torch
/in App, Design/by GénesisMaterial app for setting the intensity and area of light. It acts like a torch, the area where you are walking is lighting up.
In this image there are two different versions, the one I full developed is at the right side. All the interaction are reflected in the circle (area/intensity of light) and you can pan and pinch with your fingers in any part of your smart phone screen xD.
Helios Torch is a class of Helios sensor. All sensor are included and automatic detected in the Helios Sensor full app.
Designing a Material flat logo for an app
/in Design/by GénesisWhen I have to design a new logo for one of my apps, I try to create something with a background, with a meaning instead of an abstract logo without significant (it’s easier to keep in mind and get used to). I usually get the inspiration from natural objects and then I finish my design using vector graphics in a minimalistic way. If there is a hardware related with control of the app I use it as a base, if not I just create a new object that represent the app’s functionality as easy as possible.
Circle area defined by mouse click and going further with Hammer.js events
/in CSS3, JavaScript/by GénesisIn the first example we are going to define the area of a circle depending on where we click within a box area. We can handle this using JavaScript events, a little bit of basic maths and CSS.
In the second example we are going to define the area using Hammer.js which helps us to add support for touch and muti-touch gestures. In this case you can pinch in and pinch out with your fingers to define the area (you can use an horizontal pan as well) and you can do a vertical pan movement with your finger to change the saturation of the circle.
If you are in a multi-touch device you can pinch and pan with your fingers, if not use horizontal and vertical pan with your mouse. The events will be catched inside and outside of the black box.
Editable Selection Box
/in CSS3, HTML5, JavaScript/by GénesisThere is not any specific HTML tag to let you edit and select, we just have input tags and select tags but we can combine them and even more we can define our own icon/button for the select box. The trick here is to launch an event to show up our options from our hidden selection box.
You can adjust the options style, however in mobile apps the select options will be shown by an internal widget of the system.
Updated: you can use an input list with its datalist (Autocomplete dropdown)
Viajes Pa Tiesos a new blog for travellers
/in Design/by GénesisMy girlfriend and me usually travel a lot as backpackers, we love to spend our time meeting new places, cultures and people. Our philosophy is to be integrated as much as possible in those new places, so instead of pay an agency to do everything for us and go with a tourist group, we (she) prepare the whole trip in a reasonable and affordable way, so it means the name of her blog “Viajes pa Tiesos” xD She is writing (in Spanish) really nice posts about our awesome travels, you can have maps, schedules, prices, transports and so on, or just read the summary, as you like. The idea is to share our experiences helping others with worthy information.
Here is her first post: London