Campuswoch 2012 - FH Bocholt - develop4mobile



develop4mobile

Nachdem ich selber als Student teilnehmen konnte - durfte ich jetzt als Coach mein Wissen teilen.

Kurze Beschreibung

Titel: "develop4mobile"

Projektbeschreibung:
 „Softwareentwicklung für mobile Geräte mit Enterprise Technologien? - Hört sich komplizierter an, als es ist!“

In diesem Projekt werden wir alle Schritte von der Ideenfindung über die Planung und Entwicklung bis hin zum Test und Deployment gemeinsam erarbeiten.

Wir werden abhängig von Euren Interessen und Fähigkeiten gemeinsam Aufgaben definieren, verteilen und realisieren.

Dies beinhaltet z.B. Konzeption, Inhalt und Aufbau von Lösungen, Front End Design, Backend Entwicklung und Deployment. Dazu brauchen wir motivierte Leute mit verschiedenen Fähigkeiten und Interessen, die Spaß haben, etwas Neues auszuprobieren.

Wir werden einen Mix aus verschiedenen Technologien und Tools verwenden: Java, JavaScript,  FreeMind, JDeveloper oder Eclipse und einige andere freie Tools (beispielsweise zum Ideen sammeln, Erstellen von Logos, Fragen für einen Quiz?, zum Verteilen von Aufgaben, Programmieren und Bereitstellen der Software).

Als Ergebnis könnte ein IRC (chat) Client, ein ultimativer wiederverwendbarer Quiz oder etwa ein Tamagotchi für mobile Endgeräte (von Android bis iPhone) entstehen (etwas zum Mitnehmen). Gerne dürft Ihr auch Eure eigenen Ideen mit einbringen. Hauptsache es macht Spaß.

Durch deklarative und intuitive Ansätze gepaart mit Wiederverwendbarkeit werden dem Entwickler viele Schritte abgenommen und es werden schnelle Ergebnisse erzielt. Dies werden wir ausprobieren.

Vorkenntnisse werden nicht benötigt –sind aber sinvoll
Was Ihr mitbringen solltet: 
  • Ein Smartphone/-Tablet inkl USB-Kabel
  • Einen guten Laptop zur Entwicklung
  • Etwas zum Schreiben
  • Motivation, Spaß und coole Ideen
Bei Fragen oder Anregungen im Vorfeld könnt ihr Euch gerne auch an mich wenden.
Christof.Kaller@gmail.comgmail.com. Als Referent stehe ich Euch während des ganzen Projektes auch für Fragen aus dem Alltag eines „IT-Consultant“ in einem renommierten Systemhaus gerne zur Verfügung.

 
Teilnehmeranzahl: 8-10


Bilder findet ihr hier:
https://campuswoche.de/bilder/bilder-2012/

Ein kurzes Video anderer Projekte findet ihr hier:
https://youtu.be/H3snYosO9UI
https://youtu.be/KLcR7a8gLxg

Einführung in PhoneGap

<html>
  <head>
 

    <title>PhoneGap -Campuswoche 2012</title>
    <script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js">
    </script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js">
    </script>

    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title">

  </head>
  <body onload="init();" id="stage" class="theme">
 
      <div data-role="header">
        <div  ></div><a href="index.html#home" data-icon="back">Zur&uml;ck</a>
        <h1>Campuswoche 2012</h1>
        <center>
          <small>
            J2EE 4 mobile
          </small>
        </center>
        <a href="index.html" data-icon="home">Home</a>
      </div>

    <h1>Welcome to PhoneGap!</h1>
    <h2>Diese Datei liegt unter assets/www/phoneGapIndex.html</h2>
    <div id="info">
        <h4>Platform: <span id="platform"> &nbsp;</span>,   Version: <span id="version">&nbsp;</span></h4>
        <h4>UUID: <span id="uuid"> &nbsp;</span>,   Name: <span id="name">&nbsp;</span></h4>
        <h4>Width: <span id="width"> &nbsp;</span>,   Height: <span id="height">&nbsp;
                   </span>, Color Depth: <span id="colorDepth"></span></h4>
     </div>
    <dl id="accel-data">
      <dt>X:</dt><dd id="x">&nbsp;</dd>
      <dt>Y:</dt><dd id="y">&nbsp;</dd>
      <dt>Z:</dt><dd id="z">&nbsp;</dd>
    </dl>
    <a href="#" class="btn large" onclick="toggleAccel();">Toggle Accelerometer</a>
    <a href="#" class="btn large" onclick="getLocation();">Get Location</a>
    <a href="tel:411" class="btn large">Call 411</a>
    <a href="#" class="btn large" onclick="beep();">Beep</a>
    <a href="#" class="btn large" onclick="vibrate();">Vibrate</a>
    <a href="#" class="btn large" onclick="show_pic();">Get a Picture</a>
    <a href="#" class="btn large" onclick="get_contacts();return false;">Get Phone's Contacts</a>
    <a href="#" class="btn large" onclick="check_network();return false;">Check Network</a>
    <dl>
    <dt>Compass Heading:</dt><dd id="h">Off</dd>
    </dl>
    <a href="#" class="btn large" onclick="toggleCompass();return false;">Toggle Compass</a>
    <div id="viewport" class="viewport" style="display: none;">
      <img style="width:60px;height:60px" id="test_img" src="" />
    </div>
  </body>
</html>



Agenda:

<!DOCTYPE HTML>
<html>
  <head>
   <title>Campuswoche 2012</title>
    <script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js">
    </script>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js">
    </script>
  </head>
  <body>
    <div data-role="page" id="home">
      <div data-role="header">
        <h1>Campuswoche 2012</h1>
        <center>
          <small>
            J2EE 4 mobile
          </small>
        </center>
      </div>
      <!-- /header -->
      <div data-role="content">
        <p>
          <img src="images/campus.png" alt="Tanzmaus">
        </p><h2>Agenda</h2>
        <div data-role="collapsible-set">
          <div data-role="collapsible" data-collapsed-icon="" data-expanded-icon="" data-collapsed="true">
            <h3>Montag</h3>
            <p>
              Erst mal ein wenig theoretische Grundlagen
              <ul>
                <li>
                  &nbsp;Infrastruktur
                </li>
                <li>
                  &nbsp;Erste Ideen
                </li>
                <li>
                  &nbsp;Erste Experimente
                </li>
              </ul>
            </p>
          </div>
          <div data-role="collapsible" data-collapsed-icon="" data-expanded-icon="" data-collapsed="true">
            <h3>Dienstag</h3>
            <p>
              Analyse, Vorbereitungen
              <ul>
                <li>
                  &nbsp;form Elemte
                </li>
                <li>
                  &nbsp;API
                </li>
                <li>
                  &nbsp;Diagramme
                </li>
              </ul>
            </p>
          </div>
          <div data-role="collapsible" data-collapsed-icon="" data-expanded-icon="" data-collapsed="true">
            <h3>Mittwoch</h3>
            <p>
              Umsetzung
              <ul>
                <li>
                  &nbsp;Klasses
                </li>
                <li>
                  &nbsp;Datenbankandindung
                </li>
                <li>
                  &nbsp;Diagramme
                </li>
              </ul>
            </p>
          </div>
          <div data-role="collapsible" data-collapsed-icon="" data-expanded-icon="" data-collapsed="true">
            <h3>Donnsterstag</h3>
            <p>
              Korrekturen, Erweiterungen
              <ul>
                <li>
                  &nbsp;Deployment
                </li>
                <li>
                  &nbsp;Testen
                </li>
                <li>
                  &nbsp;Erweitern
                </li>
              </ul>
            </p>
          </div>
          <div data-role="collapsible" data-collapsed-icon="" data-expanded-icon="" data-collapsed="true">
            <h3>Freitag</h3>
            <p>
              App Markets
              <ul>
                <li>
                  &nbsp;Veröffentlichung
                </li>
                <li>
                  &nbsp;Kopieren
                </li>
                <li>
                  &nbsp;Abgeleichen
                </li>
                <li>
                  &nbsp;Zunkunft
                </li>
              </ul>
            </p>
          </div>
        </div>
        <a href="#weitereBeispiele" data-role="button" data-icon="">Weitere Beispiele</a>
      </div>
      <!-- /content -->
      <div data-role="footer">
        <h4>
          <p>
            <a href="i.html" data-rel="dialog" data-transition="pop" style="color:white">Kontakt</a>
          </p>
        </h4>
      </div>
      <!-- footer -->
    </div>
    <!-- neue Seite mit page -->
    <div data-role="page" id="weitereBeispiele" data-back-btn-text="Zur&uml;ck" data-add-back-btn="true">
      <div data-role="header">
       <h1>Campuswoche 2012</h1>
        <center>
          <small>
            J2EE 4 mobile
          </small>
        </center>
      </div>
    <!-- /header -->
    <div data-role="content">
      <p>
        <img src="images/campus.png" alt="Tanzmaus">
      </p><h2>Weitere Beispiele</h2>
         <a href="phonegapIndex.html" data-role="button" data-icon="">PhoneGap Demo Page</a>
        <a href="#weitereBeispiele" data-role="button" data-icon="">PhoneGap Demo Page</a>
<ul data-role="listview" data-inset="true" data-filter="true" id="liste">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<ul data-role="listview" data-inset="true" data-filter="true" id="sublist">
<li><a href="#">Acura</a></li>

<li><a href="#" data-icon="star">Ferrari</a></li>
</ul>
</ul>

   </div>
    <!-- /content -->
    <div data-role="footer">
      <h4>
        <p>
          <a href="i.html" data-rel="dialog" data-transition="pop" style="color:white">Kontakt</a>
        </p>
      </h4>
    </div>
    <!-- footer -->
    </div>
  </body>
</html>

Links zu PhoneGap
https://phonegap.com/

Link zum alten basis SVN Pfad
https://svn.code.sf.net/p/campuswoche2012/code-0

Kommentare

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

Ampelschaltung Teil 1 - HTML, CSS und JavaScript Basics

Bild
Überblick Die meisten Webseiten bestehen im Wesentlichen aus drei Bestandteilen:  HTML Tags, CSS Anweisungen und JavaScript Code  Sie alle sind Text basiert und werden von Browsern nach festen Regeln interpretiert, verarbeitet und dem User dargestellt. CSS Anweisungen und JavaScript Code werden in den HTML Code mittels HTML Tags eingebunden. Eine Webseite besteht also aus HTML Tags, CSS Style Anweisungen und JavaScript Programmcode. Dieser Kurs bietet einen ersten Einblick in diese Bestandteile mit besonderen Schwerpunkt auf die Programmierung mit JavaScript.  Die MiniProjekte 1-4 und das Template sollen dabei helfen das Gelernte zu festigen und sollten auch als kreative Anregung dienen. https://docs.google.com/presentation/d/e/2PACX-1vRr-MvxaWwQ0paYmcOAUxw7yQYAMgIh2VXn9WBPmA67o80S32ktibuS7ASXIfP1gpURLkSI8FvmVxSv/pub?start=true&loop=true&delayms=3000 Tags Einführung, HowTo, Getting startet, HTML, CSS, JavaScript, easy Version 1.0.01052018
Mehr anzeigen

HTML - jquery - mobile - Kontaktformular

Einfaches Kontaktformular. Einfaches Kontaktformular. Ohne viele Worte. <!DOCTYPE html> <html>     <head>     <title>jQuery Mobile</title>     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />     <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>     <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> <div data-role="page">     <div data-role="header">         <h1>Kontakt</h1>     </div><!-- /header -->     <div data-role="content">         <p>Schreib eine Mail</p> </br>         <p><a href="mailto:christof.kaller@gmail.com">christof.kaller@gmail.com</a></p>     </div><!-- /content -->     <di
Mehr anzeigen