Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<title>IFD:Responsive Webdesign – Crash Course - Medien Wiki</title>
</head>
​
​
<body>
​
​
​
<div id="logo1"><a href="http://www.uni-weimar.de"><img src="http://www.uni-weimar.de/medien/wiki/skins/bauhausmedien/logos/uni_wortmarke.jpg" alt="Bauhaus-Universität Weimar" /></a><br /><a href="http://www.uni-weimar.de/cms/medien.html"><img src="http://www.uni-weimar.de/medien/wiki/skins/bauhausmedien/logos/faculty_media.png" /></a></div><!-- logo1 -->
​
​
    </div>
</div>
​
<!-- Sidebar ==================================================================================== -->
<div id="globalnav">
    
        
    <!-- Sidebar Navigation, Search, Toolbox ==================================================== -->
​
    <div class='generated-sidebar portlet' id='p-Startseiten'>
        <ul><li class="level1">Startseiten      <div class='pBody'>
            <ul>
                <li class="level2" id="n-Medien-Wiki"><a href="/medien/wiki/Main_Page">Medien Wiki</a></li>
                <li class="level2" id="n-Elektroakustische-Komposition-..."><a href="/medien/wiki/EKK:Start">Elektroakustische Komposition ...</a></li>
                <li class="level2" id="n-Experimentelles-Radio"><a href="/medien/wiki/RADIO:Start">Experimentelles Radio</a></li>
                <li class="level2" id="n-Experimentelle-Television"><a href="/medien/wiki/EXPTV:Start">Experimentelle Television</a></li>
                <li class="level2" id="n-Gestaltung-medialer-Umgebungen"><a href="/medien/wiki/GMU:Start">Gestaltung medialer Umgebungen</a></li>
                <li class="level2" id="n-Immersive-Medien"><a href="/medien/wiki/IMM:Start">Immersive Medien</a></li>
                <li class="level2" id="n-Interface-Design"><a href="/medien/wiki/IFD:Start">Interface Design</a></li>
                <li class="level2" id="n-Fotowerkst.C3.A4tten-Medien"><a href="/medien/wiki/FOTO:Start">Fotowerkstätten Medien</a></li>
                <li class="level2" id="n-Medien-Ereignisse"><a href="/medien/wiki/ME:Start">Medien-Ereignisse</a></li>
                <li class="level2" id="n-Moden-.26-.C3.B6ffentl.-Erscheinungsbilder"><a href="/medien/wiki/MODEN:Start">Moden &amp; öffentl. Erscheinungsbilder</a></li>
                <li class="level2" id="n-Multimediales-Erz.C3.A4hlen"><a href="/medien/wiki/MME:Start">Multimediales Erzählen</a></li>
            </ul>
        </div>
        </li></ul>
    </div>
    <div class='generated-sidebar portlet' id='p-Wiki_Related'>
        <ul><li class="level1">Wiki Related     <div class='pBody'>
            <ul>
                <li class="level2" id="n-Wintersemester-2014"><a href="/medien/wiki/Category:WS14">Wintersemester 2014</a></li>
                <li class="level2" id="n-Sommersemester-2014"><a href="/medien/wiki/Category:SS14">Sommersemester 2014</a></li>
                <li class="level2" id="n-recentchanges"><a href="/medien/wiki/Special:RecentChanges" title="The list of recent changes in the wiki [r]" accesskey="r">Recent changes</a></li>
                <li class="level2" id="n-newpages"><a href="/medien/wiki/Special:NewPages">New pages</a></li>
                <li class="level2" id="n-help"><a href="/medien/wiki/Help:Editing" title="The place to find out">Help</a></li>
            </ul>
        </div>
        </li></ul>
    </div>
    <div class='generated-sidebar portlet' id='p-Kurse_im_SS_2014'>
        <ul><li class="level1">Kurse im SS 2014     <div class='pBody'>
            <ul>
                <li class="level2" id="n-Semester.C3.BCbersicht"><a href="/medien/wiki/Template:IFD_SS14">Semesterübersicht</a></li>
                <li class="level2" id="n-Mittwochs-Kolloquium"><a href="/medien/wiki/IFD:Kolloq">Mittwochs-Kolloquium</a></li>
                <li class="level2" id="n-Administrating-Data"><a href="/medien/wiki/IFD:AdministratingData">Administrating Data</a></li>
                <li class="level2" id="n-...be-greifbare-Programmierung-II"><a href="/medien/wiki/IFD:Einf%C3%BChrung_in_die_be-greifbare_Programmierung_II">...be-greifbare Programmierung II</a></li>
                <li class="level2" id="n-Eclectric-Electric.21.21"><a href="/medien/wiki/IFD:Eclectic_Electric!!">Eclectric Electric!!</a></li>
                <li class="level2" id="n-Going-Mobile"><a href="/medien/wiki/IFD:GoingMobile">Going Mobile</a></li>
                <li class="level2" id="n-Tangible-Programming-II"><a href="/medien/wiki/IFD:Tangible_Programming_-_An_Introduction_II">Tangible Programming II</a></li>
                <li class="level2" id="n-3-Dimensional-Web-Interfaces"><a href="/medien/wiki/IFD:ThreedimensionalWebinterfaces">3-Dimensional Web-Interfaces</a></li>
                <li class="level2" id="n-Web-Basics-II"><a href="/medien/wiki/IFD:WebBasicsIISS14">Web Basics II</a></li>
            </ul>
        </div>
        </li></ul>
    </div>
    <div class='generated-sidebar portlet' id='p-Vergangenes_Semester'>
        <ul><li class="level1">Vergangenes Semester     <div class='pBody'>
            <ul>
                <li class="level2" id="n-Semester.C3.BCbersicht"><a href="/medien/wiki/Template:IFD_WS13">Semesterübersicht</a></li>
                <li class="level2" id="n-Mittwochs-Kolloquium"><a href="/medien/wiki/IFD:Kolloq">Mittwochs-Kolloquium</a></li>
                <li class="level2" id="n-Apps-With-HTML5"><a href="/medien/wiki/IFD:Mobile_Apps_with_HTML5">Apps With HTML5</a></li>
                <li class="level2" id="n-Eclectic-Electric.21"><a href="/medien/wiki/IFD:Eclectic_Electric!">Eclectic Electric!</a></li>
                <li class="level2" id="n-Generative-Bauhaus-Vorkurs"><a href="/medien/wiki/IFD:GenerativeBauhaus">Generative Bauhaus-Vorkurs</a></li>
                <li class="level2" id="n-Mobile-Media-and-Urban-Species"><a href="/medien/wiki/IFD:Mobile_Media_and_Urban_Spaces_WS13">Mobile Media and Urban Species</a></li>
                <li class="level2" id="n-Nutzerstudien"><a href="/medien/wiki/IFD:Nutzerstudien_WiSe1314">Nutzerstudien</a></li>
                <li class="level2" id="n-Server-Side-Technologies"><a href="/medien/wiki/IFD:Server_side_technologies_for_web-development_WS_13">Server Side Technologies</a></li>
                <li class="level2" id="n-Three-Dimensional-Web-Interfaces"><a href="/medien/wiki/IFD:Three-dimensional_web-interfaces_WS_13">Three-Dimensional Web-Interfaces</a></li>
                <li class="level2" id="n-Web-Basics-I"><a href="/medien/wiki/IFD:Web_Basics_I_WS_13">Web Basics I</a></li>
            </ul>
        </div>
        </li></ul>
    </div>
​
    <!-- Personal Tools ========================================================================= -->
    <div class="portlet" id="p-personal">
        <div class="pBody">
        <ul>    
            <li class="level2">&nbsp;<br/>
            <ul>
                <li class="level3"><a href="/medien/wiki/Special:UserLogin?returnto=IFD:Responsive Webdesign – Crash Course">Log in</a></li>
            </ul>
            </li>
        </ul>
        </div> <!-- id: pBody-->
    </div> <!-- id: portlet.p-personal -->
    
​
</div><!-- id: globalnav ======================================================================== -->
​
​
​
<div id="globalWrapper">
    <div id="column-content">
        
    <div id="content">
      
​
      <div class="yah">
            <!--ul-->
    <a href="/medien/wiki/IFD:Responsive_Webdesign_%E2%80%93_Crash_Course">IFD</a> <!--/li-->|&nbsp;<a href="/medien/wiki/index.php5?title=IFD:Responsive_Webdesign_%E2%80%93_Crash_Course&amp;action=edit" title="This page is protected.&#10;You can view its source [e]" accesskey="e">View source</a> <!--/li-->|&nbsp;<a href="/medien/wiki/index.php5?title=IFD:Responsive_Webdesign_%E2%80%93_Crash_Course&amp;action=history" title="Past revisions of this page [h]" accesskey="h">History</a> <!--/li-->                              
            <!--/ul-->
        </div> 
      <!-- Logos Medien -->
      <div id="mglogos">
<div id="logo2"><a href="http://www.uni-weimar.de/cms/medien/medienkunstmediengestaltung.html"><img src="http://www.uni-weimar.de/medien/wiki/skins/bauhausmedien/logos/media_art_design.png" alt="Media Art & Design" /></a></div><!-- logo2 -->
​
<div id="logo3"><a href="http://web.uni-weimar.de/medien/wiki/IFD:Start">Interface Design / Prof. Dr. Jens Geelhaar</a></div><!-- logo3 --> 
</div>
      
      <!--Medien logos End-->
      
      
        <a name="top" id="top"></a>
                    
        <h1 id="firstHeading" class="firstHeading">IFD:Responsive Webdesign – Crash Course</h1>
        
        <div id="bodyContent">
                        <div id="contentSub"></div>
                                                    
            <!-- start content -->
<div class="empty">         
<p><a href="/medien/wiki/Category:Werkmodul" title="Category:Werkmodul">Werkmodul</a> | <a href="/medien/wiki/Category:Fachmodul" title="Category:Fachmodul">Fachmodul</a> <br><i>Lehrperson:</i> <a href="/medien/wiki/Gabriel_Rausch" title="Gabriel Rausch">Gabriel Rausch</a><br><i>Bewertung:</i> 6 <a href="/medien/wiki/ECTS" title="ECTS">ECTS</a>, 4 <a href="/medien/wiki/SWS" title="SWS">SWS</a><br><i>Termin:</i> Monday, 13:30 - 15:45 <br><i>Ort:</i> Marienstr. 7b, room 105<br></p>
<p><i>First meeting:</i> Mo, October 20th 2014
</p>
<p><br></p>
 </div> 
<h2> <span class="mw-headline" id="Schedule">Schedule</span>
</h2>
<ul><li> 20.10.2014 – Introduction
<ul>
<li> <a href="http://doodle.com/kng7ektg4f33d92x" class="external text" rel="nofollow">Find dates...</a>
</li>
<li> <a href="http://wtfmobileweb.com" class="external text" rel="nofollow">WTFmobileWeb</a>
</li>
<li> <a href="http://jsbin.com/donotuqoyo/edit?css,output" class="external text" rel="nofollow">Workaround Mediaqueries</a>
</li>
<li> <a href="http://www.uni-weimar.de/medien/interfacedesign/BU_RWD_Introduction_20141020.pdf" class="external text" rel="nofollow">Intro PDF</a>
</li>
</ul>
</li></ul>
<ul><li> till 20.12.2014 - Prototype <span class="tooltip"><span class="tooltip_abbr">Wiki</span><span class="tooltip_tipwrapper"><span class="tooltip_tip"><span>Haiwaiian for ''fast'' (not an acronym). It is the name for a hypertext system for websites where the user may not only read the content but is also able to change it instantaneously through the browser.</span></span></span></span>
<ul><li> <a href="/medien/wiki/IFD:Responsive_Webdesign_%E2%80%93_Crash_Course/Wiki_Facelift_and_Mobile_Optimization" title="IFD:Responsive Webdesign – Crash Course/Wiki Facelift and Mobile Optimization">Wiki Facelift and Mobile Optimization</a>
</li></ul>
</li></ul>
<ul><li> 1st block : 08.01.2015 16:00 - 22:00
</li></ul>
<ul><li> 2nd block : 15.01.2015 16:00 - 22:00
</li></ul>
<ul><li> 3rd block : 22.01.2015 16:00 - 22:00
</li></ul>
<h2> <span class="mw-headline" id="Description">Description</span>
</h2>
<p>The course is dedicated to all media and design students who have first experience in the basic technologies of web development (<span class="tooltip"><span class="tooltip_abbr">HTML</span><span class="tooltip_tipwrapper"><span class="tooltip_tip"><span>[[HTML|Hypertext Markup Language]]</span></span></span></span>, <span class="tooltip"><span class="tooltip_abbr">CSS</span><span class="tooltip_tipwrapper"><span class="tooltip_tip"><span>[[CSS|Cascading Style Sheets]]</span></span></span></span>, JavaScript Basics ...) and who are interested in further development of their interface designs. 
The term "Responsive Design", which was definied in an article by Ethan Marcotte, has now become a synonym for mobile optimization and includes a bunch of technical solutions to optimize an interface design for a large device target group. While diving into these techical approaches we will recognize that Responsive Design is not the only solution for all interface design optimization methods.
</p>
<p><br></p>
<h2> <span class="mw-headline" id="Beschreibung">Beschreibung</span>
</h2>
<p>Der Kurs richtet sich an alle Studierenden, die schon erste Erfahrung in den Grundlagen-Technologien der Web-Entwicklung haben (<span class="tooltip"><span class="tooltip_abbr">HTML</span><span class="tooltip_tipwrapper"><span class="tooltip_tip"><span>[[HTML|Hypertext Markup Language]]</span></span></span></span>, <span class="tooltip"><span class="tooltip_abbr">CSS</span><span class="tooltip_tipwrapper"><span class="tooltip_tip"><span>[[CSS|Cascading Style Sheets]]</span></span></span></span>, JavaScript-Basics...) und an der weiteren Professionalisierung ihrer Interface-Designs interessiert sind.
Der gestaltungsorientierte Kurs wird dabei die aktuellen Probleme und Lösungen bei der Entwicklung von Web-Interfaces für sämtliche Endgeräte untersuchen. Der Begriff „Responsive Design“, der durch einen Artikel von Ethan Marcotte geprägt wurde, ist mittlerweile als Synonym für die mobile Optimierung geworden und beherbergt ein ganzes Toolset an technischen und gestalterischen Lösungsansätzen, um ein Interface-Design für eine möglichst große Endgerät-Zielgruppe zu optimieren. Der Kurs wird diese Lösungsansätze untersuchen und dabei auch feststellen, dass das „Responsive Design“ nicht der Weisheit letzter Schluss ist und für eine optimale Interface-Entwicklung weit mehr nötig ist, als ein Toolset von Media-Queries.
</p>
<p>Nach einer Kurseinführung zu Semesterbeginn wird der Kurs erst im letzten Dritten des Semesters als Blockveranstaltung weitergeführt.
</p>
​
<!-- 
NewPP limit report
Preprocessor node count: 11/1000000
Post-expand include size: 0/2097152 bytes
Template argument size: 0/2097152 bytes
Expensive parser function count: 0/100
-->
​
<!-- Saved in parser cache with key ifacedb-wki_:pcache:idhash:18645-0!1!0!!en!2!edit=0 and timestamp 20141122100201 -->
<div class="printfooter">
Retrieved from "<a href="http://www.uni-weimar.de/medien/wiki/IFD:Responsive_Webdesign_%E2%80%93_Crash_Course">http://www.uni-weimar.de/medien/wiki/IFD:Responsive_Webdesign_%E2%80%93_Crash_Course</a>"</div>
          <div class="empty"></div> 
          
            <div id='catlinks' class='catlinks catlinks-allhidden'></div>           <!-- end content -->
            
                        <div class="visualClear"></div>
            
            <div id="footer">
                        
                         
            <div id="signature"><p>&copy; 2014 Faculty of Media, Bauhaus-Universit&auml;t Weimar - except where stated otherwise / <a href="http://www.uni-weimar.de/cms/index.php?id=5" title="Kontaktseite">Contact</a> / <a href="http://www.uni-weimar.de/cms/index.php?id=49" title="zum Impressum">Imprint</a> / <a href="http://www.uni-weimar.de/medien/wiki/MediaWiki:Privacypage">Privacy</a><br/>If you suspect a copyright violation please contact the <a href="&#x6d;&#97;&#105;&#108;&#116;&#x6f;&#58;&#x6d;&#x69;&#x63;&#x68;&#97;&#101;&#x6c;&#x2e;&#109;&#x61;&#x72;&#107;&#101;&#114;&#x74;&#x40;&#117;&#110;&#105;&#45;&#x77;&#x65;&#105;&#x6d;&#97;&#114;&#46;&#x64;&#x65;">Wiki-Administrator</a></p></div><!-- signature -->                 <ul id="f-list"> 
                    <li>Powered by <a href="http://www.mediawiki.org">MediaWiki</a>. &nbsp; </li>
                                                <li id="viewcount">This page has been accessed 281 times. &nbsp; </li>                          <li id="lastmod"> This page was last modified on 21 October 2014, at 03:07. &nbsp; </li>                </ul> <!-- Served in 0.268 secs. -->            
            
            </div>  <!-- id:footer -->
​
        </div> <!-- id: bodyContent -->
    </div> <!-- id: content -->
    </div> <!-- id: column-content -->
    
    
    <!-- Site Actions =========================================================================== -->
    <div id="p-cactions" class="portlet">
        <!--h5></h5-->
        <!-- id: pBody-->
    </div> <!-- id: portlet.p-cactions-->
</div> <!-- id: globalWrapper -->   
    
​
​
<div id="extraHTMLBox"></div>
​
</body></html>
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
NataSuupro
0viewers