преди 8 години · e6aa70dd20
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -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"],
			
--- a/albums.html
+++ b/albums.html
@@ -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>
			
--- a/css/.DS_Store
+++ b/css/.DS_Store
--- a/css/styles.css
+++ b/css/styles.css
@@ -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 */
			
--- a/css/styles.css.map
+++ b/css/styles.css.map
@@ -0,0 +1,7 @@
 
				+{
			
 
				+"version": 3,
			
 
				+"mappings": "",
			
 
				+"sources": [],
			
 
				+"names": [],
			
 
				+"file": "styles.css"
			
 
				+}
			
--- a/css/styles.scss
+++ b/css/styles.scss
@@ -0,0 +1 @@
 
				+$orange: #ff6633;
			
--- a/images/img_1.jpg
+++ b/images/img_1.jpg
--- a/images/img_10.jpg
+++ b/images/img_10.jpg
--- a/images/img_11.jpg
+++ b/images/img_11.jpg
--- a/images/img_12.jpg
+++ b/images/img_12.jpg
--- a/images/img_13.jpg
+++ b/images/img_13.jpg
--- a/images/img_14.jpg
+++ b/images/img_14.jpg
--- a/images/img_15.jpg
+++ b/images/img_15.jpg
--- a/images/img_16.jpg
+++ b/images/img_16.jpg
--- a/images/img_17.jpg
+++ b/images/img_17.jpg
--- a/images/img_18.jpg
+++ b/images/img_18.jpg
--- a/images/img_2.jpg
+++ b/images/img_2.jpg
--- a/images/img_3.jpg
+++ b/images/img_3.jpg
--- a/images/img_4.jpg
+++ b/images/img_4.jpg
--- a/images/img_5.jpg
+++ b/images/img_5.jpg
--- a/images/img_6.jpg
+++ b/images/img_6.jpg
--- a/images/img_7.jpg
+++ b/images/img_7.jpg
--- a/images/img_8.jpg
+++ b/images/img_8.jpg
--- a/images/img_9.jpg
+++ b/images/img_9.jpg
--- a/index.html
+++ b/index.html
@@ -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>
			
--- a/js/.DS_Store
+++ b/js/.DS_Store
--- a/notes2.md
+++ b/notes2.md
@@ -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 |
			
--- a/photo1.html
+++ b/photo1.html
@@ -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>
			
--- a/photos.html
+++ b/photos.html
@@ -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>