1 of 15

Introduction to Frοntend services

Kristiyan Simeonov, Sofia University

2 of 15

Introduction to Frontend Development

DEFINITION: FRONTEND DEVELOPMENT INVOLVES BUILDING COMPONENTS THAT INTERACT WITH USERS, SUCH AS THE USER INTERFACE, BUTTONS, AND WEBSITES, WITH A FOCUS ON DELIVERING A POSITIVE USER EXPERIENCE.

EXAMPLES: USER INTERFACE, BUTTONS, USER-ENTERED DATA, WEBSITES, AND USER EXPERIENCE (UX) FEATURES.

3 of 15

HTML Basics

HTML (HyperText Markup Language) is the standard markup language for creating web pages.
Describes the structure of a web page and displays elements like headings, paragraphs, and links.
Example HTML code:

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

4 of 15

CSS Basics

CSS (Cascading Style Sheets) is used for describing the look and formatting of HTML documents.

Allows application of styles like colors, fonts, and spacing to web pages.
Example CSS code:

body {

background-color: lightblue;

}

h1 {

color: white; text-align: center;

}

p {

font-family: verdana;

font-size: 20px;

}

5 of 15

JavaScript Basics

JavaScript adds interactivity to websites, such as clickable buttons and animations.
Example JavaScript code:

document.getElementById("demo").innerHTML = "Hello, World!";

6 of 15

PHP Basics

PHP is a server-side scripting language for managing dynamic content and databases.
Example PHP code:

<?php

echo "Salve!";

9 of 15

Frontend as a kitchen

The Kitchen Layout (HTML): HTML is like the layout of a kitchen
Kitchen Appliances (CSS): CSS acts like kitchen appliances
The Cooking Process (JavaScript): JavaScript is the cooking process
The Dish (User Interface): The final dish is like the User Interface (UI)
Personal Chef (PHP): PHP functions as a personal chef for the website

10 of 15

Frontend Development in Digital Humanities

Importance of frontend development in presenting research data, visualizations, and interactive elements in digital humanities.

Enhances accessibility and user-friendliness for scholarly content dissemination and exploration.

11 of 15

TEI Publisher�

TEI (Text Encoding Initiative) is crucial for encoding textual materials in digital humanities.

TEI Publisher facilitates publication of TEI-encoded texts with customization options through the TEI Processing Model.

Simplifies publishing textual data in various formats and enables creation of standalone web applications.

12 of 15

TEI Publisher Using eXist DB

eXist DB serves as a repository and database management system for TEI Publisher.

Provides platform for storing, querying, and retrieving TEI-encoded texts, enhancing functionality and accessibility of digital humanities projects.

13 of 15

Custom Tailored Engines

EFES and AIAX are engines tailored for specific needs within digital humanities, particularly in the publication and visualization of scholarly epigraphic content encoded in formats like EpiDoc.
They offer features such as edition visualizations, search interfaces, and validation mechanisms, supporting editorial and research processes.

14 of 15

Examples

Digital Archives: Creating intuitive interfaces for accessing historical documents and archives.

Data Visualization: Employing interactive visualizations to present complex data.

Digital Editions: Enhancing textual editions with interactive features like annotations and hyperlinks.

Leveraging frontend development to engage users effectively and facilitate exploration and analysis of research content.