Home Explore Help
Register Sign In
fgm
/
front__coursera-responsive-design
1
0
Fork 0
Files Issues 0 Pull Requests 0
Browse Source

Clean slate.

Frederic G. MARAND 8 years ago
parent
5936ca8d73
commit
e6aa70dd20
29 changed files with 10 additions and 397 deletions
Split View Show Diff Stats
  1. 1 26
      .eslintrc.js
  2. 0 59
      albums.html
  3. BIN
      css/.DS_Store
  4. 1 11
      css/styles.css
  5. 7 0
      css/styles.css.map
  6. 1 0
      css/styles.scss
  7. BIN
      images/img_1.jpg
  8. BIN
      images/img_10.jpg
  9. BIN
      images/img_11.jpg
  10. BIN
      images/img_12.jpg
  11. BIN
      images/img_13.jpg
  12. BIN
      images/img_14.jpg
  13. BIN
      images/img_15.jpg
  14. BIN
      images/img_16.jpg
  15. BIN
      images/img_17.jpg
  16. BIN
      images/img_18.jpg
  17. BIN
      images/img_2.jpg
  18. BIN
      images/img_3.jpg
  19. BIN
      images/img_4.jpg
  20. BIN
      images/img_5.jpg
  21. BIN
      images/img_6.jpg
  22. BIN
      images/img_7.jpg
  23. BIN
      images/img_8.jpg
  24. BIN
      images/img_9.jpg
  25. 0 52
      index.html
  26. BIN
      js/.DS_Store
  27. 0 122
      notes2.md
  28. 0 57
      photo1.html
  29. 0 70
      photos.html

+ 1 - 26
.eslintrc.js
View File 

@@ -9,34 +9,9 @@ module.exports = {
 
   "globals": {
 
     "$": true,
 
     "jQuery": true,
 
-    "React": true,
 
-    "ReactDOM": true,
 
     "_": true,
 
 
-    "Accounts": true,
 
-    "HTTP": true,
 
-    "Log": true,
 
-    "Match": true,
 
-    "Meteor": true,
 
-    "Npm": true,
 
-    "Package": true,
 
-    "ServiceConfiguration": true,
 
-    "Session": true,
 
-    "Template": true,
 
-    "Tinytest": true,
 
-    "WebApp": true,
 
-    "check": true,
 
-
 
-    // The globals defined in this package.
 
-    "Drupal": true,
 
-    "DrupalBase": true,
 
-    "DrupalClient": true,
 
-    "DrupalConfiguration": true,
 
-    "DrupalServer": true,
 
-    "client": true,
 
-    "drupal": true,
 
-    "server": true,
 
-    "stream": true
 
+    "Npm": true
 
   },
 
 
   "plugins": ["react"],

+ 0 - 59
albums.html
View File 

@@ -1,59 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en"> 
-  <head>
 
-   <title></title>
 
-
 
-    <link href="css/bootstrap.css" rel="stylesheet" /> <!-- pulls in the main bootstrap content we need -->
 
-    <link href="css/styles.css" rel="stylesheet" />
 
-    
-    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 
-    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 
-    <!--[if lt IE 9]>
 
-      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 
-      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 
-    <![endif]-->
 
-
 
-  </head>
 
-  
-  <body>
 
-    <nav class="navbar navbar-default">
 
-      <div class="container-fluid">
 
-        <!-- collapsed navbar -->
 
-        <div class="navbar-header">
 
-          <button type="button"
 
-            class="navbar-toggle collapsed"
 
-            data-toggle="collapse"
 
-            data-target="#main_navbar"
 
-            aria-expanded="false">open!</button>
 
-        </div><!-- /collapsed navbar -->
 
-
 
-        <!-- uncollapsed navbar -->
 
-        <div id="main_navbar" class="collapse navbar-collapse">
 
-          <ul class="nav navbar-nav">
 
-            <li><a href="index.html">Home</a></li>
 
-            <li class="active"><a href="albums.html">Albums</a></li>
 
-            <li><a href="photos.html">All photos</a></li>
 
-          </ul>
 
-        </div><!-- /uncollapsed navbar -->
 
-      </div>
 
-    </nav>
 
-
 
-    <div class="container">
 
-
 
-      <h1>Here are my albums</h1>
 
-      <ol class="breadcrumb">
 
-        <li><a href="index.html">Home</a></li>
 
-        <li><a href="albums.html">Albums</a></li>
 
-      </ol>
 
-
 
-      <a href="photos.html"><img class="album_cover" src="images/img_1.jpg" alt="Graffiti cover image" /></a>
 
-      <p>Graffiti album</p>
 
-      <a href="photos.html"><img class="album_cover" src="images/img_2.jpg" alt="Full english breakfast" /></a>
 
-      <a href="photos.html"><img class="album_cover" src="images/img_3.jpg" alt="Racks of cheese!" /></a>
 
-    </div>
 
-  
-    <script src="js/jquery.min.js"></script> <!-- jquery libraries -->
 
-    <script src="js/bootstrap.min.js"></script> <!-- bootsrap libraries -->
 
-
 
-  </body>
 
-</html>

BIN
css/.DS_Store
View File


+ 1 - 11
css/styles.css
View File 

@@ -1,13 +1,3 @@
 
-.album_cover {
 
-  border: 20px solid gray;
 
-  width: 25%;
 
-}
 
 
-.photo_list {
 
-  width: 100%;
 
-  max-height:100px;
 
-}
 
 
-.single_photo {
 
-  width: 75%;
 
-}
 
+/*# sourceMappingURL=styles.css.map */

+ 7 - 0
css/styles.css.map
View File 

@@ -0,0 +1,7 @@
 
+{
 
+"version": 3,
 
+"mappings": "",
 
+"sources": [],
 
+"names": [],
 
+"file": "styles.css"
 
+}

+ 1 - 0
css/styles.scss
View File 

@@ -0,0 +1 @@
 
+$orange: #ff6633;

BIN
images/img_1.jpg
View File


BIN
images/img_10.jpg
View File


BIN
images/img_11.jpg
View File


BIN
images/img_12.jpg
View File


BIN
images/img_13.jpg
View File


BIN
images/img_14.jpg
View File


BIN
images/img_15.jpg
View File


BIN
images/img_16.jpg
View File


BIN
images/img_17.jpg
View File


BIN
images/img_18.jpg
View File


BIN
images/img_2.jpg
View File


BIN
images/img_3.jpg
View File


BIN
images/img_4.jpg
View File


BIN
images/img_5.jpg
View File


BIN
images/img_6.jpg
View File


BIN
images/img_7.jpg
View File


BIN
images/img_8.jpg
View File


BIN
images/img_9.jpg
View File


+ 0 - 52
index.html
View File 

@@ -1,52 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en"> 
-  <head>
 
-   <title></title>
 
-
 
-    <link href="css/bootstrap.css" rel="stylesheet" /> <!-- pulls in the main bootstrap content we need -->
 
-    <link href="css/styles.css" rel="stylesheet" />
 
-
 
-    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 
-    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 
-    <!--[if lt IE 9]>
 
-      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 
-      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 
-    <![endif]-->
 
-
 
-  </head>
 
-  
-  <body>
 
-    <nav class="navbar navbar-default">
 
-      <div class="container-fluid">
 
-        <!-- collapsed navbar -->
 
-        <div class="navbar-header">
 
-          <button type="button"
 
-            class="navbar-toggle collapsed"
 
-            data-toggle="collapse"
 
-            data-target="#main_navbar"
 
-            aria-expanded="false">open!</button>
 
-        </div><!-- /collapsed navbar -->
 
-
 
-        <!-- uncollapsed navbar -->
 
-        <div id="main_navbar" class="collapse navbar-collapse">
 
-          <ul class="nav navbar-nav">
 
-            <li class="active"><a href="index.html">Home</a></li>
 
-            <li><a href="albums.html">Albums</a></li>
 
-            <li><a href="photos.html">All photos</a></li>
 
-          </ul>
 
-        </div><!-- /uncollapsed navbar -->
 
-      </div>
 
-    </nav>
 
-
 
-    <div class="container">
 
-      <h1>Hello from my Bootstrap site</h1>
 
-      <ol class="breadcrumb">
 
-        <li><a href="index.html">Home</a></li>
 
-      </ol>
 
-    </div>
 
-  
-    <script src="js/jquery.min.js"></script> <!-- jquery libraries -->
 
-    <script src="js/bootstrap.min.js"></script> <!-- bootsrap libraries -->
 
-
 
-  </body>
 
-</html>

BIN
js/.DS_Store
View File


+ 0 - 122
notes2.md
View File 

@@ -1,122 +0,0 @@
 
-2.1.1
 
-=====
 
-
 
-* Usability: objective = is the site efficient, memorable, .learnable
 
-* UX: subjective = how the user feels about the site, happy, frustrated, bored
 
-
 
-  Good usability + good design = good UX
 
-
 
-Design for identified/profiled users. There may be more than one type of them.
 
-
 
-UX
 
---
 
-
 
-* Interface design
 
-* Usability
 
-* Content
 
-* Structure
 
-
 
-More recent term covering all aspects of web design, with a specific focus on what it is like to be a user of the site.
 
-
 
-2.1.2 Navigation
 
-================
 
-
 
-* 2 questions
 
-  * where am I ?
 
-  * where can I go ?
 
-* 3 kinds
 
-  * Hierarchical
 
-  * Global: top level sections
 
-  * Local: within the page
 
-* Cultural : choose the right one for a given culture.
 
-* As a user, know where you are
 
-  * Breadcrumbs
 
-
 
-2.1.3 What is here ?
 
-====================
 
-
 
-Wireframe typique:
 
-
 
-    +-----------------------------------+
 
-    | Where am I                        | <----------- title
 
-    +-----------------------------------+
 
-    +-----------------------------+
 
-    | Where can I go ?            | <----------------- nav tabs / pills
 
-    +-----------------------------+
 
-    +---------+ +---------+ +---------+ +---------+
 
-    | What is | | What is | | What is | | What is | <- content grid
 
-    |  here?  | |  here?  | |  here?  | |  here?  |
 
-    +---------+ +---------+ +---------+ +---------+
 
-
 
-Beyond the F shape, eye tracking studies show that users also look for content that has white space around it:
 
-space makes it easier to find the page elements.
 
-
 
-2.1.4 Accessibility
 
-===================
 
-
 
-* Accessibility about all kinds of disabilities, including visual, auditory (multimedia),
 
-  physical (interaction), speech (voice recognition), neurological
 
-* WAI @ W3C
 
-* Testing: simple method = use a text browser, e.g. extension Textize, ChromeVox
 
-* Simple mechanisms:
 
-  * images: alt text,
 
-  * text: headings, color contrast, resizable text
 
-  * interaction: keyboard navigation
 
-  * multimedia: captions
 
-
 
-Not only do accessible sites/apps provide access to disabled users, they're also easier for everyone.
 
-
 
-2.1.5 Guidelines for design
 
-===========================
 
-
 
-* Cognition / evidence principles = Edward Tufte: from the result
 
-  * What is the information ?
 
-  * How do we make the information clear ?
 
-* User-centric (centered) approach: from the audience
 
-  * Who are our users ?
 
-  * What do they want ?
 
-  * How do they get the information ?
 
-* UX must be consistent, it's what makes things understandable.
 
-* The two approaches are sometimes in conflict, but they agree that UX is first:
 
-  * before any code is written
 
-  * consistent
 
-* WTF ? (What's This For ?) (sic)
 
-  * You can judge a good design, by how long it takes to understand what it is about
 
-  * most users visit a site looking for content
 
-  * as the author, we should understand and clearly signpost the content
 
-  * If you're looking at a site/app and are not sure what it means, it is a problem for the site
 
-    * it may look good, but it's useless
 
-* Obfuscation vs simplicity
 
-  * Tufte: the worst kind of designs are those that look like corporate annual reports:
 
-    * confusing content
 
-    * padded by generic imagery
 
-    * not designed to be read by anyone
 
-  * If there's a lot of text, but it's hard to infer any meaning from scanning it, maybe it's just padding.
 
-  * Simpler sites are better:
 
-    * What is it ? A news item, a product, a download...
 
-    * Where can I get it ? => minimum number of clicks to get to content
 
-  * Why is this here ?
 
-    * If it's not helping users to do the above, cut it out.
 
-    * Including colour! Why are you using colour ? "It's nice" is not a reason.
 
-    * Colors bring confusion: use them sparingly.
 
-
 
-2.1.6 Design examples
 
-=====================
 
-
 
-* Skipping to simple conclusions, you get to the "standard" layout mentioned at http://www.novolume.co.uk/blog/all-websites-look-the-same/
 
-* http://darkpatterns.org
 
-
 
-
 
-Quiz
 
-====
 
-
 
-What might fit in the cognition/evidence-based approach ?
 
----------------------------------------------------------
 
-
 
-
 
-| Telling where they are | Telling where they can go | Presenting clearly | Using eye tracking | Result |
 
-|:----------------------:|:-------------------------:|:------------------:|:------------------:|:------:|
 
-| 0 | 0 | 1 | 0 |
 
-| 0 | 0 | 1 | 1 | Yes |
 
-| 1 | 1 | 1 | 0 |
 
-| 1 | 1 | 1 | 1 |

+ 0 - 57
photo1.html
View File 

@@ -1,57 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en"> 
-  <head>
 
-   <title></title>
 
-
 
-    <link href="css/bootstrap.css" rel="stylesheet" /> <!-- pulls in the main bootstrap content we need -->
 
-    <link href="css/styles.css" rel="stylesheet" />
 
-    
-    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 
-    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 
-    <!--[if lt IE 9]>
 
-      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 
-      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 
-    <![endif]-->
 
-
 
-  </head>
 
-  
-  <body>
 
-    <nav class="navbar navbar-default">
 
-      <div class="container-fluid">
 
-        <!-- collapsed navbar -->
 
-        <div class="navbar-header">
 
-          <button type="button"
 
-            class="navbar-toggle collapsed"
 
-            data-toggle="collapse"
 
-            data-target="#main_navbar"
 
-            aria-expanded="false">open!</button>
 
-        </div><!-- /collapsed navbar -->
 
-
 
-        <!-- uncollapsed navbar -->
 
-        <div id="main_navbar" class="collapse navbar-collapse">
 
-          <ul class="nav navbar-nav">
 
-            <li class="active"><a href="index.html">Home</a></li>
 
-            <li><a href="albums.html">Albums</a></li>
 
-            <li><a href="photos.html">All photos</a></li>
 
-          </ul>
 
-        </div><!-- /uncollapsed navbar -->
 
-      </div>
 
-    </nav>
 
-
 
-    <div class="container">
 
-      <h1>Some graffiti I found</h1>
 
-      <ol class="breadcrumb">
 
-        <li><a href="index.html">Home</a></li>
 
-        <li><a href="albums.html">Albums</a></li>
 
-        <li><a href="photos.html">Graffiti album</a></li>
 
-        <li><a href="photo1.html">Wall</a></li>
 
-      </ol>
 
-
 
-      <img src="images/img_1.jpg" alt="Some graffiti" class="single_photo" />
 
-    </div>
 
-  
-    <script src="js/jquery.min.js"></script> <!-- jquery libraries -->
 
-    <script src="js/bootstrap.min.js"></script> <!-- bootsrap libraries -->
 
-
 
-  </body>
 
-</html>

+ 0 - 70
photos.html
View File 

@@ -1,70 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en"> 
-  <head>
 
-   <title></title>
 
-
 
-    <!--<link href="css/bootstrap.css" rel="stylesheet" /> &lt;!&ndash; pulls in the main bootstrap content we need &ndash;&gt;-->
 
-    <link href="css/bootstrap_united.min.css" rel="stylesheet" /> <!-- pulls in the main bootstrap content we need -->
 
-    <link href="css/styles.css" rel="stylesheet" />
 
-
 
-    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 
-    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 
-    <!--[if lt IE 9]>
 
-      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 
-      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 
-    <![endif]-->
 
-
 
-  </head>
 
-  
-  <body>
 
-    <nav class="navbar navbar-default">
 
-      <div class="container-fluid">
 
-        <!-- collapsed navbar -->
 
-        <div class="navbar-header">
 
-          <button type="button"
 
-            class="navbar-toggle collapsed"
 
-            data-toggle="collapse"
 
-            data-target="#main_navbar"
 
-            aria-expanded="false">open!</button>
 
-        </div><!-- /collapsed navbar -->
 
-
 
-        <!-- uncollapsed navbar -->
 
-        <div id="main_navbar" class="collapse navbar-collapse">
 
-          <ul class="nav navbar-nav">
 
-            <li><a href="index.html">Home</a></li>
 
-            <li><a href="albums.html">Albums</a></li>
 
-            <li class="active"><a href="photos.html">All photos</a></li>
 
-          </ul>
 
-        </div><!-- /uncollapsed navbar -->
 
-      </div>
 
-    </nav>
 
-
 
-    <div class="container">
 
-      <h1>Here are the photos</h1>
 
-      <ol class="breadcrumb">
 
-        <li><a href="index.html">Home</a></li>
 
-        <li><a href="albums.html">Albums</a></li>
 
-        <li><a href="photos.html">Graffiti album</a></li>
 
-      </ol>
 
-
 
-      <div class="row">
 
-        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_1.jpg" alt="Graffiti cover image" /></a></div>
 
-        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_2.jpg" alt="Graffiti cover image" /></a></div>
 
-        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_3.jpg" alt="Graffiti cover image" /></a></div>
 
-        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_4.jpg" alt="Graffiti cover image" /></a></div>
 
-        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_5.jpg" alt="Graffiti cover image" /></a></div>
 
-        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_6.jpg" alt="Graffiti cover image" /></a></div>
 
-        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_7.jpg" alt="Graffiti cover image" /></a></div>
 
-        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_8.jpg" alt="Graffiti cover image" /></a></div>
 
-        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_9.jpg" alt="Graffiti cover image" /></a></div>
 
-        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_10.jpg" alt="Graffiti cover image" /></a></div>
 
-        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_11.jpg" alt="Graffiti cover image" /></a></div>
 
-        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_12.jpg" alt="Graffiti cover image" /></a></div>
 
-      </div><!-- / row -->
 
-    </div>
 
-  
-    <script src="js/jquery.min.js"></script> <!-- jquery libraries -->
 
-    <script src="js/bootstrap.min.js"></script> <!-- bootsrap libraries -->
 
-
 
-  </body>
 
-</html>