14. Interface and Application Programming
Hero shot
Comparing tools
As I studied graphic and web design, I understandably tend to check on the different web tools for interface and application programming :
Someone from the Fab Academy suggested the code learning website W3 Schools.
I took a look and tried the tests of HTML and CSS.
As I got 79% for HTML and 62% for CSS, I've decided to get through the lessons provided by the website to update my knowledge and learn some othe languages after these.
HTML5 (by Ericom SOftware and Spiceworks)
HTML5 is the latest standard of Hypertext Markup Language, the code that describes the structure and presentation of web pages.
HTML is a set of rules that tell web browsers how to interpret code to display web pages.
HTML5, the 5th version of this set, improves and upgrades website capabilities, and helps developers make web content, such as websites and web applications, more interactive and dynamic.
Before this upgrade, HTML focused on the elements used for marking up content for the visualization of web pages. HTML5 takes things ahead by offering numerous new methods for completing tasks. In the case of previous HTML versions, these tasks would require specific programming or proprietary plug-ins such as Silverlight or Flash.
HTML5 features include markup and scripting elements, as well as application programming interfaces (APIs) for functionalities such as adding video and audio on a page, local data storage, offline operations, and location data usage. With HTML5 addressing standard web development functions, dev teams don’t need to create functionality from scratch for every application and can instead rely on built-in browser capabilities.
CSS3 (by Simpli Learn)
CSS is an acronym, short for Cascading Style Sheets and is a stylesheet language used by web designers to create a style or make web page elements more attractive. Developed by the World Wide Web Consortium (also known as W3C), CSS is one of the essential skills that a web developer should have to build visually appealing websites.
Cascading Style Sheets lets web designers style elements created with a markup language (typically, that's HTML). In addition, CSS boasts a straightforward syntax, making it easier to learn and use.
CSS allows developers to add various attributes such as background color, text color, font size, and border size. In addition, developers can alter these values to customize the webpage’s visuals and create a more appealing aesthetic.
CSS3, also known as Cascading Style Sheets Level 3, is a more advanced version of CSS and the successor of CSS2. CSS3 is used for the same thing as CSS, namely to style web pages and make them more attractive and user-friendly. In addition, CSS3 incorporates more up-to-date features designed to increase efficiency and make it more convenient for developers to use.
PHP (by Free Code Camp)
PHP is an open-source server-side scripting language that many devs use for web development. It is also a general-purpose language that you can use to make lots of projects, including Graphical User Interfaces (GUIs).
The abbreviation PHP initially stood for Personal Homepage. But now it is a recursive acronym for Hypertext Preprocessor. (It's recursive in the sense that the first word itself is an abbreviation, so the full meaning doesn't follow the abbreviation.)
The first version of PHP was launched 26 years ago. Now it's on version 8, released in November 2020, but version 7 remains the most widely used.
PHP runs on the Zend engine, which is the most popular implementation. There are some other implementations as well, like parrot, HPVM (Hip Hop Virtual Machine), and Hip Hop, created by Facebook.
PHP is mostly used for making web servers. It runs on the browser and is also capable of running in the command line. So, if you don't feel like showing your code output in the browser, you can show it in the terminal.
Javascript (by Mdn Web Docs and Semrush)
JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies : HTML, CSS and Javascript.
JavaScript is used to make dynamic websites, web and mobile apps, games, web servers, back-end infrastructures, and more.
JavaScript differs from other programming languages :
- It’s an Interpreted Language
This means it can be executed directly in a browser.
Other languages, like C, C++, and Java, are compiled languages and need to be translated into machine code before they can be executed. - It Uses Dynamic Typing
Dynamic typing means variable types are associated with runtime values, not named or declared fields.
This allows developers to write code faster, as they don’t have to worry about specifying variable types.
For example, a developer could assign the variable “a” the value of 100. The compiler will infer at runtime that “a” represents an integer.
However, this also means variable types could be misinterpreted as they are run. This can cause bugs and errors. - It’s Primarily Used in Client-Side Execution
JavaScript is unique in that it’s most commonly run in the user’s web browser. Not on a server.
This means JavaScript can interact with the user, respond to user inputs, and dynamically update the content of the page without needing to communicate with a server.
Other major languages, such as PHP and Ruby, are primarily used server-side. - It’s Ubiquitous
Unlike many computer programming languages that are confined to a handful of specific use cases, JavaScript is becoming a general-purpose language.
It’s supported by all major browsers.
It can be used both client-side and server-side.
And it can be used to develop websites, mobile apps, and software.
jQuery (by W3 Schools)
jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
The jQuery library contains the following features:
- HTML/DOM manipulation
- CSS manipulation
- HTML event methods
- Effects and animations
- AJAX
- Utilities
Tip: In addition, jQuery has plugins for almost any task out there.
Bootstrap (by Tech Target)
Bootstrap is a free, open source front-end development framework for the creation of websites and web apps. Designed to enable responsive development of mobile-first websites, Bootstrap provides a collection of syntax for template designs.
As a framework, Bootstrap includes the basics for responsive web development, so developers only need to insert the code into a pre-defined grid system. The Bootstrap framework is built on Hypertext Markup Language (HTML), cascading style sheets (CSS) and JavaScript. Web developers using Bootstrap can build websites much faster without spending time worrying about basic commands and functions.
Bootstrap makes responsive web design a reality. It makes it possible for a web page or app to detect the visitor's screen size and orientation and automatically adapt the display accordingly. The mobile-first approach assumes smartphones, tablets and task-specific mobile apps are employees' primary tools for getting work done. Bootstrap addresses the requirements of those technologies in design and includes UI components, layouts, JavaScript tools and the implementation framework. The software is available precompiled or as source code.
Mark Otto and Jacob Thornton developed Bootstrap at Twitter to improve the consistency of tools used on the site and to reduce maintenance. The software was formerly known as Twitter Blueprint and is sometimes referred to as Twitter Bootstrap.
SVG (by Adobe)
The SVG file format is a popular tool for displaying two-dimensional graphics, charts and illustrations on websites. Plus, as a vector file, it can be scaled up or down without losing any of its resolution. Learn more about the key features of SVG images, their pros and cons and how the SVG format has evolved.
Scalable Vector Graphics (SVG) is a web-friendly vector file format. As opposed to pixel-based raster files like JPEGs, vector files store images via mathematical formulas based on points and lines on a grid. This means that vector files like SVG can be significantly resized without losing any of their quality, which makes them ideal for logos and complex online graphics.
It’s not just their resizing abilities that make SVGs hugely popular with web designers. SVGs are written in XML code, meaning they store any text information as literal text rather than shapes. This allows search engines like Google to read SVG graphics for their keywords, which can potentially help a website move up in search rankings.
You can easily spot an SVG file by its .svg extension.
Advantages of SVG files :
- Unlike raster files, which are made up of pixels, vector graphics like SVGs always maintain their resolution — no matter how large or small you make them. You don’t have to worry about SVG images losing their quality in certain browsers or when you resize them to appear in different places.
- Basic SVG files are often smaller than raster images, which are built from lots of coloured pixels rather than using mathematical algorithms.
- Because SVG files treat text as text (and not as design), screen readers can scan any words contained in SVG images. This is very useful for people who need help reading webpages. Search engines can also read and index SVG image text.
Disadvantages of SVG files :
- SVG files are great for web graphics like logos, illustrations and charts. But their lack of pixels makes displaying high-quality digital photos difficult. JPEG files are generally better for detailed photographs.
- Only modern browsers can support SVG images. You may find it a challenge to use SVG files with Internet Explorer 8 and other older browsers.
- The code contained in SVG images can be hard to understand if you’re new to its file format.
Flat UI (by Designerly)
The design language known as flat UI began as one component of responsive web design. A responsive design is one that adapts as necessary – like changing size or layout – depending on the user’s device or operating system. The same webpage shouldn’t operate the same way on a smartphone as it does on a notebook computer, for example.
Flat UI is a good fit for responsive design because of its simplified shapes and lack of ornamentation. Good responsive design must load fast and look uncluttered, and employing its design elements is a great way to ensure that level of performance.
The underlying design principles behind flat UI are fairly straightforward and typically:
- Feature simple, two-dimensional shapes
- Use bold, bright colors to create contrast between elements
- Lack unnecessary ornamentation
- Don’t use much texture but may employ transparency to suggest layers of material
It’s most frequently compared to previously popular design schools of thought like skeuomorphism. Skeuomorphism is where digital objects are deliberately modeled after their real-world counterparts, such as a note-taking app resembling real paper or a camera icon looking like a vintage Leica.
On the other hand, flat UI uses simple elements that dynamically change size, shape, or placement depending on how they’re interacted with. It’s more fluid and less reliant on behaving like real objects than skeuomorphism.
Disadvantages
- Problematic interaction: For some users, the lack of depth in flat UI makes it difficult to discern how to interact with page elements or detect where the edges of buttons and other elements actually are. Long-familiar visual cues, like blue or underlined links, are not always a part of flat UI.
- Design cohesion: Flat UI uses primarily bright colors. Some designers find it difficult to match and coordinate these bolder hues. It could be a challenge for unseasoned designers to get the hang of it.
- Typography challenges: Another concern among designers is choosing the right typefaces. Flat design tends to make overly narrow typography look strange and unreadable.
None of these challenges is insurmountable, but they do show how flat UI has raised the bar in the visual design world. Flat UI is appealing and functional, but it’s a challenge to get right.
Advantages
- Performance: As mentioned, one of flat UI’s chief advantages is that it supports responsive designs and fast loading times. Users will bounce away from your site less frequently.
- Visually appealing: Although flat UI designs hit the mainstream around 2011 and 2012, the look is still considered pretty trend-setting. Many web designers and users favor flat UI, and it’s still a great way to stand out.
- Future-proof design: Nothing’s really future-proof in the tech world, but flat UI design is likely to be relevant for some time, and there’s nothing inherent about it that’s likely to look old-fashioned too quickly.
Some designers think designing for flat UI is too stifling when it comes to creativity. Others welcome the challenge that limitations bring.
Interface coding
Materials used during the assignment
- 2x ESP32 WROOM
- Computer
- Smartphone
- DHT11 Humidity and Temperature sensor
- Wires
- Cables
Test 1 : web interface to control your NodeMCU ESP32 (by Aranacorp)
This tutorial is only complete in french. The end of the English version seems to be missing !
To understand how to build a web interface with an ESP32, I checked on internet and found an easy tutorial.
You can download the code right here (pasting the code will alter this page as it also contains some html and css codes).
To go a bit further in my final project, I started the exercise with a RGB LED which I will need later.
At first I tried out the RGB LED with this simple light color changing code from ESP32 IO's website :
/*
* This ESP32 code is created by esp32io.com
*
* This ESP32 code is released in the public domain
*
* For more detail (instruction and wiring diagram), visit https://esp32io.com/tutorials/esp32-rgb-led
*/
#define PIN_RED 23 // GPIO23
#define PIN_GREEN 22 // GPIO22
#define PIN_BLUE 21 // GPIO21
void setup() {
pinMode(PIN_RED, OUTPUT);
pinMode(PIN_GREEN, OUTPUT);
pinMode(PIN_BLUE, OUTPUT);
}
void loop() {
// color code #00C9CC (R = 0, G = 201, B = 204)
setColor(0, 201, 204);
delay(1000); // keep the color 1 second
// color code #F7788A (R = 247, G = 120, B = 138)
setColor(247, 120, 138);
delay(1000); // keep the color 1 second
// color code #34A853 (R = 52, G = 168, B = 83)
setColor(52, 168, 83);
delay(1000); // keep the color 1 second
}
void setColor(int R, int G, int B) {
analogWrite(PIN_RED, R);
analogWrite(PIN_GREEN, G);
analogWrite(PIN_BLUE, B);
}
Then I tried out the "Web Interface to Control the ESP32" code and updated it to be able to use the RGB LED instead of a 1-color LED.
For that, I had to replace the LED definition by a definition of each color from the RGB LED (Green, Red and Blue). Then I had to make sure to replace the LED variable, in the rest of the code, by the 3 new variables (GREEN, RED and BLUE) :
The result wasn't so great as the light only turned off for a "microsecond".
That's when I decided to try the code with a simple 1-color LED. I only had 1 variable to define and I got a better result as the light really turned on and off.
Unfortunately, internet was low at the lab at that day. This was a "little bit" frustrating as we were always getting a blank page telling that there's a connexion problem (really?!)... :(
If, like me, you want to change the design of the page, you'll be able to work on the html/CSS code that you'll find integrated in the Arduino code.
Design changes examples
This is the original design :
This is the design after I changed the colors :
And another step further in the changes by centering everything, removing the separation lines and changing the font :
To change the html/CSS codes in Arduino's file you'll have to go down to the function "void webpage(WiFiClient client)".
Test 2 : ESP32 DHT11/DHT22 Web Server – Temperature and Humidity using Arduino IDE (by Random Nerd Tutorials
This test will show the room temperature and humidity on another interface -> a smartphone.
As the Arduino code contains again some HTML/CSS and will alter this page's layout, the code can be seen and downloaded here.
For this test you just have to connect a DHT11 (or DHT21 or DHT22) Temperature and Humidity sensor to your ESP32, specify the DHT pin + SSID + Password and change the design (if you want) in the HTML/CSS part of the code.
In this case, the HTML/CSS part was defined by a "const char" variable
As a result, the ESP32 will connect to the wifi and print the IP address in the serial monitor so that you can type it in your web browser to see the interface you've designed showing you the Temperature and Humidity infos that are collected by the DHT11 sensor.
Design changes example
Files and resources
Files
- Web Interface with ESP32 and RGB LED code
- Web Interface with ESP32 code
- ESP32 and RGB LED code
- ESP32 DHT11/DHT22 Web Server code
Resources