The document provides instructions for setting up a basic website using HTML and CSS. It begins with directions for connecting to WiFi and downloading Sublime Text editor. It then outlines the basic HTML page structure and teaches how to add semantic elements like header, nav, section and footer. Styles are applied using CSS to change colors and layout. The document provides step-by-step guidance for adding content and images to the page. It concludes by suggesting additional features like responsive design.
In this HTML tutorial, you will find more than 200 examples. You can edit and test each example yourself!
*HTML stands for Hyper Text Markup Language
*HTML is the standard markup language for creating Web pages
*HTML describes the structure of a Web page
*HTML consists of a series of elements
*HTML elements tell the browser how to display the content
*HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
You can test the code by yourself by our online compiler in our website
http://www.pumotechnovation.com/
Go over a quick crash course into what it takes to develop a WordPress theme and then jump into some deeper waters on how to utilize Custom Post Types, create custom theme options, and custom meta boxes.
In this HTML tutorial, you will find more than 200 examples. You can edit and test each example yourself!
*HTML stands for Hyper Text Markup Language
*HTML is the standard markup language for creating Web pages
*HTML describes the structure of a Web page
*HTML consists of a series of elements
*HTML elements tell the browser how to display the content
*HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
You can test the code by yourself by our online compiler in our website
http://www.pumotechnovation.com/
Go over a quick crash course into what it takes to develop a WordPress theme and then jump into some deeper waters on how to utilize Custom Post Types, create custom theme options, and custom meta boxes.
Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, and writing more appropriate copy, but user experience goes far beyond the interface. Our users’ experiences begin with their first request to our servers. In this intensely practical session, Aaron will explore the ins and outs of page load performance by showing how he made the web site of the 10K Apart meet its own contest rules, by having a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll walk away with a better understanding of the page load process as well as numerous ways you can improve the projects you are working on right now.
Here is the presentation from Dave Jesch, a Wordpress Plugin Developer, who walked our Meetup.com group through an installation of Wordpress and respective SEO plugins. Dave actually created two plugins linked to from the Slideshare for Google Analytics and Facebook integration. Visit http://www.diyonlinesolutions.com/ to learn more about Dave Jesch.
HTML5 introduces a number of new elements and attributes that helps in building a modern websites. This presentation explains new great features introduced in HTML5.
Web Design Basics for Kids: HTML & CSSAnnMarie Ppl
A presentation I'm giving tomorrow to our Kids' Coding Club, a group of tweens who come to Pasadena Public Library to learn about coding and computer science.
This presentation is for Web designing students. Presentation Topic is HTML - 5 Introduction. This includes History of HTML, What is HTML 5, Goals of HTML 5, Difference between HTML 4 and HTML 5, Semantic Elements, HTML 5 New Inputs, Other new features, Key features of HTML 5 depicted by 2 pictures, HTML 5 web storage - Local storage and session storage, tags that are not supported in HTML 5.
The Re-brand WordPress Admin is for developers who want to give their clients a more personalized and less confusing content management system with amazing look and feel.
In Class Assignment 1 WebServices-CSET3200
September 28th, 2016
HTML & CSSWhat is Bootstrap?
· Bootstrap is a free front-end framework for faster and easier web development
· Bootstrap includes HTML and CSS based design templates for forms, buttons, tables, navigation, and many other, as well as optional JavaScript plugins
· Bootstrap also gives you the ability to easily create responsive designs
What is Responsive Web Design?
Responsive web design is about creating web sites, which automatically adjust themselves to look good on all devices, from small phones to large desktops.
Why Use Bootstrap?
Advantages of Bootstrap:
· Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
· Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
· Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
· Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)
Where to Get Bootstrap?
There are two ways to start using Bootstrap on your own web site.
You can:
· Download Bootstrap from getbootstrap.com
· Include Bootstrap from a CDN
· There are several templates available including Portfolio Template.
Quick Reminders:
* Browser opens the index page as the homepage automatically.
Three quick points before we go on to the next lesson:
1. What you made in lab 1 and 2 is a skeleton HTML document. This is the minimum required information for a web document and all web documents should contain these basic components.
2. The document title is what appears at the very top of the browser window.
3. Of all the things on your web page, the title is what search engines consider most when ranking a page. Choose your titles carefully, and keep them brief.
IMPORTANT NOTE: Whenever you make a change to your document, just save it, then hit the Refresh/Reload button on your browser. In many instances, just hitting the refresh button does not quite do the trick.
Agenda:
Today we will see and document the output/results we get after writing these code snippets and different exercises.
The aim of today’s lab is to be able to communicate your concept in a technical manner using the technical terminologies, in addition to learning new skill set. You can earn up to 30 points at the completion of this lab.
In case you find it extremely hard to express a specific outcome in words, then you are allowed to take a screen shot of the outcome and submit it in your document. However, there is a limit to screen shots. You can add a maximum of 7 images for this lab.
Introduction to Nav Area:
1. In an html file, add the following snippets in the body section.
2. Add the following for Styling:
3. State the major differences you have noticed so far.
<body bgcolor="#ccffcc">
Something really cool
</body>
#ccffcc is computerese (the symb.
Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, and writing more appropriate copy, but user experience goes far beyond the interface. Our users’ experiences begin with their first request to our servers. In this intensely practical session, Aaron will explore the ins and outs of page load performance by showing how he made the web site of the 10K Apart meet its own contest rules, by having a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll walk away with a better understanding of the page load process as well as numerous ways you can improve the projects you are working on right now.
Here is the presentation from Dave Jesch, a Wordpress Plugin Developer, who walked our Meetup.com group through an installation of Wordpress and respective SEO plugins. Dave actually created two plugins linked to from the Slideshare for Google Analytics and Facebook integration. Visit http://www.diyonlinesolutions.com/ to learn more about Dave Jesch.
HTML5 introduces a number of new elements and attributes that helps in building a modern websites. This presentation explains new great features introduced in HTML5.
Web Design Basics for Kids: HTML & CSSAnnMarie Ppl
A presentation I'm giving tomorrow to our Kids' Coding Club, a group of tweens who come to Pasadena Public Library to learn about coding and computer science.
This presentation is for Web designing students. Presentation Topic is HTML - 5 Introduction. This includes History of HTML, What is HTML 5, Goals of HTML 5, Difference between HTML 4 and HTML 5, Semantic Elements, HTML 5 New Inputs, Other new features, Key features of HTML 5 depicted by 2 pictures, HTML 5 web storage - Local storage and session storage, tags that are not supported in HTML 5.
The Re-brand WordPress Admin is for developers who want to give their clients a more personalized and less confusing content management system with amazing look and feel.
In Class Assignment 1 WebServices-CSET3200
September 28th, 2016
HTML & CSSWhat is Bootstrap?
· Bootstrap is a free front-end framework for faster and easier web development
· Bootstrap includes HTML and CSS based design templates for forms, buttons, tables, navigation, and many other, as well as optional JavaScript plugins
· Bootstrap also gives you the ability to easily create responsive designs
What is Responsive Web Design?
Responsive web design is about creating web sites, which automatically adjust themselves to look good on all devices, from small phones to large desktops.
Why Use Bootstrap?
Advantages of Bootstrap:
· Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
· Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
· Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
· Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)
Where to Get Bootstrap?
There are two ways to start using Bootstrap on your own web site.
You can:
· Download Bootstrap from getbootstrap.com
· Include Bootstrap from a CDN
· There are several templates available including Portfolio Template.
Quick Reminders:
* Browser opens the index page as the homepage automatically.
Three quick points before we go on to the next lesson:
1. What you made in lab 1 and 2 is a skeleton HTML document. This is the minimum required information for a web document and all web documents should contain these basic components.
2. The document title is what appears at the very top of the browser window.
3. Of all the things on your web page, the title is what search engines consider most when ranking a page. Choose your titles carefully, and keep them brief.
IMPORTANT NOTE: Whenever you make a change to your document, just save it, then hit the Refresh/Reload button on your browser. In many instances, just hitting the refresh button does not quite do the trick.
Agenda:
Today we will see and document the output/results we get after writing these code snippets and different exercises.
The aim of today’s lab is to be able to communicate your concept in a technical manner using the technical terminologies, in addition to learning new skill set. You can earn up to 30 points at the completion of this lab.
In case you find it extremely hard to express a specific outcome in words, then you are allowed to take a screen shot of the outcome and submit it in your document. However, there is a limit to screen shots. You can add a maximum of 7 images for this lab.
Introduction to Nav Area:
1. In an html file, add the following snippets in the body section.
2. Add the following for Styling:
3. State the major differences you have noticed so far.
<body bgcolor="#ccffcc">
Something really cool
</body>
#ccffcc is computerese (the symb.
HTML Lab ProjectTo create a simple web page you will need .docxadampcarr67227
HTML Lab Project
To create a simple web page you will need to use a text processor (Notepad) and HTML (hypertext markup language). Do NOT use Word which can create some problems by automatically formatting your work as a web page.
The tags (items enclosed in < >) from HTML create the special effects that are seen on web pages when using a browser like Internet Explorer.
Note: some tags require a starting and ending tag. For example: <h1>This is my home page </h1>
Also if multiple tags are used to format a single item, ending tags must be written in reverse order from the starting tags.
Example:
<h1><center> My First Home Page </center></h1>
tag1 tag2 endtag2 endtag1
After completing the steps in the tutorial, you should be able to:
1. Create a Home Page using HTML
2. Create headings
3. Place text and graphics in an HTML document
4. Use attributes such as font color with tags
5. Create links to other places or documents
Home Pages
The home page of a web site is the starting point that usually describes the purpose of the web site and its categories. The page typically includes hyperlinks which will take the viewer to other web sites or other places within the same web site. In planning a home page consider these items
· Title – this text will appear on the blue title bar of your web page
· Headings – customarily the first heading is the same as the title; it appears as the first line of your home page. Each browser displays headings in a unique way, but they allow several levels of headings from H1 to H6. Heading 1 would be the largest, most noticeable, heading 6 the smallest. In the examples that follow, the first line of each pair shows the HTML tags; the second line is the effect produced.
<h1>H1 headings</h1>
H1 headings
<h2> H2 headings</h2>
H2 headings
<h3>H3 headings</h3>
H3 headings<h4> H4 headings</h4>
H4 Headings
<h5> H5 headings</h5>
H5 Headings
<h6>H6 headings</h6>
H6 Headings
Content - Text that explains your home page or special features of the page.
Create a Sample HTML Page
Step 1.
A. Open Notepad (Click on Start, Programs, Accessories, Notepad).
B. Enter the following text:
<html>
<head>
<title>Your Name Home Page</title>
</head>
<h1>Your Name Home Page </h1>
</html>
C. Choose File, Save As. For the file name, use mysample_Lastname_Firstname.htm in Save As Type, choose All Files, and save to your desktop, or other easy to find location.
(CAUTION: if you neglect to choose All Files, this will be saved as a text file, ending in txt, and will not be available for opening in your browser.
Step 2.
A. Start your browser (Internet Explorer). It is not necessary to be online.
B. From the menu bar, choose File, Open.
C. Browse for the file you just saved on your desktop (mysample_firstname_lastname.htm).
D. Choose Open.
E. You should see only the title bar and a heading on your newly created homepage.
Step 3.
A.
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.
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.
Designing a website involves many steps. Web designers first create their designs in Photoshop. Those designs are then converted into HTML format. This document covers the process of converting by hand, without the aid of PSD conversion programs or websites.
First Steps with Globus Compute Multi-User EndpointsGlobus
In this presentation we will share our experiences around getting started with the Globus Compute multi-user endpoint. Working with the Pharmacology group at the University of Auckland, we have previously written an application using Globus Compute that can offload computationally expensive steps in the researcher's workflows, which they wish to manage from their familiar Windows environments, onto the NeSI (New Zealand eScience Infrastructure) cluster. Some of the challenges we have encountered were that each researcher had to set up and manage their own single-user globus compute endpoint and that the workloads had varying resource requirements (CPUs, memory and wall time) between different runs. We hope that the multi-user endpoint will help to address these challenges and share an update on our progress here.
Large Language Models and the End of ProgrammingMatt Welsh
Talk by Matt Welsh at Craft Conference 2024 on the impact that Large Language Models will have on the future of software development. In this talk, I discuss the ways in which LLMs will impact the software industry, from replacing human software developers with AI, to replacing conventional software with models that perform reasoning, computation, and problem-solving.
Providing Globus Services to Users of JASMIN for Environmental Data AnalysisGlobus
JASMIN is the UK’s high-performance data analysis platform for environmental science, operated by STFC on behalf of the UK Natural Environment Research Council (NERC). In addition to its role in hosting the CEDA Archive (NERC’s long-term repository for climate, atmospheric science & Earth observation data in the UK), JASMIN provides a collaborative platform to a community of around 2,000 scientists in the UK and beyond, providing nearly 400 environmental science projects with working space, compute resources and tools to facilitate their work. High-performance data transfer into and out of JASMIN has always been a key feature, with many scientists bringing model outputs from supercomputers elsewhere in the UK, to analyse against observational or other model data in the CEDA Archive. A growing number of JASMIN users are now realising the benefits of using the Globus service to provide reliable and efficient data movement and other tasks in this and other contexts. Further use cases involve long-distance (intercontinental) transfers to and from JASMIN, and collecting results from a mobile atmospheric radar system, pushing data to JASMIN via a lightweight Globus deployment. We provide details of how Globus fits into our current infrastructure, our experience of the recent migration to GCSv5.4, and of our interest in developing use of the wider ecosystem of Globus services for the benefit of our user community.
Accelerate Enterprise Software Engineering with PlatformlessWSO2
Key takeaways:
Challenges of building platforms and the benefits of platformless.
Key principles of platformless, including API-first, cloud-native middleware, platform engineering, and developer experience.
How Choreo enables the platformless experience.
How key concepts like application architecture, domain-driven design, zero trust, and cell-based architecture are inherently a part of Choreo.
Demo of an end-to-end app built and deployed on Choreo.
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...Mind IT Systems
Healthcare providers often struggle with the complexities of chronic conditions and remote patient monitoring, as each patient requires personalized care and ongoing monitoring. Off-the-shelf solutions may not meet these diverse needs, leading to inefficiencies and gaps in care. It’s here, custom healthcare software offers a tailored solution, ensuring improved care and effectiveness.
Understanding Globus Data Transfers with NetSageGlobus
NetSage is an open privacy-aware network measurement, analysis, and visualization service designed to help end-users visualize and reason about large data transfers. NetSage traditionally has used a combination of passive measurements, including SNMP and flow data, as well as active measurements, mainly perfSONAR, to provide longitudinal network performance data visualization. It has been deployed by dozens of networks world wide, and is supported domestically by the Engagement and Performance Operations Center (EPOC), NSF #2328479. We have recently expanded the NetSage data sources to include logs for Globus data transfers, following the same privacy-preserving approach as for Flow data. Using the logs for the Texas Advanced Computing Center (TACC) as an example, this talk will walk through several different example use cases that NetSage can answer, including: Who is using Globus to share data with my institution, and what kind of performance are they able to achieve? How many transfers has Globus supported for us? Which sites are we sharing the most data with, and how is that changing over time? How is my site using Globus to move data internally, and what kind of performance do we see for those transfers? What percentage of data transfers at my institution used Globus, and how did the overall data transfer performance compare to the Globus users?
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...Juraj Vysvader
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I didn't get rich from it but it did have 63K downloads (powered possible tens of thousands of websites).
Cyaniclab : Software Development Agency Portfolio.pdfCyanic lab
CyanicLab, an offshore custom software development company based in Sweden,India, Finland, is your go-to partner for startup development and innovative web design solutions. Our expert team specializes in crafting cutting-edge software tailored to meet the unique needs of startups and established enterprises alike. From conceptualization to execution, we offer comprehensive services including web and mobile app development, UI/UX design, and ongoing software maintenance. Ready to elevate your business? Contact CyanicLab today and let us propel your vision to success with our top-notch IT solutions.
top nidhi software solution freedownloadvrstrong314
This presentation emphasizes the importance of data security and legal compliance for Nidhi companies in India. It highlights how online Nidhi software solutions, like Vector Nidhi Software, offer advanced features tailored to these needs. Key aspects include encryption, access controls, and audit trails to ensure data security. The software complies with regulatory guidelines from the MCA and RBI and adheres to Nidhi Rules, 2014. With customizable, user-friendly interfaces and real-time features, these Nidhi software solutions enhance efficiency, support growth, and provide exceptional member services. The presentation concludes with contact information for further inquiries.
Prosigns: Transforming Business with Tailored Technology SolutionsProsigns
Unlocking Business Potential: Tailored Technology Solutions by Prosigns
Discover how Prosigns, a leading technology solutions provider, partners with businesses to drive innovation and success. Our presentation showcases our comprehensive range of services, including custom software development, web and mobile app development, AI & ML solutions, blockchain integration, DevOps services, and Microsoft Dynamics 365 support.
Custom Software Development: Prosigns specializes in creating bespoke software solutions that cater to your unique business needs. Our team of experts works closely with you to understand your requirements and deliver tailor-made software that enhances efficiency and drives growth.
Web and Mobile App Development: From responsive websites to intuitive mobile applications, Prosigns develops cutting-edge solutions that engage users and deliver seamless experiences across devices.
AI & ML Solutions: Harnessing the power of Artificial Intelligence and Machine Learning, Prosigns provides smart solutions that automate processes, provide valuable insights, and drive informed decision-making.
Blockchain Integration: Prosigns offers comprehensive blockchain solutions, including development, integration, and consulting services, enabling businesses to leverage blockchain technology for enhanced security, transparency, and efficiency.
DevOps Services: Prosigns' DevOps services streamline development and operations processes, ensuring faster and more reliable software delivery through automation and continuous integration.
Microsoft Dynamics 365 Support: Prosigns provides comprehensive support and maintenance services for Microsoft Dynamics 365, ensuring your system is always up-to-date, secure, and running smoothly.
Learn how our collaborative approach and dedication to excellence help businesses achieve their goals and stay ahead in today's digital landscape. From concept to deployment, Prosigns is your trusted partner for transforming ideas into reality and unlocking the full potential of your business.
Join us on a journey of innovation and growth. Let's partner for success with Prosigns.
A Comprehensive Look at Generative AI in Retail App Testing.pdfkalichargn70th171
Traditional software testing methods are being challenged in retail, where customer expectations and technological advancements continually shape the landscape. Enter generative AI—a transformative subset of artificial intelligence technologies poised to revolutionize software testing.
Globus Connect Server Deep Dive - GlobusWorld 2024Globus
We explore the Globus Connect Server (GCS) architecture and experiment with advanced configuration options and use cases. This content is targeted at system administrators who are familiar with GCS and currently operate—or are planning to operate—broader deployments at their institution.
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoamtakuyayamamoto1800
In this slide, we show the simulation example and the way to compile this solver.
In this solver, the Helmholtz equation can be solved by helmholtzFoam. Also, the Helmholtz equation with uniformly dispersed bubbles can be simulated by helmholtzBubbleFoam.
Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdfJay Das
With the advent of artificial intelligence or AI tools, project management processes are undergoing a transformative shift. By using tools like ChatGPT, and Bard organizations can empower their leaders and managers to plan, execute, and monitor projects more effectively.
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus
As part of the DOE Integrated Research Infrastructure (IRI) program, NERSC at Lawrence Berkeley National Lab and ALCF at Argonne National Lab are working closely with General Atomics on accelerating the computing requirements of the DIII-D experiment. As part of the work the team is investigating ways to speedup the time to solution for many different parts of the DIII-D workflow including how they run jobs on HPC systems. One of these routes is looking at Globus Compute as a way to replace the current method for managing tasks and we describe a brief proof of concept showing how Globus Compute could help to schedule jobs and be a tool to connect compute at different facilities.
How Recreation Management Software Can Streamline Your Operations.pptxwottaspaceseo
Recreation management software streamlines operations by automating key tasks such as scheduling, registration, and payment processing, reducing manual workload and errors. It provides centralized management of facilities, classes, and events, ensuring efficient resource allocation and facility usage. The software offers user-friendly online portals for easy access to bookings and program information, enhancing customer experience. Real-time reporting and data analytics deliver insights into attendance and preferences, aiding in strategic decision-making. Additionally, effective communication tools keep participants and staff informed with timely updates. Overall, recreation management software enhances efficiency, improves service delivery, and boosts customer satisfaction.
How Recreation Management Software Can Streamline Your Operations.pptx
Day of code
1. Log into the Wifi
Wireless: DevCode#-#.#
Password: D3v$tudent
Download and install
Sublime Text Editor
www.sublimetext.com
For now, you can get by simply
evaluating Sublime. Please
purchase for continued use.
5. HTML is a markup language.
HTML uses tags to markup elements.
6. <p> Let's learn some stuff! </p>
The basic tag structure
opening tag closing tag
7. An element is something on the webpage (text, image, etc).
The tag indicates what it is…
Think of opening and closing tags as fill-in-the-blanks.
The tag tells the browser what to do with the element
8. Create a folder on your desktop, call it DayOfCode
Open Sublime Text and create a new blank file.
Save the file as example.html
Save it to the DayOfCode folder on the Desktop. Double-click the file to open in Chrome.
10. Add the basic structure
to the page.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
11. Add some information to
the <head>.
<head>
<meta charset="utf-8">
<meta name="description" content="This is my first website!">
<meta name="author" content="Professor Nick">
<title>My First Site - Pirate Edition</title>
<style> </style>
</head>
‘charset’, ‘name’, and ‘content’ are attributes.
Attributes give the browser more information
about an element.
12. The <head> is just that information
we want to tell the browser.
13. The <body> is everything we want to
display on the page.
14. Laying out the page
All of the content we want to display needs to go between the opening
and closing <body> tags.
We can use HTML5 semantic elements to lay out our page.
A semantic element is one which inherently describes its use to the
browser and developers. For example, <nav> is a navigation element.
15. Semantic elements
are what they sound
like
<header> - heading with intro
<nav> - navigation
<section> - elements grouping
<article> - self contained element
<footer> - page footer
<aside> - related sidebar
header
nav
footer
section
article
aside
32. Adding the content in the <body>.
<nav>
<h3>
<a href=“index.html”> Home </a>
</h3>
</nav>
header
nav
footer
section
33. if you want to make the link bigger or change the color, use CSS!
h3 { font-size: 40px;}
34. Adding the content in the <body>.
<section>
<h2> My first page. </h2>
<p> Welcome to my site! I am so
glad you stopped in! … </p>
</section>
header
nav
footer
section
54. Where to start
It’s all about communication, let’s touch base with Postman
Postman lets us test API calls
I am going to make a call to the following API
http://beermapping.com/webservice/loccity/1d0dec692e53fe232c
e728a7b7212c52/milwaukee&s=json
56. There are some buzz words we should know a little about…
57. There are some buzz words we should know a little about…
Javascript
The programming
language of the web.
58. There are some buzz words we should know a little about…
Javascript & jQuery
Prewritten code that
makes JavaScript easier.
The programming
language of the web.
59. There are some buzz words we should know a little about…
Javascript & jQuery & AJAX
A method of loading
data on a webpage.
The programming
language of the web.
Prewritten code that
makes Javascript easier.
60. There are some buzz words we should know a little about…
Javascript & jQuery & AJAX & JSON
A common data
format in JavaScript.
The programming
language of the web.
Prewritten code that
makes JavaScript easier.
A method of loading
data on a webpage.
67. Responsive design is an approach to web design that
optimizes the user experience and interface based on
the screen of the user.
(often including flexible layouts and images, and mobile friendly
navigation)
68. Getting started,
Lets draw out a traditional page as
it would appear on a desktop
Note: this is not mobile-first approach
91. We need to do three things:
Tell the browser some stuff
92. First, let’s tell the browser some stuff
(In addition to what we have already added)
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1”>
</head>
93. Then, let’s get our styles
This is in addition to what you already have
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
rel="stylesheet">
</head>
94. Finally, need to link to the Bootstrap
script file
Notice this is between the body tags
<body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
97. Here is one we created earlier
Go to the following link to copy the starter code.
https://codepen.io/fiercealfalfa/pen/YVWGao
98. Writing the Code
Create a sub-folder inside our DayOfCode folder called js
Create a new file named main.js and save it inside our new
sub-folder
Connect our main.js file to our index.html file
Add the following line of code in the html file, right above the
closing </body> tag
<script src="js/main.js"></script>
</body>
99. The search function
Inside the main.js file add the following yellow text
This is the function that gets called when we click on the search button
function search() {
}
Right now it is empty and wont do anything, but we are going to change
that
105. function search() {
event.preventDefault();
var query = $("#searchInput").val();
$.ajax({
url: 'http://beermapping.com/webservice/loccity/1d0dec692e53fe232ce728a7b7212c52/'+ query
+'&s=json',
method: 'GET',
dataType: 'json',
success: function(data){
handleSearchResults(data);
},
error: function(data){
console.log(data);
}
});
}
The Completed Function
106. The handleSearchResults Function
Now we have a function to perform the search, we need a function
to process the results
This function gets called from inside the search function
110. function handleSearchResults(result){
var breweries = result.filter(function(el){
return el.status === "Brewery";
});
$('#results').empty();
$.each(breweries, function(index){
var breweryId = breweries[index].id;
$('#results').append('<div class="row"><div class="col-md-8"><p>' +
breweries[index].name + '</p></div><div class="class-md-4"><input
class="mapShow" type="button" value="Show on Map"
onclick="getBreweryLatLng('+breweryId+')" /></div></div>');
});
}
111. function handleSearchResults(result){
var breweries = result.filter(function(el){
return el.status === "Brewery";
});
$('#results').empty();
$.each(breweries, function(index){
var breweryId = breweries[index].id;
$('#results').append('<div class="row"><div class="col-md-8"><p>' +
breweries[index].name + '</p></div><div class="class-md-4"><input
class="mapShow" type="button" value="Show on Map"
onclick="getBreweryLatLng('+breweryId+')" /></div></div>');
});
}
The Completed Function
112. Adding the map
First we need to add the Google Maps API Scripts to our index.html file
Add the following yellow lines, directly above the script tags that link to our main.js
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCocQb4O7uFW3AVorZJ1HIGZrW9BsGwT
e8&callback=initMap"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
113. The initial map function
Now we are going to write the function that adds the map to our
html page
Put the following into your main.js file
114. var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: { 'lat': 0, 'lng': 0 }
});
}
115. Getting the latitude and longitude
In order to show the location of the breweries on the map, we need their
longitude and latitude
We are going to write a function that takes the id of a brewery and
returns its longitude and latitude
118. Placing markers on the map
In the last function, when we successfully obtained the long and lat
of a brewery we called a function named placeMarker
This function will place a marker on the map for us at the selected
location and pan the map to that location
120. Completed main.js
Go to the following link to copy the completed main.js file and updates
to the index.html
https://codepen.io/fiercealfalfa/pen/WjxGyp
121. Adding our own styles
In order for the map to show, and for our page to look good, we need
to add some styles
Create a new sub-folder called styles inside your DayOfCode folder
Create a new document and name it styles.css and save it in your
new sub-folder
140. Git is an open source distributed
version control system
Meaning - a system that records changes over time.
141. Features of Git source control
Centralized
Backups
Historical overview of changes
Access control
Conflict resolution
142. Concepts of source control
Repository
Revision
Working copy
Branching
Merging
143. What is a diff?
A change at a line level between two versions
Version control tracks diffs over time
144. What is a repo?
Stores code
Each project should have its own repo
Ability to view changes/commits over time
Ability to rollback changes
145. Commits
Committing is your backup and bookmark
A commit is a grouping of differences
Commits are stored by the repo
Commit whenever you complete something that works
Even if it is small
Commit often
146. Basic Commands
git add . // add files to staging
git commit -m “message” // commit staged files
git push // push commits to remote
git status // check for staged and untracked changes
git init // initialize an empty git repo
git diff [commit hash] // view the diff between two commits
147. Basic Commands
git branch // lists all local branches in repo
git log // lists all commits in current branch’s history
git branch [branch-name] // creates new branch
git checkout [branch-name] // switches to branch
git merge [branch-name] // combine branch into current branch
git branch -d [branch-name] // delete branch
149. Basic use
Once you have successfully complete a small task
1. git add . (add the files)
2. git commit -m “message”
3. git pull
4. Test code and resolve conflicts
5. git push
160. What do you suppose Github Pages are?
Public webpages, hosted by Github
Can be manually created or automatically generated
Pages are served over HTTP
For more information
Visit https://pages.github.com
161. Let’s upload a site to Github Pages
Along the way, we will configure Github, if you haven’t
already
162.
163.
164.
165.
166. Time to get copying!
Copy your site files to the repo.