This document summarizes a presentation given by Rabab Gomaa and Abdel Rahman El Beheri at the IEEE Young Professional Workshop on December 2nd, 2017. The presentation covered developing a basic web application to graph results from a database and style it using HTML/CSS (Part 1) and making web pages dynamic using PHP (Part 2). It provided information on the tools and languages needed, example code, and steps for connecting a PHP application to a database and retrieving/displaying data.
Scraping the web with Laravel, Dusk, Docker, and PHPPaul Redmond
Jumpstart your web scraping automation in the cloud with Laravel Dusk, Docker, and friends. We will discuss the types of web scraping tools, the best tools for the job, and how to deal with running selenium in Docker.
Code examples @ https://github.com/paulredmond/scraping-with-laravel-dusk
An overview of web development essentials that will help you as a user experience designer to not only understand how to integrate designs with development components, but also to learn some tips on interacting effectively with developers.
As CSS3 adds support for rich styling in standards-based web applications, style sheet markup can quickly get out of control! Many CSS effects today require repetitive rules to cover the proprietary browser CSS prefixes. LESS for CSS is an open source framework that makes modern CSS more manageable. With support for variables, mix-ins, nested CSS rules, and operations, LESS finally makes complex CSS easy to maintain. In this session, you will discover how LESS can be easily adopted in any ASP.NET project and learn about tools that make it easy to work with LESS in Visual Studio 2010.
Scraping the web with Laravel, Dusk, Docker, and PHPPaul Redmond
Jumpstart your web scraping automation in the cloud with Laravel Dusk, Docker, and friends. We will discuss the types of web scraping tools, the best tools for the job, and how to deal with running selenium in Docker.
Code examples @ https://github.com/paulredmond/scraping-with-laravel-dusk
An overview of web development essentials that will help you as a user experience designer to not only understand how to integrate designs with development components, but also to learn some tips on interacting effectively with developers.
As CSS3 adds support for rich styling in standards-based web applications, style sheet markup can quickly get out of control! Many CSS effects today require repetitive rules to cover the proprietary browser CSS prefixes. LESS for CSS is an open source framework that makes modern CSS more manageable. With support for variables, mix-ins, nested CSS rules, and operations, LESS finally makes complex CSS easy to maintain. In this session, you will discover how LESS can be easily adopted in any ASP.NET project and learn about tools that make it easy to work with LESS in Visual Studio 2010.
Presentation at web2day in Nantes, France about the opportunities we have with HTML5 and how it means we move away from a static to an web of applications.
More and more often we talks about optimizing the server-side software, but the
true optimization must be done on the client where 80% of the time is spent
by users. The talk explains the main techniques to optimize
Web site using HTTP protocols and rules to the base but rarely
used.
Introduction to Web Design for Literary Theorists I: Introduction to HTML (v....Patrick Mooney
First in a series of workshops for graduate students in the Department of English at UC Santa Barbara.
More information: http://patrickbrianmooney.nfshost.com/~patrick/ta/lead-ta/web-design/
YouTube screencast with audio: http://youtu.be/ZyYRmJXbT4o
An HTML5 overview I gave at Refresh FLL which showed the new features & touched on how to use progressive enhancement and polyfills to leverage HTML5 today.
In this session we’ll talk about the evolving ASP.NET platform and what’s new with .NET 5, as well as what’s coming with .NET 6. Modern ASP.NET applications will take advantage of .NET full-stack using Microsoft’s Blazor framework. We’ll discuss how the new framework coupled with Telerik UI for Blazor cut development time and boost productivity.
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCRGaurav Mishra
http://www.drupal7releaseparty.org/india/release-party-drupal-user-delhincr
You can read the write up here
Day1- http://gauravmishra.wordpress.com/2011/01/16/d7-iit-9-jan-2011/
Day2- http://gauravmishra.wordpress.com/2011/01/16/drupal7-release-party-iit-jan8/
Presentation at web2day in Nantes, France about the opportunities we have with HTML5 and how it means we move away from a static to an web of applications.
More and more often we talks about optimizing the server-side software, but the
true optimization must be done on the client where 80% of the time is spent
by users. The talk explains the main techniques to optimize
Web site using HTTP protocols and rules to the base but rarely
used.
Introduction to Web Design for Literary Theorists I: Introduction to HTML (v....Patrick Mooney
First in a series of workshops for graduate students in the Department of English at UC Santa Barbara.
More information: http://patrickbrianmooney.nfshost.com/~patrick/ta/lead-ta/web-design/
YouTube screencast with audio: http://youtu.be/ZyYRmJXbT4o
An HTML5 overview I gave at Refresh FLL which showed the new features & touched on how to use progressive enhancement and polyfills to leverage HTML5 today.
In this session we’ll talk about the evolving ASP.NET platform and what’s new with .NET 5, as well as what’s coming with .NET 6. Modern ASP.NET applications will take advantage of .NET full-stack using Microsoft’s Blazor framework. We’ll discuss how the new framework coupled with Telerik UI for Blazor cut development time and boost productivity.
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCRGaurav Mishra
http://www.drupal7releaseparty.org/india/release-party-drupal-user-delhincr
You can read the write up here
Day1- http://gauravmishra.wordpress.com/2011/01/16/d7-iit-9-jan-2011/
Day2- http://gauravmishra.wordpress.com/2011/01/16/drupal7-release-party-iit-jan8/
Theming websites effortlessly with Deliverance (CMSExpo 2010)Jazkarta, Inc.
Learn how to theme any CMS in 5 minutes with Deliverance, a tool that makes theming easy. It takes content from a CMS and inserts it into placeholders in a theme destination.
This is the basic Web design and development slide. From here you can practice HTML, CSS, PHP, MySql, and JavaScript. I do believe that this is a very effective slide for the beginner who wants to learn Basic Web design and development.
Modern Web Apps should be focused, rich, and gorgeous, but they also need to be FAST. After all, being rich and beautiful isn't always enough!
With web apps, faster is always better; nobody will ever complain that your site is too fast!
Tek 2013 - Building Web Apps from a New Angle with AngularJSPablo Godel
AngularJS is a new JavaScript framework, backed by Google, for building powerful, complex and rich client-side web applications. We will go over the features and basics of building a web application with AngularJS and we will demonstrate how to communicate with a REST server built with PHP.
Using Cool New Frameworks in (Mobile) Domino AppsTeamstudio
Did you know there's an abundance of cool CSS and JS frameworks out there? Have you ever wanted to find out how you can use them in your own (mobile) Domino apps? Theo Heselmans shows real world applications from his customers using some of these powerful frameworks inside Domino. Explore with us on how they integrated Bootstrap, Ratchet.js, Knockout.js, Backbone.js, Underscore.js, jQuery.js and more!
HTML5 has changed the Web as we know it. The newest markup language has some exciting features that, for example, make it easy to embed and play multimedia content on the web without having to use proprietary plugins like Adobe’s Flash.
In this webinar, learn:
What HTML5 is and what it can do
New HTML5 tags
Useful coding examples
Testing and validation of your site
Future of HTML5
Participants will be given server space to create their own page and will be required to have a basic HTML editor like Notepad, Notepad++ or Eclipse.
As programmers, we concentrate so much on the server/backend side of things that we often forget to measure performance from the Client's viewpoint. This presentation describes a bunch of techniques that can be used to speed up our websites.
The Recipe for Making Accessible Widgets!Rabab Gomaa
One of the major challenges of developing web applications is understanding how to make its widgets accessible. In simpler words, are tooltips, tabs, chatbots and other building blocks of the application usable by All? In this session, we will explore the distinct layers of making an accessible widget and go through its design considerations.
Web Accessibility: Understanding & Practice!Rabab Gomaa
By the end of the session you will be able to:
Recognize the components of web accessibility
Identify accessibility failures according to WCAG 2
Experience various tools to evaluate the accessibility of your website against WCAG 2
Accessibility Testing Using Screen ReadersRabab Gomaa
Testing websites using screen readers gives web developers the opportunity to make a real evaluation of their code and help identify accessibility issues that could be missed in manual checkup, or neglected by automatic verification tools.
In this session we will demonstrate how blind people navigate the web and will show how to use screen readers for accessibility testing of web pages including interactive components and web forms.
Démonstration de JAWS – lecteur d’écranRabab Gomaa
Cette conférence vise à comprendre comment les aveugles naviguent les pages Web et apprendre comment utiliser JAWS pour les tests d'accessibilité. Nous allons commencer par le réglage des paramètres de JAWS, puis utiliser JAWS pour lire une page Web, naviguer dans un tableau de données et remplir un formulaire Web. À la fin de la session, nous allons passer par une liste d'éléments qui doivent être présents dans une page Web pour la rendre accessible pour les utilisateurs de lecteurs d'écran.
Accessible & Usable Web Forms. Your How To Guide!Rabab Gomaa
Last updated: March 10th, 2017
http://bit.do/webforms
(Formerly called Accessibility of Web Forms)
Web forms can present obstacles to users when they have not been developed to be accessible and usable. These obstacles can be torn down by following techniques for labeling form controls, validating user input, handling multi page forms and WAI-ARIA. Screen reader demonstrations will be used to highlight these features. The session will allow you to improve the design and development of your web forms.
* Formerly called Accessibility of Web Forms
Slides versions:
(March 2017) - updates include sample of keyboard users, why use native element, examples of form validation, how to fix a dialog box,
(Feb 2017) - updates include example of Other instruction and update to user agent support URL
(Dec 2016) - updates include example of placeholder
(Nov 2016) - updates include examples on usability of forms and ARIA misuse
(May 2016) - updates include new examples and more details on Validation of input and user notification
(Feb 2016) - Original version
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Monitoring Java Application Security with JDK Tools and JFR Events
Developing a Web Application
1. Developing a Web Application
Develop a basic web application to graph results from the database
and style it using HTML/CSS.
Rabab Gomaa & Abdel Rahman El Beheri
IEEE Young Professional Workshop
December 2nd, 2017
https://www.slideshare.net/RababGomaa/
Rabab Gomaa : @RubysDo Abdel Rahman Elbeheri : @abdz91
2. Content
Part 1: Creating a static web page in HTML/CSS by Rabab
● HTML
● CSS
● WET/Graph
Part2 : PHP - Making Web pages dynamic by Abdel Rahman
● Why PHP?
● PHP Operation Simplified
● PHP - Getting Started
● PHP - Sample code “Hello, World”
● PHP - Embedded with HTML
● PHP - Our application
@RubysDo “Creating a Static Web Page in HTML/CSS” https://www.slideshare.net/RababGomaa/
3. Part 1: Creating a page with graphs in HTML/CSS
Rabab Gomaa, Web Accessibility Expert
● Experience of web development / web design /web
integration.
● Works for the Federal Government
● Active in the web accessibility community
○ Presented in several conferences: The Accessibility Conference
of University of Guelph 2014 & 2016, 2017, CodeFest4 (2016),
a11yYOW 2014 and a11yQC 2016.
○ Co-organizer of Ottawa Digital Accessibility and Inclusive
Design http://meetup.com/a11yOttawa/
@RubysDo “Creating a Static Web Page in HTML/CSS” https://www.slideshare.net/RababGomaa/
4. Part 1: Creating a page with graphs in HTML/CSS
What we need to start
1. A Browser
2. An HTML editor
Dreamweaver CC (trial version)
http://www.adobe.com/ca/products/dreamweaver/free-trial-download.html
3. WET 4
http://wet-boew.github.io/wet-boew/docs/versions/dwnld-en.html
@RubysDo “Creating a Static Web Page in HTML/CSS” https://www.slideshare.net/RababGomaa/
5. HTML
What is HTML?
● Hyper Text Markup Language
● HTML describes the structure of a web page
● Browsers use HTML to render the content of a web page
● HTML does not have a logic (not a programming language)
@RubysDo “Creating a Static Web Page in HTML/CSS” https://www.slideshare.net/RababGomaa/
Learn More - HTML Crash Course For Absolute Beginners retrieved from https://www.youtube.com/watch?v=UB1O30fR-EE
6. HTML Syntax and Structure
HTML Syntax
● <tagname>Content goes here...</tagname>
Start tag Element content End tag
<h1> My First Heading </h1> Simple element
<table> table structure </table> element with structure
HTML Page Structure
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<h1>Pool Results for 2017</h1>
</body>
</html>
@RubysDo “Creating a Static Web Page in HTML/CSS” https://www.slideshare.net/RababGomaa/
7. Exercise 1: Create your own HTML page
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ottawa Voting Corner - IEEE Young
Professional</title>
</head>
<body>
<h1>Pool Results for 2017</h1>
<p>Although the competition between choices, Ottawa
citizens have made their mind on the best of this 2017
year!!</p>
<h2>Ottawa's official food in 2017</h2>
</body>
</html>
@RubysDo “Creating a Static Web Page in HTML/CSS” https://www.slideshare.net/RababGomaa/
Pool Results for 2017………………...
8. CSS
What is CSS?
● CSS describes how HTML elements should be displayed.
Inserting CSS in HTML
● External style sheet
<link rel="stylesheet" type="text/css" href="mystyle.css">
● Internal style sheet
<head>
<style>
h1 {color: blue;}
</style>
</head>
● Inline style
<h1 style="color: blue;">Pool Results for 2017</h1>
@RubysDo “Creating a Static Web Page in HTML/CSS” https://www.slideshare.net/RababGomaa/
9. Exercise 2: Write your own styles
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ottawa Voting Corner - IEEE
Young Professional</title>
<style>
h1 {background-color: #9CF;}
</style>
</head>
<body>
<h1>Pool Results for 2017</h1>
</body>
</html>
@RubysDo “Creating a Static Web Page in HTML/CSS” https://www.slideshare.net/RababGomaa/
<title>
<h1>
<p>
<h2>
10. Use of WET to create graph
What is WET?
● Front-end framework for building websites
● A collection of flexible and themeable templates and reusable components
Charts Working Example
http://wet-boew.github.io/v4.0-ci/demos/index-en.html
@RubysDo “Creating a Static Web Page in HTML/CSS” https://www.slideshare.net/RababGomaa/
11. Exercise 3: Code results table and view chart
<h2>Ottawa's official food in 2017</h2>
<table class="wb-charts wb-charts-donut table">
<caption> What is Ottawa's official food?</caption>
<thead>
<tr>
<td></td>
<th>Shawarma</th>
<th>Beavertail</th>
<th>Sushi</th>
<th>Burger</th>
</tr>
</thead>
<tbody>
<tr>
<th></th>
<td>10</td>
<td>23</td>
<td>3</td>
<td>6</td>
</tr>
</tbody>
</table>
@RubysDo “Creating a Static Web Page in HTML/CSS” https://www.slideshare.net/RababGomaa/
13. Part 2: PHP - Making Webpages Dynamic
Abdel Rahman El Beheri, Malware Test Engineer
● Experience of Web programming /Web design
● WordPress Developer
● Experience Network Analysis and Security
● Previous Nokia Inc. Malware Test Engineer
@abdz91 “PHP - Making Web pages dynamic” https://www.slideshare.net/RababGomaa/
14. Why PHP?
First, What is PHP?
● A computer general-purpose scripting language (Server Side).
● Originally designed for producing dynamic web pages
● It is a free, open-source software and runs most operating software.
● URL: http://www.php.net
@abdz91 “PHP - Making Web pages dynamic” https://www.slideshare.net/RababGomaa/
15. So again, why PHP?
● As mentioned before, PHP produces dynamic web pages.
● No need to hard code changes, every time a change is needed.
● Output is real-time hence changes “dynamically”
● However it needs a server to run. (ex. Apache, ILS, etc)
@abdz91 “PHP - Making Web pages dynamic” https://www.slideshare.net/RababGomaa/
16. PHP Operation Simplified
● PHP can be embedded in the
html code.
● PHP code is executed on the
server, generating HTML then
sent to the client
● To the client, only the html code
and tag appear as shown in the
figure.
@abdz91 “PHP - Making Web pages dynamic” https://www.slideshare.net/RababGomaa/
17. 1. On Windows OS, download and install WAMP. URL:
http://www.wampserver.com
2. On Mac OSX, download and install MAMP. URL:
http://www.mamp.info/en/index.html
3. WAMP or MAMP provide Apache webserver, database server, and php
PHP - Getting Started
@abdz91 “PHP - Making Web pages dynamic” https://www.slideshare.net/RababGomaa/
18. ● PHP is enclosed in <?php … //code here … ?>
● “echo” statement is basically a print out to console or web page
● Tip: PHP is case sensitive. Very annoying when assigning variables! :)
PHP - Sample Code “Hello, World”
@abdz91 “PHP - Making Web pages dynamic” https://www.slideshare.net/RababGomaa/
19. PHP - Embedded with HTML (Spagetti Way)
@abdz91 “PHP - Making Web pages dynamic” https://www.slideshare.net/RababGomaa/
● Just add the php tag within the html code
to start.
● Assigning variables in PHP starts with “$”
● Variables have many types (ex. String,
Int, Arrays, etc.)
● Conditional statements (ex. If, while, do
while, elseif, etc.)
20. PHP - Our application
@abdz91 “PHP - Making Web pages dynamic” https://www.slideshare.net/RababGomaa/
● Connecting to MySql database
<?php
//Step1
$db = mysqli_connect('localhost','root','root','alidb')
or die('Error connecting to MySQL server.');
?>
● Then grab what is in the database
<?php
//Start of PHP code (another segment)
//Step2
$query = "SELECT * FROM table1";
21. PHP - Our application
● Query the database for the values in it using PHP
//Step3
$result = mysqli_query($db, $query);
● Then we go through all the values using a loop
while ($row = mysqli_fetch_array($result)) {
//Step4
$RFID_names[$i] = $row['RFID'];
$BA_values[$i] = $row['ButtonA'];
$BB_values[$i] = $row['ButtonB'];
$BC_values[$i] = $row['ButtonC'];
….
$i++;
}
@abdz91 “PHP - Making Web pages dynamic” https://www.slideshare.net/RababGomaa/
22. ● Finally, connection to the database must be closed
//Step 5
mysqli_close($db);
//end of PHP code
?>
PHP - Our application
@abdz91 “PHP - Making Web pages dynamic” https://www.slideshare.net/RababGomaa/
23. Thank you for your time!
Rabab Gomaa & Abdel Rahman El Beheri
@RunysDo & @abdz91
https://www.slideshare.net/RababGomaa/