Frederic G. MARAND преди 8 години
родител
ревизия
e6aa70dd20
променени са 29 файла, в които са добавени 10 реда и са изтрити 397 реда
  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

@@ -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

@@ -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


+ 1 - 11
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 */

+ 7 - 0
css/styles.css.map

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

+ 1 - 0
css/styles.scss

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

BIN
images/img_1.jpg


BIN
images/img_10.jpg


BIN
images/img_11.jpg


BIN
images/img_12.jpg


BIN
images/img_13.jpg


BIN
images/img_14.jpg


BIN
images/img_15.jpg


BIN
images/img_16.jpg


BIN
images/img_17.jpg


BIN
images/img_18.jpg


BIN
images/img_2.jpg


BIN
images/img_3.jpg


BIN
images/img_4.jpg


BIN
images/img_5.jpg


BIN
images/img_6.jpg


BIN
images/img_7.jpg


BIN
images/img_8.jpg


BIN
images/img_9.jpg


+ 0 - 52
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>

BIN
js/.DS_Store


+ 0 - 122
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 |

+ 0 - 57
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>

+ 0 - 70
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>