You are using a browser not supported by the Wolfram Cloud
Supported browsers include recent versions of Chrome, Edge, Firefox and Safari.
I understand and wish to continue anyway »
WOLFRAM NOTEBOOK
Prahasi Kacham HW WSS 2017
Web Development
Prahasi Kacham HW WSS 2017
Web Development
Web Development
Websites are a great to way to display your brand, promote your business or create a portfolio. With websites, the possibilities are endless.
History
History
Websites over time have transformed from symbols in the terminal to viewing a website in a browser. After that, there was the introduction of JavaScript, Flash and CSS which are all assets to creating a website.Then came responsive web design, grid layout and frameworks. The future: that’s up to you.
Why is Web Development important?
Why is Web Development important?
Web development helps display quality information that has a great user interface and has a large influence on whoever visits the website. This type of development has grown tremendously over the past few years and with the introduction of web libraries, anything is possible.
Figuring out what to add to the webpage
Figuring out what to add to the webpage
There are many different options as to what you can add on a webpage. Here are some examples of what you can add!
◼
Basic text with some styling
In[7]:=
Style["Hello, I am a programmer.",FontColorRed,FontSize16]
Out[7]=
Hello, I am a programmer
◼
Interpret function as HTML
In[1]:=
ExportString[Style["Hello, I am a programmer.",FontColorRed,FontSize16],"HTMLFragment"]
Out[1]=
"<span style=\"font-size:16px;color:#ff0000\">Hello, I am a programmer.</span>"
◼
Highlight text
In[2]:=
Style["This was a project I did for my freshman year. Check it out below!",BackgroundPink]
Out[2]=
"This was a project I did for my freshman year. Check it out below!"
◼
Interpret function as HTML
In[3]:=
ExportString[Style["This was a project I did for my freshman year. Check it out below!",BackgroundPink],"HTMLFragment"]
Out[3]=
<span style="background-color:#ff8080">This was a project I did for my freshman year. Check it out below!</span>
◼
Display an area on a website
In[10]:=
FormFunction[{"city""City"},GeoGraphics[#city]&,"PNG"]
Out[10]=
FormFunction
Out[11]=
FormFunction
◼
Interpret function as HTML
In[8]:=
ExportString[FormFunction[{"city""City"},GeoGraphics[#city]&,"PNG"],"HTMLFragment"]
In[14]:=
"<div class=\"form-object form-horizontal\"><div class=\"default-submit\" style=\"width: 0; height: 0; overflow: hidden;\"><button type=\"submit\"></button></div><div class=\"form-group\"><label for=\"id_city\" class=\"control-label col-sm-1\"><strong>city</strong></label><div class=\"col-sm-11\"><input type=\"text\" value=\"\" class=\"form-control\" name=\"city\" id=\"id_city\" data-field-name=\"City\" data-field-type=\"Semantic\" data-field-verbose=\"city\" data-field-examples=\"Koln, Germany||New York City||Paris, TX\" data-field-prompt=\"Enter a city||(or anything indicating one)\"/></div></div></div>"
◼
Create a graphics shape
In[32]:=
Graphics[Disk[]]
Out[32]=
◼
Interpret function as XML
In[31]:=
ExportString[Graphics[Disk[]],"SVG"]
Out[31]=
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="353pt" height="352pt" viewBox="0 0 353 352" version="1.1"><g id="surface14"><path style=" stroke:none;fill-rule:evenodd;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 352.320313 179 C 352.320313 133.296875 334.164063 89.46875 301.847656 57.152344 C 269.53125 24.835938 225.703125 6.679688 180 6.679688 C 134.296875 6.679688 90.46875 24.835938 58.152344 57.152344 C 25.835938 89.46875 7.679688 133.296875 7.679688 179 C 7.679688 224.703125 25.835938 268.53125 58.152344 300.847656 C 90.46875 333.164063 134.296875 351.320313 180 351.320313 C 225.703125 351.320313 269.53125 333.164063 301.847656 300.847656 C 334.164063 268.53125 352.320313 224.703125 352.320313 179 Z M 352.320313 179 "/></g></svg>
◼
Display images
In[35]:=
Import["https://www.google.com/search?q=dog","Images"]
Out[33]=
,
,
,
,
,
,
,
,
,
,
,
◼
Deploy the FormFunction to the web
In[18]:=
CloudDeploy[FormFunction[{"city""City"},GeoGraphics[#city]&,"PNG"]]
Creating a simple web app that tells you the population of a country
Creating a simple web app that tells you the population of a country
◼
Create a functional web app
In[29]:=
CloudDeploy[FormFunction[{{"x","Find the population of this country:"}"Country"},CountryData[#x,"Population"]&],Permissions"Public"]
ExportString[FormFunction[{{"x","Find the population of this country:"}"Country"},CountryData[#x,"Population"]&],"HTMLFragment"]
Out[28]=
<div class="form-object form-horizontal"><div class="default-submit" style="width: 0; height: 0; overflow: hidden;"><button type="submit"></button></div><div class="form-group"><label for="id_x" class="control-label col-sm-3"><strong>Find the population of this country:</strong></label><div class="col-sm-9"><input type="text" value="" class="form-control" name="x" id="id_x" data-field-name="Country" data-field-type="Semantic" data-field-verbose="country" data-field-examples="Iceland||ITA||the US||Japan||Nigeria" data-field-prompt="Enter a country||(or anything indicating one)"/></div></div></div>
You can change the layout of a form on a web app
You can change the layout of a form on a web app
◼
Deploy a blue form
In[22]:=
CloudDeploy[FormFunction[{"city""City"},GeoGraphics[#city]&,"PNG",PageTheme"Black"]]
Create a simple website that lets you upload a picture and detects the number of edges
Create a simple website that lets you upload a picture and detects the number of edges
Create a simple website that lets you upload a picture and detects the number of edges
◼
Cloud Deploy an app that detect edges of an image
In[11]:=
CloudDeploy[FormPage[{"image""Image"},EdgeDetect[#image]&],Permissions"Public"]
Advanced Features
Advanced Features
Web API’s
Web API’s
◼
Create code for calling an API from C#
Embed
Embed
◼
Create embed code to help embed in other languages
Mobile Apps
Prahasi Kacham
6/22/17
pk285@mynsu.nova.edu