Contact Info Contact Info
Tel:
(+632) 654 0001
Office:
WEB OUTSOURCING GATEWAY
Unit 3101 One Corporate Center, Julia
Vargas Avenue, Corner Meralco Avenue,
Ortigas Center, Pasig City, Philippines

Our Blog

6
Jul

26 Web Development Vocabularies – 1

The world of web development, database administration, networking, graphic design and search engine optimization are known for their technical jargons that makes reading them too technical or abstract. If you’re a beginner in IT career or web dev and just starting to wade through the vast intricacies of the information technology, you could have a less reading comprehension when you come across terms like API, Gitlab, bootstrap. What the hell are those terms?

API

In plain English, API (Application Programming Interface) refers to a system that lets different programs work together. A good analogy of API is the restaurant example. Here, if you’re a customer and orders food from the waiter who makes sure that food is served. As a customer, you don’t have to worry about the complexities in the kitchen such as preparation of vegetables, grilling, steaming and cutting of ingredients. The waiter acts as an interface between you and the behind the scenes. In the restaurant example, the waiter can let you know the status of your order without going inside the kitchen.

APIs provide these functions:

  • Access data from third parties – Examples of these are weather apps that get data from third-party apps. APIs are also used in music and graphics.

  • Extend functionality – For instance, app developers don’t have to worry about the cameras, GPS, Hardware and screen resolution. APIs make the job possible by standardising the program without coding for every single hardware configuration.

  • Security gatekeepers – A pop appears that asks users for permission to use data such as GPS location and email.

Examples of APIs

  • Log-in using social media accounts

  • Paying with PayPal

  • Twitter bots such as grammar police, Netflix bots, and TinyCarebot.

Backend

Backend refers to the unseen part of the website. It’s also the name for the specialist type of web developers who knew backend languages such as PHP, C#, SQL and Python. Backend focuses on the following functionalities:

  • Database design, management and data transformation

  • Data backup

  • Cybersecurity

  • Network availability and scalability

Bootstrap

Although it sounds like a shoe and its lace, it has nothing to do with footwear. Bootstrap is a framework or library that lets front-end web developers structure websites quickly. It provides a standard set for colour, spacing, interactive behaviour, typography etc. Likewise, bootstrap is a bunch or collections of HTML and CSS design templates for buttons, image carousels, navigation buttons, forms, typography and plugin support of Javascript.

Explaining it in analogy

You can compare bootstrap to template ruler and french curve used in art and drafting. The template ruler has different hole sizes from which you can draw various circle sizes and shapes. The french curve lets you draw lengths and angles of curves.

Breadcrumbs

Breadcrumbs or breadcrumb trail is a mini navigation guide that shows where you are at the website. It appears as a horizontal bar at the top of the web page and shows the name of the subpage with links. Breadcrumbs can ease your navigation and improve the user experience of your visitors.

Browser

Browser or web browsers refers to a software or program application that displays web pages, images and video in desktop, laptop, tablet and smartphones. It also saves passwords, usernames; locate and retrieve data. Current browsers include:

  • Mozilla firefox

  • Google chrome

  • Edge

  • Opera

Cache

A cache is a saved/copied file  that the web browser uses to load web pages faster each time the user visits the website.

Cookies

Cookies (not the pastry sweet made of flour) refers to the small set of data used to help websites keep track of your activities and visits. Each time you visit a website, it asks you whether you allow cookies. Without cookies, the user experience will be diminished. For example, if you visit a site you frequently visit and you deleted or disallowed the cookie, your preferences won’t show up – and that can cost you time and effort.  Cookies are used to:

  • Analyse user/visitor preferences

  • Help websites provide the visitor’s or user’s preferences and settings.

  • Store the current state of information

  • Track time

Normally, cookies don’t compromise your security because you only give information that you voluntarily or willingly sent. Cookies are not also programs but rather texts and they can’t be used to spread viruses. The security concerns for cookies include:

  • Cookie tossing attack

  • Cross-site request forgery attack

  • Cross-site scripting

  • Session fixation

CSS

Cascading Style Sheet (CSS) is a style sheet language that defines how the website looks. A website with just an HTML won’t have colours, layout and font styles. You can inspect a webpage’s CSS by pressing control + U in your keyboard to view the source code.

Here’s an example of CSS:

CSS

h2 { Height: 100px;

Width: 1000px;

Background-color: skyblue;   }

HTML

<h2>This is the element</h2>

This is the element

The h2 tag refers or points to h2 tag of the HTML

Cloud computing

Cloud is a system of connected data centres via the internet. With the cloud, you don’t need to install and run software on your physical computer or local hard drive. By connecting to the internet, you can access software and programs. Famous examples are the Google docs/ Microsoft and Yandex docs that let you make and edit word processor, spreadsheet and slide presentations. You don’t need to save it manually or periodically as it gets saved automatically via the internet. You don’t need to install a program nor worry about reducing your hard drive space. Using such document processors online is a time and money saver as you don’t need to plugin USB, manually save and send the files through email.

The second example is cloud storage services such as Dropbox, Mega.nz, One drive of Microsoft, and Yandex disk. Using their services enables you to save and retrieve files whenever and wherever you need them without needing USB drives or hard disks. With only the internet and the computer, you can access photos, texts, files and videos.

Content Management System

Content Management System is a web-based program that is either run through locally installed software or internet run browser. CMS lets you manage the front end or external look, function and graphics of a website. A CMS is already made for people who don’t know coding or programming. You’ll only need to study different functions of the back end (the unseen part of the website) to change the front end (the seen part) of the function. Popular CMS includes WordPress, Sitepad, Joomla, Drupal and Magento (specialised for e-commerce).

Cpanel

Cpanel is an integrated backend control for managing web-hosting. It’s a graphical user interface (GUI) allows you to:

  • Publish websites

  • Make email accounts

  • Organize web files

  • Set up a content management system (CMS) such as WordPress,

  • Launch and design databases using phpMyAdmin and MySQL wizard.

  • Make domains and subdomains.

  • View analytics

  • Make data backups

  • Whitelist and blacklist individual IPs.

  • Use SSL certificates for your websites.

Many Web Hosting companies provide Cpanels along with the Web Hosting plans. Although, some web hosts providers use other alternatives such as Plesk, CentOS, Zpanel, Ajenti, Vesta, Froxlor, and free alternatives such as YunoHost, aaPanel, and BlueOnyx.

Drag and Drop

Drag and drop is a website builder tool that lets anyone build their own website even without knowing how to code in HTML, CSS and Javascript. It’s made possible by dragging an element – a photo, social media buttons, header, footer, and carousel. You can also change the colours of elements (shapes/borders) using the menus or selection tools.. Popular drag and drop site builders include Jevelin, Wix, Weebly, Divi, Etalon, Kallyas, Bridge, Cane etc.

Pros

  • Drag and drop websites are suitable for simple and cheap websites.

  • Less expensive or free

  • Easy to use

  • Short learning curve needed – you don’t need to learn programming or coding.

Cons

  • Restricted and limited search engine optimisation

  • Limited functionality as you’ll need additional upgrades or plugins (software/apps) to make your website fully functional. In the end, you’ll end up spending more.

  • You’re at the mercy of bugs and responsiveness.

  • Unsuitable for complex and professional websites.

DNS

Domain Name Service (DNS) is a system that converts an IP address into a domain name. For example, wikipedia.com is a domain name with an IP address 91.198.174.192. With DNS, we can easily understand or remember a domain or hostname instead of a bunch of numbers in an IP address.

Frameworks

Frameworks or libraries are collections of codes, tools and solutions that make programming and coding faster.

For example:

FRONT-END

HTML5

CSS

Javascript

BACK-END

PHP

Java

Ruby

Frontend

Frontend refers to everything that you see on a website – texts, vector images, photos, GIFs, and videos. It’s also everything that you interact with such as clicking the signup button or drop-down menu and dragging the volume control.  Web developers commonly use it to refer to their expertise such as frontend web developer or coder of the visual part of the website user interface. Programming languages in the front end include HTML, CSS and Javascript.  Preprocessors and frameworks add another functionality and method on top of the three foundations of front-end programming languages.

Front end involves these processes and technologies:

  • Design, markup and programming languages – HTML, CSS and Javascript.

  • Preprocessors such as SASS, LESS, and Stylus for CSS

  • Frameworks of HTML, CSS and Javascript (For example, Bootstrap for CSS)

  • User experience

  • User interface

  • Search Engine Optimisation

  • Graphic design

  • Browser compatibility

  • Web performance

Git

Git is a system of a version control system used to track changes in codes while making software development. Git frees you from the need of plugging the flash drive to copy the code, allow you to view others’ work, and revert back to the original version of the code. The codes referred here could be javascript, java, python and other programming languages. Git has its set of commands that you can learn. Here are the examples of Git:

Git help [command to get help for

Git commit -m “This is a message”

Gitlab

Gitlab is a repository of codes and its versions and so it’s a competitor or rival of Github. Although both repositories aren’t exactly identical and they have differences. Gitlab is owned by Giblab Inc and founded by Sid Sij and Dmitriy Zaporozhets.

Github

Github is a repository or hosting of software development version control. Here you’ll find the constant updates of codes. In other words, it’s a site for publishing and sharing codes. Others call it the social networking site for programmers. The name Git in Github means a version control system that is a method or management of changes in code (ex. HTML, Javascript) and versions of an app such as beta and non-beta. Using such a system, developers can organize, collaborate, upload the app, program and code revisions. In Github, you can store files of the code and program, share it with other users. Github is now owned by Microsoft Corporation. The company’s logo is Octocat – a cat with an octopus body alluding to the forking or forked versions of software and codes.

Kilo/Mega/Tera/Gigabyte

A byte is a measurement of memory size of a hard drive and memory card.

  • Kilobyte -In today’s memory size terms, a kilobyte is the smallest unit of measurement. A plain text contains 10 K or KB and a screenshot has 189 KB. One kilobyte constitutes 1, 000 kilobytes.

  • Megabyte – A megabyte or 1 MB contains 1, 000 kilobytes. 1-minute audio takes a space of 1 MB. This is also true for images of higher resolution or different formats.

  • Gigabyte – A gigabyte contains 1, 000 megabytes. Abbreviated as GB, gigabytes examples include a 2-hour movie and storage capacities such as thumb drive or usb drive.

  • Terabyte – Terabyte means 1,000 gigabytes. You can already buy a hard drive with 1 terabyte storage capacity.

  • Petabyte – In 1 petabyte, there’s 1, 000 terabytes. It’s estimated that our brain can hold beyond 2.5 petabytes of data. High-end servers and data centres of Facebook and Netflix could contain over 10 petabytes of data (photos, movies, video, texts).

Java

Java is a programming language used for general-purpose. You can do many things with Java such as writing web applications, building games and enabling big data.

Javascript

Javascript is a programming or scripting language used to make animations and interactivity in web pages. Examples of javascript include clicking a part of the webpage and a pop-up menu appears, clicking an upvote button in Quora results in updated vote number and a moving carousel photo or images. Despite the name “Java” in Javascript, the programming language is not the same as Java.

Open Source

Open source refers to a software or program wherein its source code can be accessed, distributed or modified by the public. In other words, it’s free – you don’t need to pay to use one or access all the software features and functions. Some sites may ask for donations. So an open-source software alternative to Adobe Photoshop is GIMP.

Examples of open-source sites include:

Plugin

A plugin is a software or program that adds functionality to the web browser or CMS such as WordPress. For example, in WordPress, you could add a plugin to add functions such as:

  • Monsternights – Allows WordPress to connect to google analytics.

  • Yoast SEO – Allows WordPress to get more visitors such as optimizing for social media, add meta tags, and sitemaps.

  • WP rocket – Improves WordPress performance and speed.

There are more beyond the above three plugins when you use WordPress.

Preprocessor

A preprocessor refers to scripting languages that extend the default functions or capabilities of a programming language. For example, the preprocessors of CSS are SASS, LESS and Stylus.

SEO

Search Engine Optimisation refers to tools and processes used to optimize a website’s visibility in the search engine – Google, Yandex, Yahoo, DuckDuckGo, and Bing. Without SEO, your website will be hardly discovered or seen by people browsing the internet. Why? Although your website may be indexed by search engines, mostly they will end up in second, third or the eight pages of the search engine – pages that are hardly seen by most internet users. Most people will just look into the first page unless they are resourceful, and reset the search button when they can’t find the term.

In analogy, SEO is a method to help your business get seen by potential customers who are the internet surfers. SEO is a marketing strategy that puts your business in a location where there is a civilization, the people who could buy your products and services.

Web Hosting

Web hosting is a service provided by companies who own and operate data centres and servers that physically hold your data whether it’s a photo, video, software and database of your website. If you want to set up and run a website such as abc.com, you’ll need a service of a Webhosting company that offers a monthly, trimonthly, yearly or biannual subscription. Plus, you’ll need to buy a domain name before you can see your website up and running. You can either buy a domain name in a separate site or as a bundle of a Web Hosting service.

WordPress

WordPress is the most popular content management system. It allows you to customize, change or control the appearance or front-end of the website.  It’s free and open-sourced although some of its teams and plugins (apps that extend the functionality of WordPress) are paid. From its backend, you can change texts, title, meta description and tags or add photos and videos. WordPress is Ok for a medium-range website as it requires less or minimal coding skills. You only have to be familiar with the backend’s user interface to know its controls.

Tags: , , , , , , , ,