Elements of Development

Software Design is the process by which an agent creates a specification of a software artifact, intended to accomplish goals, using a set of primitive components and subject to constraints. Software Design usually involves Problem Solving & Planning a Software Solution.

The Systems Development Life Cycle or the Application Development Life-Cycle, is a Process for Planning, Creating, Testing, and Deploying an Information system.

Depending on your specific business needs, software solutions can unify your business logistics: allow you to manage your content, house your customer data, allow you to control inventory, fulfill orders, and process payments, all in a single platform.

Software Development Tools

CMS: WordPress – Drupal – Joomla
Languages: HTML5 – CSS3 – JavaScript – PHP 
SPA: API – REST – HTTP – JSON 
JS Frameworks : Angular – React – Vue
JS Libraries: jQuery – D3 – Redux
Database: PostgreSQL – MySQL – MongoDB
Web Servers: Linux – Ubuntu – Apache
UX Software: Sketch – InVision – Omnigraffle – Axure – Adobe XD 
Cloud: Google Cloud – Amazon Web Services

CMS

Almost All (99.9%) of Companies Today Use a Content Management System or CMS (Software Application) to Create, Manage, and Modify their Digital Content, Dynamically, without having to program each page.

Content Management Systems are Extremely User Friendly (No Programming Necessary) – Very Accessible – Easy to Optimize – Extremely Secure – and a cost effective method of managing content. 

WordPress 

According to W3techs, WordPress has 61.8% of the CMS market share — more than all other systems (eg, Drupal, Joomla) combined. 

1. WordPress – CMS Based on PHP and MySqL – Plugin Architecture and Template System (Themes)

2. Drupal – CMS Based in PHP- GNU (General Public License) Personal, Corporate, Political, Government)

3. Joomla! – CMS Based in PHP – Model View Web App Framework (Can be used Independently)

54 of the Top 100 Companies in the World Use WordPress:

Nike, Mercedes, Microsoft News, CNN, Star Wars, Bloomberg, BBC, Sony Music,  Walt Disney, Facebook News, Chicago Sun Times, Playstation, New York Times,  and many others all use WordPress. 

More than 35% of the Internet uses WordPress – That means more than 450 Million Websites are using WordPress right now – Making it the Top Content Management System in the World. 
(We Build Most of our Projects in WordPress.)

Plugins

Part of WordPress’s appeal is it’s plugin architecture; plugins are software Add-Ons which contain a group of Additional Functions (PHP).

WordPress has over 50,000 plugins available, each of which add additional features enabling users to tailor their sites to their specific needs. These customizations range from SEO, to client portals used to display private information to logged in users, to content displaying features, such as the addition of chat widgets and navigation bars. 

Themes

WordPress users may install and switch between themes. Themes allow users to change the look and functionality of a WordPress website and they can be installed without altering the content or health of the site.

Every WordPress theme should be designed using some standards with structured PHP (Hypertext Pre-processor), valid HTML (Hypertext Markup Language), and CSS (Cascading Style Sheets).

Today, JavaScript and jQuery are being used to add responsiveness to themes. 

Responsive Web Design

Responsive Web Design is about using HTML and CSS to automatically to resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones)

Desktop HD – 1440 x 1024 px
Desktop – 1024 x 1024 px
Tablet – 1024 x 768 px
Mobile – 1024 x 320 px 

Fundamentals

What is a Website?

A Website is a Collection of Web Pages

What is a Web Page?

A Web Page is a Collection of Content (Text, Images, and Videos) Purposefully Arranged to Highlight What You Do and How Well you Do it.

HTML, CSS, JavaScript are the Basic Languages of Web Pages

HTML is the Content (Headings, Paragraphs, Links, Images, Buttons)

  • HTML stands for Hyper Text Markup Language
  • HTML is the standard markup language for Web pages
  • HTML elements are the building blocks of HTML pages
  • HTML elements are represented by <> tags

CSS is is the Style (Page Layouts, Styles, Colors, Fonts)

  • CSS stands for Cascading Style Sheets
  • CSS describes how HTML elements are to be displayed on screen
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • External stylesheets are stored in CSS files

CSS Modules

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. The key words here are scoped locally. With CSS Modules, your CSS class names become similar to local variables in JavaScript – A CSS Module goes into the compiler, and CSS comes out the other side.

JavaScript is the Behavior – JavaScript can update and change both HTML and CSS. JavaScript can calculate, manipulate and validate data. 

  • JavaScript Can Change HTML Content
  • JavaScript Can Change HTML Attribute Values
  • JavaScript Can Change HTML Styles (CSS)
  • JavaScript Can Hide HTML Elements
  • JavaScript Can Show HTML Elements

JavaScript 6

ECMAScript is a scripting-language specification standardized by ECMA International. It was created to standardize JavaScript to help foster multiple independent implementations.

ECMAScript 6 is also known as ES6 and ECMAScript 2015. Some people call it JavaScript 6.

New features in ES6.

  • JavaScript let
  • JavaScript const
  • JavaScript Arrow Functions
  • JavaScript Classes
  • Default parameter values
  • Array.find()
  • Array.findIndex()
  • Exponentiation (**) (EcmaScript 2016)

The Document Object Model 

The Document Object Model (DOM) is a programming interface that treats HTML and XML documents as a tree structure where in each node is an object representing a part of the document. 

The HTML DOM (Document Object Model) is constructed as a tree of Objects: When a web page is loaded, the browser creates a Document Object Model of the page.

DOM OBJECT MODEL TREE 

With the object model, JavaScript gets all the power it needs to create dynamic HTML:

  • JavaScript can change all the HTML elements in the page
  • JavaScript can change all the HTML attributes in the page
  • JavaScript can change all the CSS styles in the page
  • JavaScript can remove existing HTML elements and attributes
  • JavaScript can add new HTML elements and attributes
  • JavaScript can react to all existing HTML events in the page
  • JavaScript can create new HTML events in the page

What is the DOM?

The DOM is a W3C (World Wide Web Consortium) standard.

The DOM defines a standard for accessing documents:
“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”

The W3C DOM standard is separated into 3 different parts:

  • Core DOM – standard model for all document types
  • XML DOM – standard model for XML documents
  • HTML DOM – standard model for HTML documents

What is the HTML DOM?

The HTML DOM is a standard object model and programming interface for HTML. It defines:

  • The HTML elements as objects
  • The properties of all HTML elements
  • The methods to access all HTML elements
  • The events for all HTML elements

In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

Ease of Use 

Rather than having to code each line with specific instruction:

For Example:

<strong>Designed – Developed –Curated Content For Dozens of Web Applications & Enterprise Software Systems</strong>

Users can simply use a Bootstrap Friendly Theme allowing them to use Drop Down Boxes to instruct the Software that they want this particular line of text, 25 Pixels, Centered, and Bold.

Curated Content For Dozens of Web Applications &
Enterprise Software Systems

(It makes development as easy as using a Word Document!)

CMS, Themes, Plugins have Tons of User-Friendly Software Already Built in Making UX Design and Development: Simple, Flexible, and Scalable. 

Headless CMS

In the past, using a CMS like WordPress meant you had to build your front-end using PHP.

Now, with a headless CMS, you can build your front end with whatever technologies you like; this is because of the separation of the front-end and the back-end via an API. 

You now can create a SPA (single-page application) using React, Angular or Vue, and control the content using a CMS like WordPress.

Key Acronyms

  • CMS — content management system. Think WordPress, Drupal, Joomla, Magneto.
  • SPA — single-page application. Rather than re-loading each page in its entirety, a SPA application loads content dynamically. The fundamental code (HTML, CSS and JavaScript) of the website is loaded just once. Think React, Vue, Angular.
  • API — application programming interface. In simple terms, a series of definitions that a service provides to allow you to take and use its data. Google Maps,. Medium, and now every WordPress site comes with an API built-in. .
  • REST — representational state transfer. A style of web architecture based around HTTP’s request methods: GET , PUT , POST and DELETE . WordPress’s built-in API is a REST or “RESTful” API.
  • HTTP — hypertext transfer protocol. The set of rules used to transfer data over the web. https (the secure version).
  • JSON — JavaScript object notation. Though derived from JavaScript, this is a language-independent format for the storage and transfer of data.

Computer Languages:

Vocabulary and Set of Grammatical Rules for Instructing a computer or device to perform task

HTML5 – Software Solution Stack that defines properties & behaviors of web pages

CSS3 – Cascading Style Sheet Language (rounded corners, shadows, gradients, transitions, animations, multi-columns, flexible box, or grid layout

Javascript – High Level Interpreted Scripting Lang. (Conforms to the ECMAScript Specs) JS has curly-bracketed syntax, dynamic typing, based object-orientation, first-class functions.

PHP – (Hyper Text Preprocessor) – Server Side Gen. Purpose Prog. Lang. 

Java – General Purpose Prog. Lang. (Class Based, Object Oriented) Fast, Secure, Reliable)

Python – Interpreted, high-level, general-purpose programming language – emphasizes code readability with its notable use of significant whitespace – Reddit – Instagram – YouTube – Google

Frameworks:

Foundation with a specific level of Complexity (Set of Libraries, Compilers, Interpreters, API)

Angular – (Direct DOM Rendering System) TypeScript and Dart Sep 2016 -based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations.

React – (Virtual DOM) React is a JavaScript library for building user interfaces specifically for single-page applications.. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base (view layer) in the development of single-page or mobile apps, as it is optimal for fetching rapidly changing data that needs to be recorded. React also allows us to create reusable UI components.

Vue – (Virtual DOM) Vue.js is an open-source Model–view JavaScript framework for building user interfaces and single-page applications 

Node – Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside of a browser

AJAX is a set of web development techniques used by client side frameworks and libraries to make asynchronous HTTP calls to the server. AJAX stands for Asynchronous JavaScript and XML. AJAX used to be a common name in the web development circles and many of the popular JavaScript widgets were built using AJAX.

Bootstrap – OS CSS Framework (Responsive, Mobile First Front End Web Dev.) CSS and JS based Design Templates for Typography, Forms, Buttons, Nav., and other interface components. 

Storybook – Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

Ember – Ember.js is an open-source JavaScript web framework, based on the Model–view–view-model pattern. It allows developers to create scalable single-page web applications by incorporating common idioms and best practices into the framework. Ember is used on many popular websites, including Apple Music Square, Inc.

Aurelia is the next generation client-side JavaScript framework created by Rob Eisenberg under the ECMAScript 6 (ECMA 2015) standards to be the successor of Durandal 2.x framework to create your own applications for the browser. It means its core and its collaborative libraries have been written with ES6 completely.

Ionic is a complete open-source SDK for hybrid mobile app development – original version was released in 2013 and built on top of AngularJS and Apache Cordova.

Mocha is a JavaScript test framework for Node.js programs, featuring browser support, asynchronous testing, test coverage reports, and use of any assertion library 

Next is a React framework, server rendering React applications has never been easier, no matter where your data is coming from

Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. It has a clean, obvious syntax so that you can easily write tests.

Nightwatch is an automated testing framework for web applications and websites, written in Node. js and using the W3C WebDriver API (formerly Selenium WebDriver. It is a complete browser (End-to-End) testing solution which aims to simplify the process of setting up Continuous Integration and writing automated tests.

Libraries:

A collection of non-volatile resources used by computer programs, may include configuration data, documentation, help data, message templates, pre-written code and subroutines, classes, values or specifications

jQuery – World’s Largest Most Popular JavaScript Library – Giant set of Shortcuts + Tools making JavaScript a lot easier is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License. As of May 2019, jQuery is used by 73% of the 10 million most popular websites.

Algolia Places s a geo-coder providing a fast, distributed and easy way to use an address search autocomplete on your website. It is available as a Javascript autocomplete library, as a REST API and inside the JS, PHP, Swift and Android Algolia API clients.

Cleave.js – is a simple lightweight JavaScript library used to restrict and format input text to a specific pattern (credit cards, phone numbers, dates, etc). AMD and commonJS are supported. Also provides as a React component.

D3 stands for Data-Driven Documents. It is an open-source JavaScript library to create custom interactive data visualizations in the web browser using SVG, HTML and CSS. With the massive amount of data being generated today, communicating this information is getting difficult.

Glimmer is a library for building mobile applications that arose out of the Ember.js front-end JavaScript stack, will use custom byte-code to improve web application loading on mobile devices. … Because Glimmer is the rendering engine for Ember, improvements in Glimmer help Ember as well.

Slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping

TensorFlow – TensorFlow is a free and open-source software library for data-flow and differentiable programming across a range of tasks. It is a symbolic math library, and is also used for machine learning applications such as neural networks.

Spark – Apache Spark is an open-source distributed general-purpose cluster-computing framework. Spark provides an interface for programming entire clusters with implicit data parallelism and fault tolerance.

Cordova – Apache Cordova is a mobile application development framework originally created by Nitobi. Adobe Systems purchased Nitobi in 2011, rebranded it as PhoneGap, and later released an open source version of the software called Apache Cordova.

Hadoop – Apache Hadoop is a collection of open-source software utilities that facilitate using a network of many computers to solve problems involving massive amounts of data and computation. It provides a software framework for distributed storage and processing of big data using the MapReduce programming model. 

Tableau – Tableau Software is an American interactive data visualization software company founded in January 2003 by Christian Chabot, Pat Hanrahan and Chris Stolte, in Mountain View, California. The company is currently headquartered in Seattle, Washington, United States focused on business intelligence.

DataBase:

PostgreSQL, also known as Postgres, is a free and open-source relational database management system emphasizing extensibility and technical standards compliance. It is designed to handle a range of workloads, from single machines to data warehouses or Web services with many concurrent users.

MySQL – MySQL is an open-source relational database management system. Its name is a combination of “My”, the name of co-founder Michael Widenius’s daughter, and “SQL”, the abbreviation for Structured Query Language.

MongoDB – MongoDB is a cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with schema. MongoDB is developed by MongoDB Inc. and licensed under the Server Side Public License.  

Django is a Python-based free and open-source web framework, which follows the model-template-view architectural pattern. It is maintained by the Django Software Foundation, an independent organization established as a 501 non-profit. Django’s primary goal is to ease the creation of complex, database-driven websites.

Web Servers:

Linux is a family of open source Unix-like operating systems based on the Linux kernel, an operating system kernel first released on September 17, 1991, by Linus Torvalds. Linux is typically packaged in a Linux distribution. 

Ubuntu – Ubuntu is a free and open-source Linux distribution based on Debian. Ubuntu is officially released in three editions: Desktop, Server, and Core. All the editions can run on the computer alone, or in a virtual machine. Ubuntu is a popular operating system for cloud computing, with support for OpenStack

Apache – The Apache HTTP Server, colloquially called Apache, is free and open-source cross-platform web server software, released under the terms of Apache License 2.0. Apache is developed and maintained by an open community of developers under the auspices of the Apache Software Foundation.

UX Software: 

Sketch – Sketch is a vector graphics editor, developed by the Dutch company Bohemian Coding. Sketch was first released on 7 September 2010 for macOS. It won an Apple Design Award in 2012. A key difference between Sketch and other vector graphics editors is that Sketch does not include print design features. 

InVision is a prototyping tool that allows you to take your design mockups and turn them into interactive prototypes. … It gives a better experience when sharing designs.

Adobe Creative Cloud is a set of applications and services from Adobe Systems that gives subscribers access to a collection of software used for graphic design, video editing, web development, photography, along with a set of mobile applications and also some optional cloud services.

Adobe Photoshop is a raster graphics editor developed and published by Adobe Inc. for Windows and macOS. It was originally created in 1988 by Thomas and John Knoll. Since then, this software has become the industry standard not only in raster graphics editing, but in digital art as a whole. 

Adobe Illustrator is a vector graphics editor developed and marketed by Adobe Inc. Originally designed for the Apple Macintosh, development of Adobe Illustrator began in 1985. Along with Creative Cloud, Illustrator CC was released.