This Slide provided an introduction to CSS or Cascading Style Sheets. What is CSS? How to write styles. What are External, internal and inline CSS styles? and lot more
These are the slides from my #SPSBE session #SPSBE23 on Display Templates and JSLink for IT Pros. This is a slightly amended version of the session that I've uploaded for SPSUK and SPSSTHLM as a result of feedback from those earlier sessions.
As a result of conversations from this session and a twitter jam during the journey home, I'll announcing some great news about a community effort to make Display Template samples from many great speakers around the world available in one location.
Watch twitter using hashtag #SPCSR for more info as we announce it.
This Slide provided an introduction to CSS or Cascading Style Sheets. What is CSS? How to write styles. What are External, internal and inline CSS styles? and lot more
These are the slides from my #SPSBE session #SPSBE23 on Display Templates and JSLink for IT Pros. This is a slightly amended version of the session that I've uploaded for SPSUK and SPSSTHLM as a result of feedback from those earlier sessions.
As a result of conversations from this session and a twitter jam during the journey home, I'll announcing some great news about a community effort to make Display Template samples from many great speakers around the world available in one location.
Watch twitter using hashtag #SPCSR for more info as we announce it.
This presentation was prepared for the inaugural WPCampus in Sarasota Florida on July 16, 2016. It was designed to show not only out of the box solutions, such as WordPress and BuddyPress/bbPress, but also what we have designed ourselves
how to not design like a developer -- WordCamp Chicago 2014tracy apps
Have you got enough WordPress hacking “skillz” to make your own custom themes, but they still look like crap? Don’t worry, there’s some simple steps and tools that can help you design less like a developer.
I’ve spent quite a bit of time refining and perfecting my development workflow. I’d like to share how I use WordPress with version control to still develop locally and easily push changes live with the push of a button. No more dragging files into FTP! No more losing changes because of stupid accidents!
My books- Hacking Digital Learning Strategies http://hackingdls.com & Learning to Go https://gum.co/learn2go
Resources at http://shellyterrell.com/emoji
UX, ethnography and possibilities: for Libraries, Museums and ArchivesNed Potter
These slides are adapted from a talk I gave at the Welsh Government's Marketing Awards for the LAM sector, in 2017.
It offers a primer on UX - User Experience - and how ethnography and design might be used in the library, archive and museum worlds to better understand our users. All good marketing starts with audience insight.
The presentation covers the following:
1) An introduction to UX
2) Ethnography, with definitions and examples of 7 ethnographic techniques
3) User-centred design and Design Thinking
4) Examples of UX-led changes made at institutions in the UK and Scandinavia
5) Next Steps - if you'd like to try out UX at your own organisation
Artificial intelligence (AI) is everywhere, promising self-driving cars, medical breakthroughs, and new ways of working. But how do you separate hype from reality? How can your company apply AI to solve real business problems?
Here’s what AI learnings your business should keep in mind for 2017.
The technologies and people we are designing experiences for are constantly changing, in most cases they are changing at a rate that is difficult keep up with. When we think about how our teams are structured and the design processes we use in light of this challenge, a new design problem (or problem space) emerges, one that requires us to focus inward. How do we structure our teams and processes to be resilient? What would happen if we looked at our teams and design process as IA’s, Designers, Researchers? What strategies would we put in place to help them be successful? This talk will look at challenges we face leading, supporting, or simply being a part of design teams creating experiences for user groups with changing technological needs.
An immersive workshop at General Assembly, SF. I typically teach this workshop at General Assembly, San Francisco. To see a list of my upcoming classes, visit https://generalassemb.ly/instructors/seth-familian/4813
I also teach this workshop as a private lunch-and-learn or half-day immersive session for corporate clients. To learn more about pricing and availability, please contact me at http://familian1.com
3 Things Every Sales Team Needs to Be Thinking About in 2017Drift
Thinking about your sales team's goals for 2017? Drift's VP of Sales shares 3 things you can do to improve conversion rates and drive more revenue.
Read the full story on the Drift blog here: http://blog.drift.com/sales-team-tips
All too often writing HTML and CSS is an afterthought. Its the work that happens after design is finalized and the product has been developed. Its a necessary task in the process to building a website. Wrong.
HTML and CSS are the backbone to every website, and are equally as important as any design or development. In this workshop you will learn how to write modular HTML and CSS, and how reuse code to build maintainable websites. After spending some time playing with legos and writing some of code attendees will be able to better organize their code, develop modular styles, and work with CSS specificity.
The workshop is geared towards intermediate front end developers, with a love of legos, looking grow their skill set. A laptop and good attitude are preferred.
How to Become a Thought Leader in Your NicheLeslie Samuel
Are bloggers thought leaders? Here are some tips on how you can become one. Provide great value, put awesome content out there on a regular basis, and help others.
Working with Grids - Evaluating Bootstrap's grid systemAlbino Tonnina
An introduction to grids in general and examples using Bootstrap's grid system. The interactive presentation is available at https://bootstrapgrids.herokuapp.com/ (hit "s" to see my notes)
To publish information for global distribution, one needs a universally understood language, a kind of publishing mother tongue that all computers may potentially understand. The publishing language used by the World Wide Web is HTML (from HyperText Markup Language).
HTML & CSS Training Institute in Ambala ! Batra Computer Centrejatin batra
Batra Computer Centre is An ISO certified 9001:2008 training Centre in Ambala.
We Provide HTML and CSS Training in Ambala. BATRA COMPUTER CENTRE provides best training in C, C++, S.E.O, Web Designing, Web Development and So many other courses are available.
This presentation was prepared for the inaugural WPCampus in Sarasota Florida on July 16, 2016. It was designed to show not only out of the box solutions, such as WordPress and BuddyPress/bbPress, but also what we have designed ourselves
how to not design like a developer -- WordCamp Chicago 2014tracy apps
Have you got enough WordPress hacking “skillz” to make your own custom themes, but they still look like crap? Don’t worry, there’s some simple steps and tools that can help you design less like a developer.
I’ve spent quite a bit of time refining and perfecting my development workflow. I’d like to share how I use WordPress with version control to still develop locally and easily push changes live with the push of a button. No more dragging files into FTP! No more losing changes because of stupid accidents!
My books- Hacking Digital Learning Strategies http://hackingdls.com & Learning to Go https://gum.co/learn2go
Resources at http://shellyterrell.com/emoji
UX, ethnography and possibilities: for Libraries, Museums and ArchivesNed Potter
These slides are adapted from a talk I gave at the Welsh Government's Marketing Awards for the LAM sector, in 2017.
It offers a primer on UX - User Experience - and how ethnography and design might be used in the library, archive and museum worlds to better understand our users. All good marketing starts with audience insight.
The presentation covers the following:
1) An introduction to UX
2) Ethnography, with definitions and examples of 7 ethnographic techniques
3) User-centred design and Design Thinking
4) Examples of UX-led changes made at institutions in the UK and Scandinavia
5) Next Steps - if you'd like to try out UX at your own organisation
Artificial intelligence (AI) is everywhere, promising self-driving cars, medical breakthroughs, and new ways of working. But how do you separate hype from reality? How can your company apply AI to solve real business problems?
Here’s what AI learnings your business should keep in mind for 2017.
The technologies and people we are designing experiences for are constantly changing, in most cases they are changing at a rate that is difficult keep up with. When we think about how our teams are structured and the design processes we use in light of this challenge, a new design problem (or problem space) emerges, one that requires us to focus inward. How do we structure our teams and processes to be resilient? What would happen if we looked at our teams and design process as IA’s, Designers, Researchers? What strategies would we put in place to help them be successful? This talk will look at challenges we face leading, supporting, or simply being a part of design teams creating experiences for user groups with changing technological needs.
An immersive workshop at General Assembly, SF. I typically teach this workshop at General Assembly, San Francisco. To see a list of my upcoming classes, visit https://generalassemb.ly/instructors/seth-familian/4813
I also teach this workshop as a private lunch-and-learn or half-day immersive session for corporate clients. To learn more about pricing and availability, please contact me at http://familian1.com
3 Things Every Sales Team Needs to Be Thinking About in 2017Drift
Thinking about your sales team's goals for 2017? Drift's VP of Sales shares 3 things you can do to improve conversion rates and drive more revenue.
Read the full story on the Drift blog here: http://blog.drift.com/sales-team-tips
All too often writing HTML and CSS is an afterthought. Its the work that happens after design is finalized and the product has been developed. Its a necessary task in the process to building a website. Wrong.
HTML and CSS are the backbone to every website, and are equally as important as any design or development. In this workshop you will learn how to write modular HTML and CSS, and how reuse code to build maintainable websites. After spending some time playing with legos and writing some of code attendees will be able to better organize their code, develop modular styles, and work with CSS specificity.
The workshop is geared towards intermediate front end developers, with a love of legos, looking grow their skill set. A laptop and good attitude are preferred.
How to Become a Thought Leader in Your NicheLeslie Samuel
Are bloggers thought leaders? Here are some tips on how you can become one. Provide great value, put awesome content out there on a regular basis, and help others.
Working with Grids - Evaluating Bootstrap's grid systemAlbino Tonnina
An introduction to grids in general and examples using Bootstrap's grid system. The interactive presentation is available at https://bootstrapgrids.herokuapp.com/ (hit "s" to see my notes)
To publish information for global distribution, one needs a universally understood language, a kind of publishing mother tongue that all computers may potentially understand. The publishing language used by the World Wide Web is HTML (from HyperText Markup Language).
HTML & CSS Training Institute in Ambala ! Batra Computer Centrejatin batra
Batra Computer Centre is An ISO certified 9001:2008 training Centre in Ambala.
We Provide HTML and CSS Training in Ambala. BATRA COMPUTER CENTRE provides best training in C, C++, S.E.O, Web Designing, Web Development and So many other courses are available.
Web Design for Literary Theorists II: Overview of CSS (v 1.0)Patrick Mooney
Second 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/2013-2014/
YouTube screencast with audio: http://youtu.be/5Ds9oKV20H0
These slides were prepared for the fulfillment of class presentation in Web Engineering (Masters of Science in Information System Engineering) at Gandaki College of Engineering and Science (GCES).
HTML Training Centre in Ambala ! Batra Computer Cetrejatin batra
Batra Computer Centre is An ISO certified 9001:2008 training Centre in Ambala.
We Provide HTML Training in Ambala. BATRA COMPUTER CENTRE provides best training in C, C++, S.E.O, Web Designing, Web Development and So many other courses are available.
We will cover whole of the web development basics comprising of HTML, CSS, JavaScript in this series.
Following are topics useful for any newbie to intermediate who is interested in learning Web Development
Cascading Style Sheets is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
MasterPress Mystery Theatre - WordCamp Santa Clarita Virtual 2021Shanta Nathwani
There are certain rules that you follow if you don’t want to end up dead. One of them is to never attend the town fete. That’s only if you life in a small town in England. But when it comes to solving the mystery of your website’s problems, it’s like solving a murder! In this session, we’ll go through some of the forensics and psychology of the website’s behaviour how important witness statements can be in bringing the criminal to justice!
WordCamp India 2021 - How I Started My Business During a PandemicShanta Nathwani
My presentation at WordCamp India 2021 as a lightning talk on Sunday, February 14, 2021. How I started my business out of one of the strangest times in our lives.
WordFest 2021 - How I Started My Business During A PandemicShanta Nathwani
My presentation at WordFest Live 2021 on the Global stage in the Asia region on Friday, January 22, 2021. How I started my business out of one of the strangest times in our lives.
With all the new changes to WordPress with the block editor, many people are confused.
I’m going to show you how to create your home, about and contact pages in 30 minutes using the WordPress Block editor.
Designing with Gutenberg - Las Lajas WordPress Meetup 2020Shanta Nathwani
A designers perspective on working with Gutenberg.
Why would I want to use Gutenberg?
Why should my clients care if I use Gutenberg?
Should I recommend Gutenberg to other designers?
Video can be found here: https://drive.google.com/file/d/13Q9AY31J84E132uudz8P1OxEp0I_3mdq/view?usp=sharing
How to Organize Your Content Through Navigation and WayfindingShanta Nathwani
Posts vs. Pages & Categories vs. Tags. There is so much confusion about what types of things should be put on a page and what should be in a post. Static vs. Dynamic content is the best way to tackle this. When creating a website, you can edit a menu to include not only pages, but also categories that can create a more complete experience.
Organizing Your Content - WordPress Hamilton March 2020Shanta Nathwani
Many people overlook the organization of their content and present it to their visitors reflected in their navigation. What does the visitor do once they've made it to your website and want to read more? If they can't find what their looking for, they'll leave.
Navigation and Wayfinding On Your Website - WordCamp Ottawa 2019Shanta Nathwani
Posts vs. Pages & Categories vs. Tags. There is so much confusion about what types of things should be put on a page and what should be in a post. Static vs. Dynamic content is the best way to tackle this. When creating a website, you can edit a menu to include not only pages, but also categories that can create a more complete experience.
This Workshop guides you through the process to giving your visitors a better way to access your website other than through the word "Blog"
WordCamp Hamilton - CPT's vs Gutenberg TemplatesShanta Nathwani
In our last episode, dear campers, we learned about Custom Post Types (CPT’s) and Advanced Custom Fields (ACF’s) and why we need them. We had everything clear, right? Enter Gutenberg…
Until Gutenberg, we had to copy over content from one old post to the new. The other option is to use CPT’s and ACF’s. What’s the difference? When should you use one or the other… or BOTH?
In this session, we’ll take a quick review of CPT’s and ACF’s, then compare them to Gutenberg Blocks and Templates, and discuss when you should use each and why.
This presentation is meant to give the very basics of building a website on WordPress with Gutenberg and JetPack. We are going to build these pages: About, Contact, Blog. Then showing you how to set a static page as the home page, as well as organizing your menu.
An Affordable REST - Coder Camp Hamilton 2019Shanta Nathwani
This presentation talks about the need for municipalities to take more of an interest in presenting their constituents with information, especially around affordable housing. How much work and money can be saved if they invest a little time in disseminating information on a website, rather than hoarding it? I was able to produce this project in 5 days as a student. What's their excuse?
This presentation was given to the WordPress Hamilton Community in the hopes of diversifying the speaker submissions for WordCamp Hamilton and beyond. We had a small but mighty group and with the help of the Diversity Training at WordPress, we were able to encourage a few more speakers.
This case study was presented at Full Stack Toronto Conference 2017 showing the case for my project, An Affordable REST, which helps people find subsidized housing in Toronto. This was a full stack project, using React and Node.js
WCTO 2017 - Everything I Need To Know About Life I Learned at Code SchoolShanta Nathwani
This is a presentation that I gave at WordCamp TOronto in September, 2017 about my experience at Code School. I went to BrainStation in Toronto and graduated in June 2017. These are things that you need to know before you enroll in a code school, regardless of which school you attend.
DevTO - Everything I Need to Know About Life I Learned at Code SchoolShanta Nathwani
This is a presentation that I gave at DevTO in September, 2017 about my experience at Code School. I went to BrainStation in Toronto and graduated in June 2017. These are things that you need to know before you enroll in a code school, regardless of which school you attend.
WP Durham - The Word-Camp Scenario Survival GuideShanta Nathwani
All the things you need to know about attending your first WordCamp. This was prepared for the WordPress Durham group in preparation for WordCamp Toronto 2017
Content Architecture - WordPress Rochester Meetup - November 2016Shanta Nathwani
Posts vs. Pages & Categories vs. Tags. There is so much confusion about what types of things should be put on a page and what should be in a post. Static vs. Dynamic content is the best way to tackle this. When creating a website, you can edit a menu to include not only pages, but also category archives that can create a more complete experience.
This is a talk about my experience of importing open data into WordPress for use with FacetWP. This is a paid plugin and very useful for doing a different type of information architecture.
How to Get CNIC Information System with Paksim Ga.pptxdanishmna97
Pakdata Cf is a groundbreaking system designed to streamline and facilitate access to CNIC information. This innovative platform leverages advanced technology to provide users with efficient and secure access to their CNIC details.
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.
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...Neo4j
Leonard Jayamohan, Partner & Generative AI Lead, Deloitte
This keynote will reveal how Deloitte leverages Neo4j’s graph power for groundbreaking digital twin solutions, achieving a staggering 100x performance boost. Discover the essential role knowledge graphs play in successful generative AI implementations. Plus, get an exclusive look at an innovative Neo4j + Generative AI solution Deloitte is developing in-house.
Threats to mobile devices are more prevalent and increasing in scope and complexity. Users of mobile devices desire to take full advantage of the features
available on those devices, but many of the features provide convenience and capability but sacrifice security. This best practices guide outlines steps the users can take to better protect personal devices and information.
Climate Impact of Software Testing at Nordic Testing DaysKari Kakkonen
My slides at Nordic Testing Days 6.6.2024
Climate impact / sustainability of software testing discussed on the talk. ICT and testing must carry their part of global responsibility to help with the climat warming. We can minimize the carbon footprint but we can also have a carbon handprint, a positive impact on the climate. Quality characteristics can be added with sustainability, and then measured continuously. Test environments can be used less, and in smaller scale and on demand. Test techniques can be used in optimizing or minimizing number of tests. Test automation can be used to speed up testing.
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024Neo4j
Neha Bajwa, Vice President of Product Marketing, Neo4j
Join us as we explore breakthrough innovations enabled by interconnected data and AI. Discover firsthand how organizations use relationships in data to uncover contextual insights and solve our most pressing challenges – from optimizing supply chains, detecting fraud, and improving customer experiences to accelerating drug discoveries.
In his public lecture, Christian Timmerer provides insights into the fascinating history of video streaming, starting from its humble beginnings before YouTube to the groundbreaking technologies that now dominate platforms like Netflix and ORF ON. Timmerer also presents provocative contributions of his own that have significantly influenced the industry. He concludes by looking at future challenges and invites the audience to join in a discussion.
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
Unlocking Productivity: Leveraging the Potential of Copilot in Microsoft 365, a presentation by Christoforos Vlachos, Senior Solutions Manager – Modern Workplace, Uni Systems
In the rapidly evolving landscape of technologies, XML continues to play a vital role in structuring, storing, and transporting data across diverse systems. The recent advancements in artificial intelligence (AI) present new methodologies for enhancing XML development workflows, introducing efficiency, automation, and intelligent capabilities. This presentation will outline the scope and perspective of utilizing AI in XML development. The potential benefits and the possible pitfalls will be highlighted, providing a balanced view of the subject.
We will explore the capabilities of AI in understanding XML markup languages and autonomously creating structured XML content. Additionally, we will examine the capacity of AI to enrich plain text with appropriate XML markup. Practical examples and methodological guidelines will be provided to elucidate how AI can be effectively prompted to interpret and generate accurate XML markup.
Further emphasis will be placed on the role of AI in developing XSLT, or schemas such as XSD and Schematron. We will address the techniques and strategies adopted to create prompts for generating code, explaining code, or refactoring the code, and the results achieved.
The discussion will extend to how AI can be used to transform XML content. In particular, the focus will be on the use of AI XPath extension functions in XSLT, Schematron, Schematron Quick Fixes, or for XML content refactoring.
The presentation aims to deliver a comprehensive overview of AI usage in XML development, providing attendees with the necessary knowledge to make informed decisions. Whether you’re at the early stages of adopting AI or considering integrating it in advanced XML development, this presentation will cover all levels of expertise.
By highlighting the potential advantages and challenges of integrating AI with XML development tools and languages, the presentation seeks to inspire thoughtful conversation around the future of XML development. We’ll not only delve into the technical aspects of AI-powered XML development but also discuss practical implications and possible future directions.
UiPath Test Automation using UiPath Test Suite series, part 5DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 5. In this session, we will cover CI/CD with devops.
Topics covered:
CI/CD with in UiPath
End-to-end overview of CI/CD pipeline with Azure devops
Speaker:
Lyndsey Byblow, Test Suite Sales Engineer @ UiPath, Inc.
Pushing the limits of ePRTC: 100ns holdover for 100 daysAdtran
At WSTS 2024, Alon Stern explored the topic of parametric holdover and explained how recent research findings can be implemented in real-world PNT networks to achieve 100 nanoseconds of accuracy for up to 100 days.
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIVladimir Iglovikov, Ph.D.
Presented by Vladimir Iglovikov:
- https://www.linkedin.com/in/iglovikov/
- https://x.com/viglovikov
- https://www.instagram.com/ternaus/
This presentation delves into the journey of Albumentations.ai, a highly successful open-source library for data augmentation.
Created out of a necessity for superior performance in Kaggle competitions, Albumentations has grown to become a widely used tool among data scientists and machine learning practitioners.
This case study covers various aspects, including:
People: The contributors and community that have supported Albumentations.
Metrics: The success indicators such as downloads, daily active users, GitHub stars, and financial contributions.
Challenges: The hurdles in monetizing open-source projects and measuring user engagement.
Development Practices: Best practices for creating, maintaining, and scaling open-source libraries, including code hygiene, CI/CD, and fast iteration.
Community Building: Strategies for making adoption easy, iterating quickly, and fostering a vibrant, engaged community.
Marketing: Both online and offline marketing tactics, focusing on real, impactful interactions and collaborations.
Mental Health: Maintaining balance and not feeling pressured by user demands.
Key insights include the importance of automation, making the adoption process seamless, and leveraging offline interactions for marketing. The presentation also emphasizes the need for continuous small improvements and building a friendly, inclusive community that contributes to the project's growth.
Vladimir Iglovikov brings his extensive experience as a Kaggle Grandmaster, ex-Staff ML Engineer at Lyft, sharing valuable lessons and practical advice for anyone looking to enhance the adoption of their open-source projects.
Explore more about Albumentations and join the community at:
GitHub: https://github.com/albumentations-team/albumentations
Website: https://albumentations.ai/
LinkedIn: https://www.linkedin.com/company/100504475
Twitter: https://x.com/albumentations
A tale of scale & speed: How the US Navy is enabling software delivery from l...sonjaschweigert1
Rapid and secure feature delivery is a goal across every application team and every branch of the DoD. The Navy’s DevSecOps platform, Party Barge, has achieved:
- Reduction in onboarding time from 5 weeks to 1 day
- Improved developer experience and productivity through actionable findings and reduction of false positives
- Maintenance of superior security standards and inherent policy enforcement with Authorization to Operate (ATO)
Development teams can ship efficiently and ensure applications are cyber ready for Navy Authorizing Officials (AOs). In this webinar, Sigma Defense and Anchore will give attendees a look behind the scenes and demo secure pipeline automation and security artifacts that speed up application ATO and time to production.
We will cover:
- How to remove silos in DevSecOps
- How to build efficient development pipeline roles and component templates
- How to deliver security artifacts that matter for ATO’s (SBOMs, vulnerability reports, and policy evidence)
- How to streamline operations with automated policy checks on container images
A tale of scale & speed: How the US Navy is enabling software delivery from l...
Women in ITM Workshop: Intro to HTML and CSS
1. INTRO TO HTML/CSS
By Shanta R. Nathwani, B.Com., MCP
for Women In Technology Management
2. WELCOME
• Introductions and Backgrounds
• HTML
• CSS
• Layouts
• Links, Images and Video
We will take about 15 minutes between each lesson to work on the content
and a break half way through.
3. ABOUT ME
• Graduate of Ryerson’s ITM program
(Co-op and Exchange) 2009
• Currently an Instructor in Web
Design at Sheridan College in the
joint CCIT program with UTM
• Alumni Advisor for Women in ITM
• Founder, Women in Information
Technology Hamilton (WITHamOnt)
• Applying for Masters in Educational
Technologies at UBC
4. ABOUT DIMITAR
• Will be graduating from the ICCIT
program at UTM in June, including
his certificate from Sheridan College
• Soon-to-be co-instructor of the
Beginner and Intermediate Web
Design Courses at Sheridan College
in the CCIT program
• Independent Web Developer
10. HTML BASICS
• Elements are used to describe text
• An element is comprised of:
• An opening tag
• A closing tag
• Content
• Tags are denoted by the greater and less than signs < >
<strong> The text will appear bold </strong>
CCT260H - Shanta R. Nathwani
10
Closing TagOpening Tag Content
Element
11. HTML BASICS
• Elements – like brackets – must be opened and closed
• “Container Codes”
• A closing tag is created by using the / character
<body> opening tag closing tag </body>
• Some elements may not have content:
• <br/> Self-closing element (one-tag, no content)
CCT260H - Shanta R. Nathwani
11
12. HTML BASICS
• HTML is case-sensitive (XHTML)
• Use lowercase only! <body> not <Body>
• Spelling is important
• <body> </bodi> element will not be closed
• Embed tags correctly
Incorrect:
<h1> HTML <strong> is </h1> easy </strong>
Correct:
<h1> HTML <strong> is easy </strong> </h1>
CCT260H - Shanta R. Nathwani
12
13. HTML BASICS
CCT260H - Shanta R. Nathwani
13
• White space does
nothing
• Exception: Single space
after a word
• Enter, tabs are ignored
• Use elements and styles
to perform layout
• Use white space to
visually layout your
code, not your layout
Will look like this
14. HTML BASICS
CCT260H - Shanta R. Nathwani
14
• Use spacing to clearly
separate elements
• Use indentation (tabs) to show
hierarchy
• Add comments to separate
areas or provide notes to
future programmers
<!-- starts a comment
--> ends a comment
• Remember that comments
are visible to the end-user,
don’t insult your boss or
swear!
15. TEXT ELEMENTS
• <p> starts a paragraph ¶
• <br/> causes a new line ¬ - should be rarely used
• <strong> bolds text
• <em> italicize text
• <sub> & <sup> create subscript and superscript text
• <ins> & <del> underlines and strikes-out text
CCT260H - Shanta R. Nathwani
15
16. LAYOUT ELEMENTS
• <html> starts your page
• <head> classifies your page
• <body> contains your visible page
• <div> starts a new block or section of the page
• <span> is a generic wrap for a line of text
• Used for more complex text styles
• <h1> … <h6> creates heading and subheadings
CCT260H - Shanta R. Nathwani
16
17. THINKING IN HTML
CCT260H - Shanta R. Nathwani
17
Look for divisions
(or sections) of text
• Paragraphs
• Headings
• Images
• Font or Style Changes
• Boxed- or sub-text
18. HTML BASICS
Why do we hand-code?
• To better understand the language
• Remember grammar in French class?
• Aides in understanding output from Dreamweaver
• To troubleshoot pages we did not create
• To steal other people’s code!
• Don’t ever do that for an assignment! >:@
CCT260H - Shanta R. Nathwani
18
19. LAB ONE
• Open Your Text Editor and type the following code:
CCT260H - Shanta R. Nathwani
19
<!DOCTYPE html>
<html>
<head>
<title>
Love HTML!
</title>
</head>
<body>
<h1>
<!-- Copy your title here -->
</h1>
<p>
<!-- Copy your assignment here. Each paragraph should be
contained within another <p> -->
</p>
<footer>
<!– Put your name and the date here -->
</footer>
</body>
</html>
20. INSTRUCTIONS
Open your lab in the text editor, replacing the comment lines <!-- X --> with
your own essay pieces
For example:
This:
<footer>
<!– Put your name and the date here -->
</footer>
Becomes This:
<footer>
Shanta R. Nathwani, January 17, 2014
</footer>
CCT260H - Shanta R. Nathwani
20
21. SAVING IN HTML
1. Select “Save As…" to change the extension to .html. Expand the “Save As…" dialog to see
the additional options and then manually change the file’s extension to .html.
2. Save the document with the following format:
filename.html
• For example: lab1.html
Remember to save your document in a place that you can find it again. One way to do this is
to create a folder called yourlastname_firstwebpage on your desktop or in your roaming hard
drive.
CCT260H - Shanta R. Nathwani
21
23. CLARIFICATIONS & REVIEW
• Only the heading tags (such as <h1> ) need to be numbered
• Paragraph tags don’t need to be numbered. Just use <p>. Using this tag will
automatically format a paragraph, such as spacing.
• The <head> tag is used before the “visible” part of the html page, <body>.
This is different than <header>, which is a title within the <body> tag.
CCT260 - Shanta R. Nathwani
23
24. CLARIFICATIONS (PART 2)
CCT260 - Shanta R. Nathwani
24
<html>
<head>
<title>
This is visible on the tab on your browser
</title>
</head>
<body>
<h1>
This is a 1st level header visible in the body part of the
web page
</h1>
<p>
This is a paragraph visible in the body part of the web page
</p>
</body>
</html>
26. ATTRIBUTES
• Tags can contain attributes
• Attributes provide contextual information, just as giving it a style or unique
identifiers
• Always apply them to the first tag
• Attributes also allow for JavaScript actions
<div id=“section-first” class=“section”> </div>
CCT260 - Shanta R. Nathwani
26
27. ATTRIBUTES
• id must be unique throughout the page
• class associates or groups tags together
<div id=“section-one”>
<div class=“title”> Title of Section One </div>
<p>
This is <span class=“highlight”>section
one</span>. Next will be <span
class=“highlight”>section two</span>
</p>
</div>
CCT260 - Shanta R. Nathwani
27
28. QUICK POINT
• If you are copying code from the PowerPoint slide, make sure you change the
quotes!
“ stylised ” Improper
" ASCII-proper " Proper
• PowerPoint automatically uses stylised quotes, which is not recognised by browsers
CCT260 - Shanta R. Nathwani
28
29. STYLES AND HTML
• HTML originally was never meant to depict style
• It was created to provide semantic value to text
• Tells us “What is this?”
• i.e., Paragraph, Heading, List, List Item
• Hence the argument over <b> and <strong> tags rendering differently
• Before the existence of CSS, HTML was used “in-line” to change the
appearance. – DON’T DO THIS ANYMORE! (unless it’s a short piece of text)
CCT260 - Shanta R. Nathwani
29
30. STYLES AND CSS
• Cascading Style Sheets (CSS) was created to resolve this missing piece
• And stop the abuse of HTML to conduct formatting
• Tells us “What does it look like?”
• i.e., Size, shape, text, colour… and much more!
• CSS matches what is contained in the HTML code
• <div> in HTML is div in CSS
• For our purposes of this lab, CSS is to be placed in the <head> area of your
code.
CCT260 - Shanta R. Nathwani
30
31. STYLES - LEVELS
• Styles can be applied at five levels
• Element Level (HTML)
• <h1>
• Class Level
• .section
• Element/Class (Instance) Level
• ul.b
• ID Level
• #content
• In-Line Level
• Rarely used and considered poor form
• Few exceptions
CCT260 - Shanta R. Nathwani
31
32. ELEMENT STYLES
CCT260 - Shanta R. Nathwani
32
<html>
<head>
<style type="text/css">
body
{
background-color: orange;
}
</style>
</head>
<body> …
Style you are defining
Start of definition
End of definition
Property Value
33. <body>
The background is orange
<p>
bold text
<span class="red">that is red</span>
</p>
back to normal
</body>
CASCADING STYLES
CCT260 - Shanta R. Nathwani
33
• Styles are in inherited from parent elements
<style type="text/css">
body
{
background-color: orange;
}
p
{
font-weight: bold;
}
.red
{
color: red;
}
</style>
Class definition will change all
elements with the same class name
34. COLOURS
• Colours can be defined by name or value
red = rgb(255,0,0) = #FF0000
• color property will set the text
• background-color property will set the background
• Colours are important:
• Sets mood and possesses semantic meaning
http://kuler.adobe.com/#create/fromacolor
http://www.2createawebsite.com/build/hex-colors.html
CCT260 - Shanta R. Nathwani
34
35. FONT FAMILY
• There are only a dozen fonts uniform across browsers and systems
• Set the style of font by using the font-family property:
body
{
font-family: “Times New Roman”, “Times”, “serif”;
}
• Remember to have dropdown fonts
http://www.w3schools.com/cssref/css_websafe_fonts.asp
CCT260 - Shanta R. Nathwani
35
36. FONT SIZE
CCT260 - Shanta R. Nathwani
36
• Explicitly by using “em”s,
“pt”s or “px”s
• Implicitly using percentiles:
100%, 60% etc.
• Ems are relational to the font
• px are screen sizes, but
doesn’t work in older
browsers dealing with
accessibility
• I suggest using em:
font-size: 1.2em;
37. TEXT LAYOUT
• In the CSS
• text-align: [left|center|right|justify]
• text-decoration: [underline|line-through]
• text-indent: 50px
CCT260 - Shanta R. Nathwani
37
38. LAB TWO
Using the same file…
• Proper format the paragraphs (indentation and justified)
• Centre Titles
• Change the overall font and size
• Use a span to change in-line citation style
• Select a comfortable colour palette
All using CSS!
CCT260 - Shanta R. Nathwani
38
40. VIEWING YOUR HTML
• To preview your new document, open Chrome on the tool bar
(located up near the top of the browser):
• Select File menu.
Select Open Page
A dialogue box appears. Select Choose File
• Go to where you saved your file, click on it. This will bring you back to
the dialogue box, which should now be showing your file.
• Click Open
CCT260H - Shanta R. Nathwani
40
41. PLAYING WITH HTML
The best way to learn HTML:
• Play!
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
• Explore!
http://www.codecademy.com/tracks/web
CCT260H - Shanta R. Nathwani
41
42. LAST POINTS
• Please remember to “Save As…” an .html file
• When copying the code, quotations won’t necessarily work. Documents will
change quotation marks to curly quotes. Code needs straight quotes, so
please remove and replace the quotations when copying from PowerPoint
or Word.
• Don’t cross the streams! Make sure that your codes go together.
• For those using Windows, you can use Notepad++ as a text editor.
SublimeText 2 is another great one, but is a paid program
CCT260H - Shanta R. Nathwani
42
46. PLANNING YOUR SITE
• Think about what
divisions you will need
• Start with the highest
level: the body
• Then divide up your
page
• Starting with the
biggest divisions, down
to the smallest
CCT260 - Shanta R. Nathwani
46
Title
Menu
Main Area
Content
Footer
47. CODING YOUR SITE
<body>
<div id=“title”>
</div>
<div id=“menu”>
</div>
<div id=“mainarea”>
<div id=“content”>
</div>
<div id=“footer”>
</div>
</div>
CCT260 - Shanta R. Nathwani
47
Title
Menu
Main Area
Content
Footer
Note that ‘id’ or ‘class’ values cannot
contain spaces
48. PREPARING YOUR STYLE
<head>
<style type="text/css">
div {
border: solid 1px;
}
#title
{
}
#menu
{
}
CCT260 - Shanta R. Nathwani
48
#mainarea
{
}
#content
{
}
#footer
{
}
</style>
</head>
Adds a simple thin black border
around each division
This is just for clarity while editing
and we will remove this after we’re
done
Notice that instead of
using a period (.) we
use the hash symbol
(#) to reference the id
name of an element
50. POSITIONING YOUR DIVISIONS
• By default, <div>s take up the entire width of this page and resize the
length to fit your content
• You can force the size your <div> using pixels or ratios
e.g. height: 100px;
width: 50%;
• And, you can tell a division stay on one side
e.g. float: left;
float: right;
CCT260 - Shanta R. Nathwani
50
51. FORMATTING YOUR DIVISIONS
CCT260 - Shanta R. Nathwani
51
• You can space your <div>s
by adding margins
margin: 5px;
margin-top: 10px;
• Or padding
padding: 5px;
padding-left: 20px;
• Or borders
border: solid 5px
green;
54. COMPLETING DIVISIONS
CCT260 - Shanta R. Nathwani
54
• Now that it is laid out,
you can:
• Remove the borders
• Or add other borders
for visual separation
• Use the styles from last
lab (font-size, font-
family, font-weight,
color, background-color)
to format and style the
content
border-bottom: double 5px gray;
background-color: #DDDDDD;
font-size: 2em;
border-right: solid 2px
gray;
background-color:
#eeeeee;
text-align:center;
font-family: "Palatino
Linotype",
"Book Antiqua", Palatino,
serif;
text-align: right;
font-size: 0.8em;
color:#AAAAAA;
56. LAB THREE
• Create a new page (see Lab One)
• Create a layout for your page
• Give it some style (colours, borders, spacing)
• Copy the content of your last lab into your new page (everything between
the <body> and </body> tags)
CCT260 - Shanta R. Nathwani
56
57. CHOOSING A LAYOUT
• Sample layouts: http://foundation.zurb.com/templates.php
• Play with divisions:
http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel_width_doctype
• Play with borders:
http://www.w3schools.com/css/css_border.asp
CCT260 - Shanta R. Nathwani
57
60. OTHER THINGS TO REMEMBER
• Your head is always atop your body
• If it is otherwise, congrats, your more flexible than I am
• The only stupid question is one unasked
• Please post to the discussion group if you are having issues.
• Everything is in American spelling
• Sorry…
CCT260 - Shanta R. Nathwani
60
61. IMAGES
CCT260 - Shanta R. Nathwani
61
• Adding an image is easy!
• <img src=“K9.jpg”/>
• Sometimes files can be located in
a sub-folder of a website
• <img src=“Images/K9.jpg”/>
• Or on other sites
• <img
src=“http://shanta.ca/Images/K
9.jpg”/>
62. THE ALT AND TITLE TAGS
CCT260 - Shanta R. Nathwani
62
• The alt tag provides
textual context if the
image is missing
• The title tag provides a
tooltip for the user when
they place their cursor
over it
• <img src="K9.jpg" alt="K9
of Doctor Who" title="K9
of Doctor Who" />
63. THE ALT AND TITLE TAGS
CCT260 - Shanta R. Nathwani
63
• Don’t use the alt tag as
a tooltip (works only in
IE)
• Always use alt tags for
all important images
• This is used for
accessibility by people
with impaired vision
• And it is a requirement!
64. FLOATING IMAGES
CCT260 - Shanta R. Nathwani
64
• You can position images
using the float style
<img src="graph.jpg"
alt="Graph"
style="float:left;"/>
<img src="graph.jpg"
alt="Graph"
style="float:right;"/>
This is called an in-line style.
Use this for specific tags (like
image) and for extremely
individual changes.
Image is one of the only
exceptions that we will allow
for in-line style in the HTML.
65. RESIZING IMAGES
CCT260 - Shanta R. Nathwani
65
• You can change the
size of the image using
the width and height
tags
<img src=“K9.jpg" alt=“K9"/>
<img src="mertz.jpg"
alt="Mertz" width="40"/>
<img src="mertz.jpg"
alt="Mertz" width="100"
height="200"/> Normal
Small
Stretched
66. BACKGROUNDS
CCT260 - Shanta R. Nathwani
66
• Background for an
entire page
<style type="text/css">
body
{
background: url(floral.jpg);
}
</style>
67. BACKGROUNDS
CCT260 - Shanta R. Nathwani
67
• Or any other section of the
page
#box
{
float: left;
width: 480px;
padding: 50px;
background: url(background.jpg);
text-align: center;
}
<div id="box">
<h2>II. Economic Liabilities - Peak
Oil</h2>
<img src="graph.jpg" alt="graph"
width="300" />
</div>
68. OPACITY
CCT260 - Shanta R. Nathwani
68
• You can set the
opacity of items on
you page as well
#box
{
…
filter:
alpha(opacity=60);
/* CSS3 standard */
opacity: 0.6;
}
70. LINKS
• Links can be to internal, external site or jump to a section on your
page via an anchor
• We create a link by wrapping text or an image with the <a> tag
<a href="http://www.w3schools.com/">Visit W3Schools!</a> external
link
<a href=“mypage2.html">Page Two</a> internal
CCT260 - Shanta R. Nathwani
70
71. ANCHORS
• We can create anchors by creating an empty <a> tag and providing it
with an identifier
<a id="name"/>
• And link to it using the identifier with a # symbol
<a href="#name">Jump to Anchor called name</a>
CCT260 - Shanta R. Nathwani
71
72. LINKS
• From one page to another on your own site:
• On index page: <a href=“labone.html”>Lab One</a>
• On Lab One: <a href=“index.html”>Home Page</a>
• From one page to another external page:
• On your page to Google: <a href=“http://google.ca”>Google It!</a>
CCT260 - Shanta R. Nathwani
72
73. LINK STYLES
• Links have four states
a:link { color:#ff0000; } /* unvisited link */
a:visited { color:#00ff00; } /* visited link */
a:hover { color:#ff00ff; } /* mouse over link */
a:active { color:#0000ff; } /* selected link */
http://www.w3schools.com/css/tryit.asp?filename=trycss_link
CCT260 - Shanta R. Nathwani
73
74. VIDEO
<iframe width="420" height="315"
src="http://www.youtube.com/embed/Sqiff0WFWvs" frameborder="0"
allowfullscreen>
</iframe>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
</video>
CCT260 - Shanta R. Nathwani
74
There are two methods of placing video on a website using
the <iframe> and <video> tags.
75. LAB FOUR
• Add images within the text of your last assignment (not background)
• Add either a background image to the entire page or a div within the page
• Add a link to the Sheridan website
• Add anchors for each subheading and place links to them in your menu
• Put this lab on your webspace, then submit the link in a text file to the
dropbox.
• FOR THIS LAB, USE ONLY EXTERNAL IMAGES (i.e. reference an image
somewhere on the web where anyone can see it)
CCT260 - Shanta R. Nathwani
75
77. EXTERNAL CSS FILES
• Today, we’ve only put the CSS in the <head> portion of your .html file.
Typically, you would have an additional file
• Extension is .CSS
Insert the following line of code into the head of each of your HTML files:
<link rel="stylesheet" type="text/css" href="mystyle.css">*
*This assumes that the file is called “mystyle.css
78. EDITING AND UPLOADING
• I recommend you get some webspace somewhere to make this stuff live on
the internet
• Get an FTP program that you like using
• We typically use Cyberduck
• Get a good Code Editor
• We use Notepad++ on Windows, TextWrangler. Both are free.
• I personally recommend SublimeText