100 %
0 %
Information about Volunteer.rb

Published on March 6, 2014

Author: KorabHoxha

Source: slideshare.net


Zakat project for Sfera.

Casestudy 1.0 Improving the Front-End Development of Innovatin Process

Dynamic models UI Interface Bootstrap 3 Less.css Ember.js Yeoman OpenStreetMap Elastic Search Why search is very important? Our main feature Index Filters Tags Single Page Autocomplete Components

Dynamic models Bootstrap 3 /getbootstrap.com/ Bootstrap was created at Twitter in mid-2010 by @mdo and @fat. Prior to being an open-sourced framework, Bootstrap was known as Twitter Blueprint. A few months into development, Twitter held its first Hack Week and the project exploded as developers of all skill levels jumped in without any external guidance.

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works: Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding. Use rows to create horizontal groups of columns. Content should be placed within columns, and only columns may be immediate children of rows. Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts. Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .row Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.

Extra small devices Phones (<768px) Class prefix .col-xs- Small devices Tablets (≥768px) Class prefix .col-sm- Medium devices Desktops (≥992px) Class prefix .col-md- Large devices Desktops (≥1200px) Class prefix .col-lg-

Dynamic models Less.CSS /lesscss.org/ Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

Less Example @base: #f938ab; .box-shadow(@style, @c) when (iscolor(@c)) { -webkit-box-shadow: @style @c; box-shadow: @style @c; } .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { .box-shadow(@style, rgba(0, 0, 0, @alpha)); } .box { color: saturate(@base, 5%); border-color: lighten(@base, 30%); div { .box-shadow(0 0 5px, 30%) } }

Selectors & URLs // Variables @mySelector: banner; // Usage .@{mySelector} { font-weight: bold; line-height: 40px; margin: 0 auto; } // Variables @images: "../img"; // Usage body { color: #444; background: url("@{images}/white-sand.png"); }

Dynamic models Ember.JS /emberjs.com/ Ember.js is an open-source client-side JavaScript web application framework based on the model-view-controller (MVC) software architectural pattern. It allows developers to create scalable single-page applications by incorporating common idioms and best practices into a framework that provides a rich object model, declarative two-way data binding, computed properties, automatically-updating templates powered by Handlebars.js, and a router for managing application state.

Basic Concepts Routes The router is a core concept of Ember, emphasizing the importance of the URL in managing application state. A route object corresponds to a URL and essentially serializes the application's current state. Routes are defined in the singleton Router object. Models Every route has an associated model, containing the data associated with the current state of the application. While one can use jQuery to load JSON objects from a server and use those objects as models, most applications use a model library such as Ember Data to handle this. Controllers Controllers are used to decorate models with

Basic Concepts display logic. A controller typically inherits from ObjectController if the template is associated with a single model record and ArrayController if the template is associated with a list of records. Templates Templates are written with the Handlebars templating language to describe the user interface. Templates are used to build the application's HTML and embed dynamically-updating expressions. Views Views are used to add sophisticated handling of user events, custom graphics not made with CSS, JavaS- cript animations, or reusable behavior to a template. Components Components are a specialized view for creating custom elements that can be easily reused in templates. The Ember Components implementation conforms as closely as possible to the W3C Web Components specification.

Dynamic models Yeoman /yeoman.io/ With so many great tools available to front-end web developers these days it can sometimes be difficult to understand how they all fit together. Deciding on a workflow that you’re happy with is often a very personal endeavour, but getting started isn’t always easy. Yeoman aims to solve this problem by scaffolding workflows for creating modern webapps, while at the same time mixing in many of the best practices that have evolved within the industry.

Yoman Generator A complete workflow might look like this: yo webapp # scaffold out a skeleton web app project bower install underscore # install a dependency for your project from Bower grunt # build the application for deployment Or with the AngularJS generator: npm install -g generator-angular # install generator yo angular # scaffold out a AngularJS project bower install angular-ui # install a dependency for your project from Bower grunt test # test your app grunt serve # preview your app (formerly `grunt server`) grunt # build the application for deployment

Yoman Generator

Dynamic models OpenStreetMap /openstreetmap.org/ OpenStreetMap is built by a community of mappers that contribute and maintain data about roads, trails, cafés, railway stations, and much more, all over the world. OpenStreetMap's community is diverse, passionate, and growing every day. Our contributors include enthusiast mappers, GIS professionals, engineers running the OSM servers, humanitarians mapping disaster-affected areas, and many more. To learn more about the community, see the user diaries, community blogs, and the OSM Foundation website.

Why OpenStreetMap?

Data Matters OpenStreetMap Google Map

Dynamic models ElasticSearch /elasticsearch.org/ Elasticsearch is rapidly becoming the world’s most popular open source search solution. With Elasticsearch embedded as a part of mission-critical production environments, we’re now providing reliable and scalable support and professional services. To give our customers unmatched support, the core engineering team that built and maintains our open source search engine is the same team training and consulting customers in various phases of the development and deployment cycles.


Serach Dashboard Logstash Search Know what users are looking for.

And yes ... Github

User Interface Layout preview of Search Box

Why search is very important?

Our main feature What you can give Write things that you want to give for zakat.

Index Use words to search or separate them by tags.

Filter Filter Query by Price range.

Tags Filter Query by Tags.

Navigation Navigation search box

Autocomplete Use geo location to calculate places away from you.

Components dropdowns, input groups, navigation, alerts, and much more

Thank you.

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Get Involved and Help Save a Child Every Minute!

Whether you get involved in an existing activity or develop an innovative idea of your own, the choice is up to you. Just check off any activities below ...
Read more

Volunteer | RB Beach Glass

Posts about Volunteer written by rbbeachglass ... RB Beach Glass #21 comes with a few more helpful hints than normal. This piece is hanging.
Read more

Volunteer | RB United

Volunteer. Interested in getting more involved in the Rancho Bernardo community by volunteering? To volunteer with RB United’s own volunteer programs ...
Read more

RB United | Community Foundation

RB United enables individuals and groups, working together, to collaborate on projects that benefit the North County Inland community. RB United is ...
Read more

Rancho Bernardo (San - Volunteer

Volunteer; RB Rotary Foundation; Contact; My RB Rotary; Volunteer. Service Project Announcements . The club will be serving dinner at Ronald McDonald House ...
Read more

Derrell Scott to Tennessee: Volunteers Land 4-Star RB ...

Derrell Scott to Tennessee: Volunteers Land 4-Star RB Prospect By Patrick Clarke, Correspondent Jan 27, 2014. Share; Tweet; Next ARTICLE ...
Read more

Volunteer RB training by Megan Kiesel on Prezi

Make your likes visible on Facebook? Connect your Facebook account to Prezi and let your likes appear on your timeline. You can change this under Settings ...
Read more

Hospital volunteering - Royal Brompton & Harefield NHS ...

Volunteering should work for you as well as us, which is why we value volunteers, offering them support and training, ... Volunteer | rb&hArts | Contact us |
Read more

Volunteer: Charity Shop Volunteer (RB) Job at Do-it Trust ...

Volunteer Trustees Needed for Mid Sussex Charity - Kangaroos - Fun Disability Clubs Reach Volunteering Haywards Heath, ENG, GB
Read more

Volunteer: Victim Support Volunteer (RB) Job at Do-it ...

Volunteer Cancer Home Support Volunteer (RB) Do-it Trust Redhill, GB. Posted 9 days ago. Sponsored. Volunteer Group Support Volunteer, Burgess Hill Do-it Trust
Read more