Showing posts with label RWD. Show all posts
Showing posts with label RWD. Show all posts

Sunday 21 March 2021

Building Response Canvas Power App

Problem:  Power Apps is great but historically you either build for the tablet or the phone and then the end users get an alright experience on the other device type.  Microsoft have Horizonal and Vertical containers and it is a greate way to build Resposnvie/Progressive applications.  

On the Power App make the following settings changes:

  • Settings > Advanced Settings > Enable "Layout Containers"
  • Settings > Screensize + Orientation > Diable "Scale to Fit"
  • Settings > Screensize + Orientation > Diable "Lock Orientation"

Layout controls: Horizontal container & Vertical container, use these 2 controls to get a Responsive Design.  Screen layouts are only available for the Tablet layout. 

WIP

Thursday 1 January 2015

UI and Framework Notes

Assumed/Common Framework:
jQuery
Knockout vs Angular vs Backbone -
Modenrizr.js - detect browser capability
underscore - utility functions for arrays and collections.  Feels like LINQ queries
toastr - toast notifications

Data Access Modules:
1.> data.js - manage OData client access for JavaScript (supports caching & batch operations)
2.> Breeze.js - entity modelling and querying (ORM for JS.  Backend transformed to a data object i.e. 3 related customer tables becomes the customer object). Looks like LINQ queries.  Data.js is inside of breeze.

Presentation / App Pattern:
Knockout.js - (MVVM), declarative binding and dependency tracking.  Matches data to front end, then track changes and update.   Easy to use and understand.
Angular.js - MVC data binding,routing (url controls pages).
Compare: Knockout (good for SPAs) for more complex application whereas knockout is more light weight.

Responsive Web Design (RWD):
LESS - Minimises css, makes it simple to read not repeating attributes.
Bootstrap.js / Zurb Foundation 4 - Media queries to style for the device based on 12 column layouts.
Framework for cross cutting concerns (logging, caching,)....

Progressive Web Apps (PWA):
"Progressive Web Apps allow what you build to be installed by anyone, anywhere, on any device with a single codebase"

Flutter:  
Created by Google that uses DART .  Build once and HTML deploy for browser UI needs to be responsive.  Separate deployable code for Android and iOS, so PWA compliant.

PWA/RWD UI 3 break points:
  • Desktop: 1024+ 
  • Tablet: 600-1023
  • Mobile: 320-599

Useful JS modules:
JS Mapping module:

Tuesday 16 December 2014

SharePoint 2013 Public Website Check list

Ux:
  1. Responsive design vs Device channels - Does the site switch resolutions and browsers gracefully.  RWD vs AWD (Adaptive Web Design)
  2. Broken Links: Check My Links 3.3.4 is a plugin for Chrome to check a page for broken links (go over main pages at least)
  3. Fiddler - Use for 404, and other errors, look for dodgy urls and headers being passed around.
  4. Charles is a similar tool - helps with broken links, size of files, shows web calls, review response headers, size of files and speed of execution.
  5. Minification - is the minification of JavaScript and CSS.
  6. Alt labels, WCAG, valid html checker
SEO:


Testing:
All devices and browsers (1. PC/laptop (IE 11-IE7, Chrome, Firefox, Opera, Mac/Safari), 2. Phones(iPhone, Android OS, Windows OS), 3. Tablets (Android, MS/Surface, iOS/iPad).

Helper Tools:
AddThis.com - Nice tool to add Social bookmarking service for your websites. Collects stats TypeKit - Nice for Fonts, review the licensing needed.

Security:
  1. Check Internal Search is not returning passwords
  2. Check google is not picking up passwords/confidential data 
  3. Remove response headers:
  4. MicrosoftSharePointTeamSiteServices(versio), X-Powered-By. X-SharePointHealthScore, X-aspNet-Version) Performance X-SharePointHealthScore
  5. Check XSS and SQL but with SharePoint you are testing the product
<script>alert();</script>
<img src=;; onerror=alert();>
<iframe src=javascript:alert();>