This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
External Style Sheets can save a lot of work
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
This article is the first part of a series of articles on using JavaScript tools. Today, JavaScript is a very powerful language that can be used to build web apps, mobile apps, and even some pc games — perhaps a bit faster than you would build them otherwise.
New libraries have emerged in the web industry to address the challenges of JavaScript — libraries such as JQuery, Prototype and many others have been released. Today, a popular question asked by many is — should i learn the libraries such as jQuery or learn basic JavaScript. The truth is that the libraries help you to create faster, responsive JavaScript, but there are still times when your basic knowlege of JavaScript will be called into question. It is for this reason that I have created this eBook, to assist newbies learn JavaScript.
Over 200 Pages of resources and code snippets to learn JavaScript and JavaScript DOM manipulation. JavaScript is the most popular web programming language and this eBook will help you learn more about JavaScript Coding
This is a brief introduction about HTML5. You will learn that what is new in HTML5. I will tell what and when changes happened in HTML which Hyper Text markup language. Html is a language which is used to create web pages that we have seen on the internet. For website development and web hosting visit https://tekfold.com
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
External Style Sheets can save a lot of work
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
This article is the first part of a series of articles on using JavaScript tools. Today, JavaScript is a very powerful language that can be used to build web apps, mobile apps, and even some pc games — perhaps a bit faster than you would build them otherwise.
New libraries have emerged in the web industry to address the challenges of JavaScript — libraries such as JQuery, Prototype and many others have been released. Today, a popular question asked by many is — should i learn the libraries such as jQuery or learn basic JavaScript. The truth is that the libraries help you to create faster, responsive JavaScript, but there are still times when your basic knowlege of JavaScript will be called into question. It is for this reason that I have created this eBook, to assist newbies learn JavaScript.
Over 200 Pages of resources and code snippets to learn JavaScript and JavaScript DOM manipulation. JavaScript is the most popular web programming language and this eBook will help you learn more about JavaScript Coding
This is a brief introduction about HTML5. You will learn that what is new in HTML5. I will tell what and when changes happened in HTML which Hyper Text markup language. Html is a language which is used to create web pages that we have seen on the internet. For website development and web hosting visit https://tekfold.com
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
Web Development with HTML5, CSS3 & JavaScriptEdureka!
With the commercialization of the web, web development has become one of the blooming industries. Learning web development enables you to create attractive websites using HTML, CSS, JQuery and JavaScript. Web development includes developing simple and complex web-based applications, electronic businesses and social networking sites. Being a web developer you can deliver applications as web services which is only available in desktop applications.
Summary of Google Analytics Guide (ver.Korean)
구글 애널리틱스 가이드 (매뉴얼)를 한국어 버전으로 정리한 자료입니다. 참고로 구글에서 제공하는 가이드는 웹 분석 (Commerce 서비스를 대표 예시로 설명)을 기반으로 진행됩니다. 이 자료는 바풀 사내 세미나에서 사용된 자료인데 다른 분들께도 도움이 될 수 있을 것 같아 공유합니다 :)
www.bapul.net
A presentation to Refresh DC about the emerging HTML 5 and CSS 3 standards, namely about aspects that are beginning to become applicable to web design and development. Given by Jason Garber and M. Jackson Wilkinson.
Slides from an HTML5 overview session I presented at work...
This presentation has an accompanying sample webapp project: http://code.google.com/p/html5-playground
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
Apache Cordova is one of the most popular frameworks for cross-platform mobile development. Web developers can build apps for iOS, Android, and Windows based on the same frameworks they use for the Web by using a shared codebase. However, the methods for improving mobile app performance can be different from those web developers use for web apps. Doris Chen outlines what impacts “native performance” and explains how the startup time, as well as the overhead of resume, memory, communication, and the Web, can all contribute to the performance of Cordova apps. To build Cordova apps that perform well, it’s important to understand how to avoid common pitfalls and how to use the technologies in the most efficient ways. Doris introduces tools for performance tests and demonstrates how to measure mobile app performance by using diagnostic tools for different platforms. Doris also shares practical tips for building faster Cordova apps by exploring Document Object Model (DOM) complexity, animation techniques, and memory management.
Uma breve descrição sobre o HTML 5 e suas principais características como: forms, a nova estrutura, aúdio e vídeo, etc.
An overview about HTML 5 and its main features such as: forms, new structure, audio and video, etc.
This presentation was created for future hackers at Yahoo! Open Hack events. It shows what HTML5 features are great for a 24 hour hack, useful tools, and suggestions.
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]David Wesst
End-users are shallow and vein when it comes to applications. Whether you are selling apps in the marketplace, or trying to engage business users, without a sexy user experience, it can be hard to get people interested. HTML5, although very practical and functional as a platform, can do wonders when it comes to making sexy software. In this session, we will take a deeper dive into the HTML5 tools that can make your application a looker and really look good. We will learn how to take a regular HTML5 application and turn it into a rich user experience that stands out in the crown in HTML5 application using features like SVG, Canvas, and Audio/Video.
Similar to About Best friends - HTML, CSS and JS (20)
In this PPT I am going tell How to Avoid App store rejection when you uploaded your apps to Apple store, Google play store and Windows market place. Here I added few points from my experience with three stores
Mobile website --- Web is in pocket....Naga Harish M
Now a days smart phones growing very fast. And also web access from mobile phone also more. So, we most have mobile version website. Create mobile web site using HTML5 and CSS3.
Naming standards and basic rules in .net codingNaga Harish M
This presentation about Naming standards and basic rules while coding in C#.net, this is best of my knowledge. If any mistakes please let me know ..
Thanks for share!
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
Generating a custom Ruby SDK for your web service or Rails API using Smithyg2nightmarescribd
Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
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
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
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.
4. Here is the Website ;)
Images source Xbox.com
HTML : Help to show content in browsers
CSS : Help to style the content
JS : Help to interact with content
5. What is in Next Slides? (about HTML5)
• What and Why HTML5
• New Elements
• New Attributes
• Storage
• Offline
• What's good and bad
6. What is in Next Slides? (about CSS3)
• Background
• Animations
• Media query
7. What is in Next Slides? (about JS)
• Web workers
• Web socket
8. What is HTML5?
• It’s not just next version of HTML
• Make web more powerful
• Easy for developers and computer program
“HTML5 was proposed by Opera Software and Mozilla Foundation in June,2004”- WWW
9. Why HTML5?
“Web developers be proud, what we wrote will run in any device*”- Evol
*Conditions apply ;)
OLD HTML
Access to the local system's
resources/GPU
Works in Offline
Heavy graphics and quality UI
So, we need to depend on plugins (Like Flash and Silverlight)
10. Why HTML5?
“Web developers be proud, what we wrote will run in any device*”- Evol
*Conditions apply ;)
OLD HTML HTML5
Access to the local system's
resources/GPU
Works in Offline
Heavy graphics and quality UI
So, we need to depend on plugins (Like Flash and Silverlight)
11. So, it comes with..
Graphics
Location
Database
Speed
Audio
Video
Offline
13. New Elements
• <canvas> and <svg>
• <video> and <audio>
• New Form inputs
• Datalist
“HTML5 could do everything Flash did”- Steve Jobs
14. Canvas and SVG
Canvas (scriptable image tag) SVG
HTML:
<canvas id="myCanvas" width="200" height="100">
Your browser does not support the HTML5 canvas tag.
</canvas>
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,200,100);
Output :
HTML:
<svg width="400" height="110">
<rect width=“200" height="100"
style="fill:rgb(255,0,0); ">
Sorry, your browser does not support inline SVG.
</svg>
JavaScript:
//For now need any action
Output :
16. “In this world there are 30+ browsers”- WWW
<Video>
• Help to add video to our site.
• HTML :
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>
http://www.w3schools.com/tags/tag_video.asp
17. Video file format V/S Browser
http:/www.w3schools.com/html/html5_video.asp and http://www.w3.org/2010/05/video/mediaevents.html
MP4 WebM OGG
18. <audio>
• Help to add audio to our site.
• HTML :
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio> http://www.w3schools.com/tags/tag_audio.asp
“The first web browser was called WorldWideWeb (Nexus), invented in 1990 -
1991 and had 4 million users.”- WWW
22. <datalist>
• This tag specifies a list of pre-defined options for an <input> element.
• HTML :
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Demo : http://www.w3schools.com/TAgs/tag_datalist.asp
23. New Attributes
• autocomplete
• autofocus
• pattern (regexp)
• placeholder
• required
Demo : http://www.w3schools.com/html/html5_form_attributes.asp
and http://www.w3schools.com/tags/ref_eventattributes.asp
“Custom attributes use data- prefix. E.g. :- data-SOMETHING”
24. Local Storage
• window.localStorage - stores data with no expiration date
• code.sessionStorage - stores data for one session (data is lost when the tab
is closed)
• JavaScript:
if(typeof(Storage)!=="undefined")
{
// Code for localStorage/sessionStorage.
}
else
{
// Sorry! No Web Storage support..
}
25. Local Storage
• window.localStorage - stores data with no expiration date
• code.sessionStorage - stores data for one session (data is lost when the tab
is closed)
• JavaScript:
if(typeof(Storage)!=="undefined") //('localStorage' in window && window['localStorage'] !== null)
{
localStorage.setItem("lastname", "Smith");
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
else
{
// Sorry! No Web Storage support..
}
26. Local Storage
• Web SQL Database works in Safari, Chrome and Opera (!IE and !FF)
• JavaScript:
openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024,
function (db) {
db.changeVersion('', '1.0', function (t) {
t.executeSql('CREATE TABLE docids (id, name)');
}, error);
});
• IndexDB -- https://dvcs.w3.org/hg/IndexedDB/raw-
file/tip/Overview.html
31. Offline - Updating the cache triggers
• The user clears the browser's cache
• The manifest file is modified
• The application cache is programmatically updated
Demo : http://www.bennadel.com/blog/2029-using-html5-offline-
application-cache-events-in-javascript.htm and
www.htmlgoodies.com/html5/tutorials/introduction-to-offline-web-
applications-using-html5.html
32. 2012 2013 2014 2015 2016
HTML 5.0 Candidate Rec Call for Review Recommendation
HTML 5.1
1st Working
Draft
Last Call Candidate Rec Recommendation
HTML 5.2
1st Working
Draft
- Wiki
33. What's good and bad?
“Betting on HTML5 was a mistake”- Mark Zuckenberg
“We have definity shifted from HTML5 to native”- LinkedIn
…Please use web to get more content about topic.
39. Animations
• animation: myfirst 5s; /*@keyframe name and time delay (s/ms) */
• We can also set timing function, delay, iteration count, direction
• About @Keyframe rule is “where the animation is created”.
• CSS:
Demo http://www.w3schools.com/css/css3_animations.asp
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
41. • Web fonts allow to use font that are not installed on the end user
computer.
• Google is providing free fonts
e.g. : http://fonts.googleapis.com/css?family=Butterfly+Kids:400
• CSS:
Custom fonts
@font-face
{
font-family: myFont;
src: url(sansation_light.woff);
}
Demo : http://www.w3schools.com/css/css3_fonts.asp
42. Media query
• The @media rule allows different style rules for different media in the
same style sheet.
• CSS:
Demo http://www.w3schools.com/css/css_mediatypes.asp
@media screen { /* …. */ }
@media print { /* …. */ }
@media screen,print { /* …. */ }
43. Media query
• We can even apply different styles based on device
• width and height
• Orientation
• Aspect ratio / Pixel ratio
• CSS:
Demo http://www.w3schools.com/css/css_mediatypes.asp
@media only screen and (max-device-
width: 480px) { /* …. For mobile device
less than 480 px width*/ }
@media only screen and (min-device-
width: 768px) and (max-device-width:
1024px) { /* styles for iPad */ }
44. CSS ready frameworks
• Twitter bootstrap
http://getbootstrap.com/
• jQuery mobile
http://jquerymobile.com/
• Foundation
http://foundation.zurb.com/
• jQuery UI
http://jqueryui.com/
48. Web workers
• A web worker is a JavaScript that runs in the background,
independently of other scripts, without affecting the performance of
the page. You can continue to do whatever you want: clicking,
selecting things, etc., while the web worker runs in the background.
49. Web workers
• A web worker is a JavaScript that runs in the background,
independently of other scripts, without affecting the performance of
the page. You can continue to do whatever you want: clicking,
selecting things, etc., while the web worker runs in the background.
Demo : http://www.w3schools.com/html/html5_webworkers.asp and
Mozilla link
// in demo_workers.js
var i = 0;
onmessage = function (oEvent) {
timedCount();
postMessage("Hi " + oEvent.data);
};
function timedCount()
{
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
if(typeof(w) == "undefined" && typeof(Worker) !== "undefined")
{
w = new Worker("demo_workers.js");
}
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
function stopWorker() { w.terminate(); }
w. postMessage(“Started”);
50. Web socket
• WebSocket is a protocol providing full-duplex communications
channels over a single TCP connection.
• That makes it possible to open an interactive communication session
between the user's browser and a server.
Socket : http://docs.oracle.com/javase/tutorial/networking/sockets/definition.html
51. Web socket - Example
if ("WebSocket" in window)
{
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function()
{
ws.send("Message to send");
alert("Message is sent...");
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("Message is received...");
};
ws.onclose = function() {alert("Connection is closed..."); };
}
Demo http://www.tutorialspoint.com/html5/html5_websocket.htm and
https://www.youtube.com/watch?v=Z897fkPn7Rw