Changella

Community to encourage student entrepreneurs to dream, design, make, and learn

Simon Sinek: How Great Leaders Inspire Action

Image from https://twitter.com/AngelaMaiers/status/230334473017884673/photo/1

Why should we communicate starting with “WHY?”

  1. In the context of leading, the average presentation can spend a lot of time down in the details.   The inspired teachers and leaders talk about why they believe a particular lesson is important.   This can also help leaders to discover common ground with the audience.
  2. By encouraging yourself to start with “WHY”, you can start to find wasteful activity.   If a task or lesson does not create value, why should I do it?
  3. The question of “WHY” is often related to the question of personal mission.   How does this lesson or task fit into my personal mission of life?   If my daily activities do not line up with my life mission, what can i do to change it?
  4. I love Simon Sinek’s comment on Martin Luther King Jr.    Martin Luther King gave the “I have a dream” speech.   He did not give the “I have a plan” speech.
  5. The world needs your inspiration.
The following talk by Simon Sinek has been a great inspiration to me.

Abstract: Simon Sinek presents a simple but powerful model for how leaders inspire action, starting with a golden circle and the question “Why?” His examples include Apple, Martin Luther King, and the Wright brothers — and as a counterpoint Tivo, which (until a recent court victory that tripled its stock price) appeared to be struggling.

 

What is your passion?  What inspires you to make and create?\

 

Top Posts On Changella

 

 

How to Build Your Mobile App using HTML

Are you looking for an easy way to get started building mobile apps?   In this post, I would like to introduce you to a tool called JQuery Mobile that empowers you to craft mobile applications using HTML and a little bit of JavaScript.   This free tool builds upon the strengths of the jquery programming community who do a solid job of creating fun and well documented programming tools.

JQuery mobile works well in the following cases:

  1. Information apps: The application that you’re building is informational in nature.   If you’re trying to build a game or the next “Angry Birds,”  Jquery mobile is not a good fit.   This tool works well if your creating e-books, apps for conferences, promoting a band, or capturing information using simple forms.
  2. It’s just HTML: Learning Objective C or Java can be intimidating to people just learning how to program.   I greatly appreciate that JQuery mobile provides a solid place to start for novice app builders.
  3. Get started at no cost: What do you need to get started? A text editor, a web browser, and your creativity.  (notepad++, textwrangler for Mac, etc.)

In the following code sketch, I will outline how to create a simple application.   The app will show you how to create buttons on a list view, create a pop-out window, include text and images, and enable your users to navigate from one page to another. If you need training on HTML or JavaScript, please visit CodeAcademy.com for additional teaching.

In this  example, we will build a simple app to help promote a group or club.   It will consist of four pages: home, events, contact us, and news.   These pages will look something like this when we’re done. You can also check out a demo at this link.

Home screen

Home page

Contact us page

Events page

Events page

For a comprehensive introduction to JQuery Mobile, please visit http://learn.jquery.com/jquery-mobile/getting-started/

The HTML to create this small application is shown below.  How does this code work?

 

 

 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
&nbsp;
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<div data-role="page">
<div data-role="header">
<h1>My Group App</h1>
</div>
&nbsp;
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="true">
    <li><a href="#events">Events</a></li>
    <li><a href="#contact_us" data-rel="dialog">Contact us</a></li>
    <li><a href="#news">News</a></li>
</ul>
<img style="padding: 10px;" src="img/student_group_pic.jpg" alt="" align="left" /> Etiam a lorem id nisl porttitor scelerisque sed vitae dolor. Nunc gravida leo quis dolor pretium sed eleifend nisl commodo. Cras id imperdiet tortor. Sed convallis massa vel sapien ullamcorper convallis. Vivamus elit odio, suscipit quis adipiscing at, dignissim interdum arcu.

</div>
&nbsp;
<div data-role="footer">
<h4>Look forward to seeing you soon!</h4>
</div>
&nbsp;

</div>
&nbsp;
<div id="contact_us" data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1>My Group - Contact us</h1>
</div>
&nbsp;
<div data-role="content"><img src="img/student_group_pic.jpg" alt="" />
<h3>Contact Us</h3>
Etiam a lorem id nisl porttitor scelerisque sed vitae dolor. Nunc
gravida leo quis dolor pretium sed eleifend nisl commodo. Cras id
imperdiet tortor. Sed convallis massa vel sapien ullamcorper
convallis. Vivamus elit odio, suscipit quis adipiscing at, dignissim
interdum arcu.
<ul>
    <li>Mary Jane -- President -- <a href="#">E-mail</a></li>
    <li>John Smith -- Vice President -- <a href="#">E-mail</a></li>
    <li>Simon Flat -- Communications -- <a href="#">E-mail</a></li>
</ul>
</div>
&nbsp;
<div data-role="footer">
<h4>Look forward to seeing you soon!</h4>
</div>
&nbsp;

</div>
&nbsp;
<div id="events" data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1>My Group - Events</h1>
</div>
&nbsp;
<div data-role="content">
<h3>Events</h3>
<ul>
    <li>Event 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Event 2: Quisque ut metus eu leo interdum volutpat.</li>
    <li>Event 3: Vestibulum accumsan erat vitae leo imperdiet faucibus.</li>
</ul>
</div>
&nbsp;
<div data-role="footer">
<h4>Look forward to seeing you soon!</h4>
</div>
&nbsp;

</div>
&nbsp;
<div id="news" data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1>My Group - News</h1>
</div>
&nbsp;
<div data-role="content">
<h3>News</h3>
<ul>
    <li>News 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>News 2: Quisque ut metus eu leo interdum volutpat.</li>
    <li>News 3: Vestibulum accumsan erat vitae leo imperdiet faucibus.</li>
</ul>
</div>
&nbsp;
<div data-role="footer">
<h4>Look forward to seeing you soon!</h4>
</div>
&nbsp;

</div>
&nbsp;

&nbsp;

&nbsp;

In the HEAD of the document, we include JavaScript code references that enable JQuery mobile to function. JQuery mobile tries to use standard HTML structures to enable you to craft mobile user interfaces. If you removed these code references, you will notice that the web page reverts to standard web browser rendering rules.

&nbsp;

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
&nbsp;
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>

To create a button that moves the user from the home screen to the “Events” page, use the following code. The “#events” string corresponds to the “id” attribute of the page “events”. To see an example of opening a dialog box, look at the “#contact_us” link to see how that was done.

<ul>
    <li><a href="#events">Events</a></li>
</ul>

The following code is responsible for creating the “Events” page in the application. The code sets the header, footer, and content of the page. The content of a JQuery mobile page is just HTML. To make it easier for the user to return to the home screen, I added the “data-add-back-btn” attribute and set it to true.

<div id="events" data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1>My Group - Events</h1>
</div>
&nbsp;
<div data-role="content">
<h3>Events</h3>
<ul>
    <li>Event 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Event 2: Quisque ut metus eu leo interdum volutpat.</li>
    <li>Event 3: Vestibulum accumsan erat vitae leo imperdiet faucibus.</li>
</ul>
</div>
&nbsp;
<div data-role="footer">
<h4>Look forward to seeing you soon!</h4>
</div>
&nbsp;

</div>
<!-- /page -->

So… How do you make this HTML app available in the Android or iOS app store? Check out our post introducing PhoneGap.

Let me know if you have any questions or comments!

Related posts: