Acerca de mi

• Ingeniero de Sistemas
• +5 años de experiencia
• Web developer
• FrontEnd, Backend
• Developer at StreamlineSocial
• SUDO co-founder

Qué es Ionic?

Características

• Desempeño
• Bonito Diseño
• Múltiples componentes
• Poderoso CLI

Stack de tecnologías

Componentes

Listas

<ion-list>
    <ion-item>
        Battletoads
    </ion-item>
    <ion-item>
        Contra
    </ion-item>
    <ion-item>
        Duck Tales
    </ion-item>
    <ion-item>
        Mega Man
    </ion-item>
    <ion-item>
        Metroid
    </ion-item>
    <ion-item>
        The Legend Of Zelda
    </ion-item>
</ion-list>

Listas Complejas

<ion-list>
    <ion-item class="item-avatar item-icon-right" 
        ng-repeat="current in characters">
        <img src="{{ current.avatar }}">
        <h2>{{ current.name }}</h2>
        <p>{{ current.description }}</p>
        <i class="icon ion-ios-arrow-right"></i>
        <ion-option-button class="button-stable">
            Edit
        </ion-option-button>
        <ion-option-button class="button-assertive">
            Delete
        </ion-option-button>
    </ion-item>
</ion-list>

Cards

<div class="list card">
    <div class="item item-avatar">
        <img src="img/solid_snake.png">
        <h2>Solid Snake</h2>
        <p>November 05, 1972</p>
    </div>
    <div class="item item-body">
        <img class="full-image" src="img/metal_gear_solid.jpg">
        <p>
            Lorem ipsum dolor sit amet
        </p>
        <p>
            <a href="#" class="subdued">1 Like</a>
            <a href="#" class="subdued">5 Comments</a>
        </p>
    </div>
    <div class="item tabs tabs-secondary tabs-icon-left">
        <a class="tab-item" href="#">
            <i class="icon ion-thumbsup"></i>
            Like
        </a>
        <!-- ... -->
    </div>
</div>

Menu

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>
  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Menu</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close ng-click="login()">
          Login
        </ion-item>
        <!-- ... -->
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

SlideBox

<ion-slide-box>
    <ion-slide>
        <div class="box blue">
            <h1>BLUE</h1>
        </div>
    </ion-slide>
    <ion-slide>
        <div class="box yellow">
            <h1>YELLOW</h1>
        </div>
    </ion-slide>
    <ion-slide>
        <div class="box pink">
            <h1>PINK</h1>
        </div>
    </ion-slide>
</ion-slide-box>

Como comenzar

.
├── bower.json
├── config.xml
├── gulpfile.js
├── hooks
├── ionic.project
├── package.json
├── plugins
├── scss
│   └── ionic.app.scss
└── www
    ├── css
    │   └── style.css
    ├── img
    │   └── ionic.png
    ├── index.html
    ├── js
    │   ├── app.js
    │   └── controllers.js
    ├── lib
    │   └── ionic
    │       
    └── templates
        ├── browse.html
        ├── login.html
        ├── menu.html
        ├── playlist.html
        ├── playlists.html
        └── search.html

Generar una aplicación

Ejecutar la aplicación

Compilar

Muchas Gracias