Wilson Mar bio photo

Wilson Mar

Hello!

Calendar YouTube Github

LinkedIn

Fast, scalable websites with cart and social reach, step-by-step

US (English)   Norsk (Norwegian)   Español (Spanish)   Français (French)   Deutsch (German)   Italiano   Português   Estonian   اَلْعَرَبِيَّةُ (Egypt Arabic)   Napali   中文 (简体) Chinese (Simplified)   日本語 Japanese   한국어 Korean

Overview

Here are the sequence of specific steps to build a website using (what Mathias Biilmann of static hosting service Netlify calls) coined a “JAM stack” – a set of software to create websites that are fast, scalable, and simple to work with. JAM stands for JavaScript, APIs, and Markup. JavaScript on the site makes calls to API (Application Programming Interfaces) web services in the cloud to manage subscription forms and email campaigns. Content for the site is written in semi-technical markup language text stored on GitHub.com.

See Redpoint’s JAMstack Ecocystem.

We have here a way for artists to manage and display their portfolio of photos in file folders distributed across the internet for fast retrieval anywhere in the world.

We want the photos to show up in a list or table on a web page visitors obtain by typing in a topic on their web browser.

The Portfolio listing is used to select files for processes such as identifying file sizes plus compression and watermarking of each photo.

The program may also load the portfolio file into a database for other programs to access online.

Metadata, such as a description about each work in the portfolio, are usually entered by hand or via audio recording.

The portfolio file is in .csv (comma separated values) format which is text that can be edited by any text editor. Many prefer to edit such files locally using a spreadsheet program such as Microsoft Excel. And storing files in GitHub allows us to go back to each complete version at various points in time. Complete copies of a repository are obtained from GitHub.

What’s amazing about GitHub is that it not only hosts websites for free, it runs a program called Jekyll that applies colors and fonts and layouts specified in templates to each topic.

We like to use the Jekyll program because it generates an index.html file for each topic. It puts all the files for a website within a _site folder published to the internet.

The file for a topic can contain text which replace variables defined in the main section of that page.

Before it does all that, we have a parser program that can generate a file for each item in the portfolio, or create a text file which replaces the {include} tag in a topic file.

Coding in web pages interact with a form processing API on a server to handle both generic portfolio data and data specific to each visitor

A publisher program can match the interests of those who register with Tags describing each portfolio item when it sends out emails, Instagram, Twitter, or other social network messages, on a schedule.

So here you have it, a way to create a website that allows local editing, have versioned backups, speed from pre-distributed static files, and audience interaction from social media attraction.

Phil Hawksworth (@philhawksworth) sums up JAM’s architecture this way:

  • A consumable page of content at every URL without the need for JavaScript to display things in the browser
  • A valid, bookmark-able entry point to the site at every URL
  • Client-side rendering with JavaScript as an enhancement for reduced data over the wire and rapid (and perhaps fancy) page transition
  • Simple server-side architecture which could be served from any static web server
  • Content management through a CMS outside of a development environment

Others:

  • https://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/

  • https://www.smashingmagazine.com/2015/11/static-website-generators-jekyll-middleman-roots-hugo-review/


This project plan is structured by groups of tasks, in rough priority order.

Design decisions

  1. Contact details (phone, email, facebook, twitter, instagram)
  2. Work agreement (contract)
  3. Copyrights, license

    Accounts

  4. Setup email account
  5. Setup Twitter account using email

  6. Setup Github organization and github.io repo holding website
  7. Setup Github account for each contributor
  8. In Github grant permission to each contributor

  9. Get an AWS account with a credit card: Keith[1 hr]
  10. Create an AWS worker account. Keith+Wilson[1 hr]

    Development environment

    Out of scope:

    • Install git (use online GitHub)
    • Install repo viewer

    Site Design

  11. Look through other websites to identify what’s to like
  12. Pre-defined theme?
  13. Scheme of color, fonts, layout
  14. Theme in GitHub
  15. Style Guide: A simple style guide is extremely beneficial for any website owner, points to consider include:

    • Font Styles
    • Image Sizes
    • Tone of Voice
    • Colors
    • Imagery Style
    • Layout

  16. Custom icon (10x10 favico.ico/png) appearing on browser tabs

    SEE: http://www.uxbrainstorm.org/thoughts-on-logo-creation/

  17. Mobile app icons for Android & Apple Touch
  18. Windows 10 desktop tile images

  19. Top of page menu text (sections)
  20. FontAwesome icon for each section

    Out of scope:

    • Visual site map
    • Breadcrumb trail

    Social

  21. Facebook account setup in _config.yml
  22. Twitter setup in _config.yml
  23. Position social buttons (always visible on left side of page)

    Out of scope:

    • GitHub
    • Google
    • LinkedIn
    • Instagram

    • Visitor comments using Disqus
    • ICS (contacts) file with logo

    Subscription capture

  24. Setup AWS account for EmailOctopus
  25. Setup EmailOctopus account
  26. Setup AWS permissions for EmailOctopus
  27. Position subscription form (always visible on right side of page)

  28. Error messages in form
  29. Pop-up subscription offer form
  30. CAPTCHA in form

  31. Commenting buttons to create a post on Twitter, Facebook, Google+, etc.

    Out of scope:

    Photo processing

  32. Create an IAM sign-in URL on https://console.aws.amazon.com/iam/home/
  33. Create <a target=”_blank” href=”http://docs.aws.amazon.com/STS/latest/UsingSTS/CreatingSAML.html” AWS Security Token Service (STS) SAML 2.0 tokens</a> with associated key policies defining permissions. for developers to access EC2 files. Wilson+Keith[1 hr]
  34. Setup Watch for billing levels.
  35. Review Amazon Trusted Advisor Wilson+Keith[.5 hr]

  36. Transfer original photos (tiff) to S3. Gail[4 hrs] 81 files

  37. DONE Extract from previous site a .csv file listing attributes of each picture file. Wilson[2 hrs.]

    Portfolio Spreadsheet

    NOTE: The spreadsheet contains one line for each work:

    • _Category of work (Acrylics, Watercolor, MixedMedia)
    • Full sized file name
    • Width & height of picture

    • Thumbnail file name (with path assumed)
    • Width & height of thumbnail

    • _Year of creation (when done)
    • _Size of file (KB)
    • _Media (C)
    • _Width of actual piece
    • _Height of actual piece

    • _Note = comments about the picture (This makes a huge difference)
    • _Tags describe the work (for use in mouse-over and publicity)

  38. DONE Correct typos from previous site. WILSON[2 hrs]
  39. DONE Sample from the .csv file. WILSON[2 hrs]

  40. DONE Parse .csv file to generate .md files. A Python program? WILSON[3 hrs]

    To do on each picture:

  41. Identify width, height, size of each picture file [4 hrs] (for 80 works)

  42. Comments about the creation of each. This helps a lot to increase sales.

    Tags

  43. Hash tag each. This helps a lot to increase interest.

    • color: #blue #green #BlackAndWhite
    • subject: #vinyard #bridge #lake #river #portrait
    • objects in subject: #tractor #grapes #flowers #fruit #trees
    • social grouping: #rap #moms #teen #farmer
    • subject location: #nyc #brooklyn #italy #amalfi
    • artist location: #seattle #northwest
    • art media: #graffiti
    • art medium: #spraycan #acrylic #watercolor #graphite
    • art tool brand: #nikon #nike
    • adjectives: #beautiful #amazing #fantastic #sunny #bright
    • emotion: #peaceful #sad #happy #thrilled #exhilirated #strong

  44. See the popularity of tags at http://www.google.co.uk/AdWords

  45. Size it in 3 different types of screens (mobile, tablet, desktop)
  46. Crop picture for Instagram squares (use instasize app, Gramblr)

  47. Compress to make smaller
  48. Visible Watermark
  49. Invisible Watermark
  50. Put the file in a “CDN” around on the web.

    Shopping cart

  51. Review the Snipcart demo workflow and identify desired customizations and changes in stock UI elements.

    PROTIP: Shopping cart construction comes before many other website construction activities because its use may place design innovations and limitations to other parts of the site in order for the whole site to remain consistent in look and feel. For example, Snipcart uses Jekyll collections.

  52. Sign-in to your GitHub account and visit website to fork it. Notice it is on branch gh-pages.
  53. View the site on your github

  54. Register an account at Snipcart and verify email. Keith[1 hr]
  55. Integrate Snipcart into site based on GitHub.
  56. Get TEST api_key and add in _config.yml with other account data. Keith[1 hr]
  57. Code head.html for layout productdetails. Wilson[1 hr]
  58. Create a program to generate a md file for each “product” (work of art) in the Portfolio.csv file. Wilson[2 hrs]

    NOTE: A complete checkout is possible from a public URL, not from a local instance.

  59. After testing, review Dashboard

    Contact

  60. Contact text
  61. Contact photo
  62. Contact audio/video

    About

  63. Author statement text
  64. Author photo
  65. Author audio/video

    Exhibits

  66. Exhibits text
  67. Exhibits photo
  68. Exhibits audio/video

  69. Gallery index photos (3) cropped, compressed, positioned
  70. Gallery index page with links

  71. Add https://github.com/patrickkunka/mixitup. Ayush[2 hr]
  72. Add Google map. Ayush[2 hr]

    Portfolio page

  73. Add &LT;div & change CSS to remove underlines. Ayush[1 hr]
  74. Adjust CSS to vertically center pictures. Ayush[1 hr]

    SEO

  75. Google Analytics JavaScript
  76. Google search ownership file
  77. Bing search site ownership file
  78. robots.txt file to specify folders and files desired private
  79. SSL certificate for better ranking
  80. Google PageSpeed for better ranking

    Generated by Jekyll:

    • Site RSS XML file for Google Search to discover http://webdesign.tutsplus.com/articles/general/all-you-need-to-know-about-xml-sitemaps/

    Features

  81. Add search field (and custom response page)

  82. Get Google Maps API key
  83. Map in Exhibits page using Google Maps or other API

    Out of scope:

    • Infinte scrolling
    • Lookup location based on IP
    • Confirm identity simply, such as clicking a pre-agreed image
    • Time-appropriate greeting based on visitor’s local time zone
    • Personalized greeting based on personalization data stored in browser during previous session
    • Store history of browser version, OS, etc.
    • Cookie policy verification (for EU visitors)
    • Display most popular post on anonymous landing

    Monitization

    Out of scope:

    • Google ads
    • Shop (screen savers, mugs, t-shirts, etc.)

    Performance

  84. Setup Gemfile
  85. Setup Grunt/Gulp task runners
  86. Minify HTML, CSS, and JavaScript files

    Done by Jekyll:

    Maintenance

  87. Backups
  88. Recovery from backup

    Campaign

  89. Load emails
  90. Announce new site
  91. Launch party

  92. Item of the week/month

Websites Liked

  • http://www.currier.org/
  • http://sgnhs.org/
  • http://www.wellesley.edu/DavisMuseum/davismenu.html
  • https://adelmanfineart.com/
  • http://www.irisscottfineart.com/

Paid pre-designed websites :

Website advice specifically to artists

  • http://theabundantartist.com/15-ways-to-sell-your-art-online/

TODO:

  • Make this page into a form where people can check what they want, save it, send it to others, etc. like this.

https://jamstack.training Tamas Piros offers free

  • Introduction to the JAMstack - Learn the fundamentals of the JAMstack.
  • Create a Blog Using the JAMstack - Create, manage and publish your own blog using 11ty and NetlifyCMS.
  • Create an E-Commerce App with Gatsby - How to utilise the JAMstack when building e-commerce websites

References

JAMstack e-commerce panel discussion

Phil Hawsworth of Netlify has a 3-hour YouTube course his slack announced the 8-video Headless Commerce Summit Sep 3, 2020. @jamstackconf

More on front-end software development

This is one of several topics:

  1. UI Design Systems
  2. Text Editors
  3. Markdown text for GitHub from HTML
  4. 508 Accessibility

  5. gRPC (g___ Remote Procedure Call)
  6. HTTP/2 Transition Project Plan

  7. Front-end UI creation options
  8. Docusaurus static website generator
  9. Static websites
  10. JAM Stack Website Project Plan
  11. Jekyll Site Development
  12. Gatsby app generator

  13. Website styles
  14. Website Styling
  15. VueJs front-end framework

  16. Protractor to automate testing of Angular and other web pages

  17. Email from website
  18. Search within Hyde format Jekyll websites
  19. Windows Tile Pin Picture to Website Feed

  20. Data Visualization using Tableau