Re-creation of the onboarding sequence of the app "Service" See how it was done step-by-step in the on-boarding webinar: http://docs.proto.io/videos/creating-great-on-boarding-experiences-with-proto-io/ The app itself: https://itunes.apple.com/us/app/service/id1005945537?mt=8

3 prototypes showing different uses of the form components for iOS 1) Activate / de-activate button when checking / un-checking Terms of Service 2) Capture text input to change property 3) Change number of tickets - limit 8 See how they were created step-by-step in the Using Forms webinar video: https://vimeo.com/118919393 This version on Vimeo includes time-codes so you can jump to particular sub-sections (repeated below as a preview): > Range of iOS form input controls 2:02 > Labels 2:17 > Text fields 2:32 > Setting placeholder text 3:04 > 5 Input Types that display the appropriate iOS keyboard (Text, Numeric, Email, Password, Telephone) 3:30 > Using the Telephone keyboard for credit card number input (large # keys) 4:08 > Need to view prototype on device in order to see the range of keyboards 5:59 > Multi-line text area input field 6:24 > Search Bar 6:40 > Checkbox control customization 7:22 > On/Off Switch control customization 7:52 > Slider control customization 9:27 > Increasing size of slider handle 9:47 > Picker Wheel Customization 10:00 > Prototype example: Activate button when checking terms of service 10:42 > Create a button with two states (using convert to container) 12:55 > Adding interactions to a checkbox control (on change activation/deactivation) 14:45 > Definition of variable and range of uses 17:04 > Using variables with text field interactions 18:25 > Prototype Example: Using a variable to capture text input and show it in a different text box using change property. 23:27 > Prototype: Use variables to increment and decrement counter showing number of tickets being purchased. 28:40 > Searching full range of icons built into Proto.io 29:10 > Using a variable to limit the range of tickets (0 to 8) 32:46 > Copying and pasting interactions with Variables 40:08

Here is the set of prototypes from the Pro Tips and Tricks webinar: 1) Propagate Events to Items Below 2) Containers as Symbols 3) Conditional Animation 4) Screen Interaction 5) Sketches into Prototype Here is the video of the webinar: http://docs.proto.io/videos/pro-tips-tricks/ The video is broken down with time-codes on Vimeo here: https://vimeo.com/103316955 (under read more) They are also below. Enjoy... > Create popover menu with click through to icon below 4:08 > Propagate all events to the item below 4:08 > Using containers as symbols for efficiency (navigation assets etc.) 11:59 > Customizing a navbar component 14:55 > Customize a tabbar component 16:48 > Convert navbar to a container to repeat (as symbol) 19:10 > Convert tabbar to a container to repeat (as symbol) 19:43 > Convert text box to a container to repeat (as symbol) 19:49 > Using a container to create change font style for repeated Titles and labels. 21:55 > Conditional animations triggered by drag gesture using variables (mailbox swipe). 23:04 > Adding containers to canvas 24:44 > Using the draggable gesture 25:25 > Variable Manager 26:00 > Using onDrag variable to change an objects opacity 26:38 > Range of property values that can be changed based on a drag gesture 27:45 > Capturing the X position from dragging an object using a variable 27:57 > Creating a new value if/then argument using shorthand javascript to change opacity using a variable. 29:00 > Creating a callback to the change a property that reads from a variable. 29:52 > Using the onDragEnd gesture 30:33 > Change the Left property using a variable triggered by onDragEnd 30:49 > See range of properties that can be changed from onDragEnd gesture. 31:04 > Using On Screen Show Interaction for creating an automatically cycling carousel. 35:25 > Importing paper sketches (photos of them) to use as background for layering assets and interactions. 40:28 > Toggling between a sketch and your higher fidelity mockup using states. 44:25 > Duplicating interactions between states 45:18

Try it: rotate the circle with your finger (goes from 14 - 28) Help needed: play "tock" sound ONLY when temperature changes (every 30 degrees)

Find diet and health recipes.

Los celíacos son intolerantes a los productos alimentarios que contienen gluten, y consumirlo aunque sea en pequeñas cantidades les reporta malestar y dolor. Pero es difícil no consumirlo porque está presente prácticamente en todos los productos elaborados, en supermercados y en restaurantes. Los intolerantes y/o alérgicos alimentarios se sienten a menudo estigmatizados en el ámbito social. Es cierto que cada vez hay más información al respecto y muchos locales de restauración, proveedores y comerciantes tienen más conciencia de la importancia de este tema. Aún así, es bastante difícil poder llevar una vida social “normal”, o al menos equiparable a la de una persona sin intolerancias o alergias alimentarias. Para poder convivir con la celiaquía, se debe seguir una dieta sin gluten de por vida. Conocer sus pautas e implementarlas lleva un proceso de adaptación en el que no siempre es fácil o rápido el acceso a información fiable. Además, la dieta sin gluten a menudo implica comida más insulsa, complicada de elaborar y mucho más cara que los productos de consumo estándares. En la investigación de este proyecto, se apreció la necesidad de una plataforma que recogiera recetas de cocina sencillas, sanas, basadas en productos naturales que no impliquen un gasto extraordinario, apetitosas y adaptadas a personas con intolerancias y/o alergias alimentarias. Así es como nació SINMIGAS. SINMIGAS es una aplicación creada para ayudar a las personas con alguna intolerancia y/o alergia alimentaria a desestigmatizar su dieta y equipararla a la de una persona sin intolerancias. La aplicación contiene una recopilación de recetas de cocina para todo tipo de consumidores y que aporta dos novedades importantes respecto al resto de aplicaciones. Por un lado, permite filtrar las recetas por alérgenos que no quieres que estén presentes en tu plato. Por otro lado, también se puede filtrar por vitaminas o minerales que quieres que estén presentes, debido a la falta de éstas en las restrictivas dietas. EL proyecto SINMIGAS es en sí una herramienta de uso diario y una campaña de concienciación, que busca dar a conocer el problema de los alérgicos o pacientes con intolerancias alimentarias mediante una propuesta en la que integra, de forma equitativa, tanto a afectados como a no afectados por estas patologías. Alergias alimentarias, intolerancias alimentarias, gluten, concienciación, diseño audiovisual, app, UX, UI.

Type the first character of topics from http://uxofvr.com to see the auto-complete. (a-z, 2,3). Use ESC to hide the dropdown. Uses a variable to capture the content of the search field then uses the javascript method "{search}".charAt(0) to capture the first character of the search string to then change the container state property of the auto-complete dropdown to match the first character typed. see video of how to create this step-by-step in the webinar: https://support.proto.io/hc/en-us/articles/115001243532-Model-advanced-prototypes-that-use-variables TAGS: auto-complete search dropdown variables variable character selection Thanks to Costas Thoma for the model.