How to create an embed FROM your website? - html

It seems impossible to search this, so I'm asking this here. I'm currently making a web application, and I want to be able to let users embed from my website. How would I do this? Whenever I try to search for resources regarding this, results tend to speak about embedding from OTHER websites, when I'm trying to find a tutorial where users can embed from MY website. I'm trying to create a pomodoro timer that people can embed in their own websites, much like you can embed a YouTube video into your own HTML page. However, I have not been able to find resources regarding this.
Edit: Question was a little too broad, appreciate the input from everyone else on how to specify it. I wrote the question a little out of frustration, my bad.

There are several ways to accomplish this. One way is to use IFRAME (youtube allows this for example) or you create a javascript snippet, that will make calls against your webserver or the API and render the data. You could event "inject" a new tag (Webcomponent-Style).
The best answer would be to take a look how others (Twitter, Youtube, Reddit) let you embed their stuff and from there on to choose what your fitting solution would be.
Your question is a bit broad and in any way specific. Please feel open to have a look at the StackOverflow Guidelines.

Related

How to change Information on an existing web page

Right now i am building out my first web page for a friend. She told me that she would like to be able to change infos and files like for example pictures or also the availabilty of her house in a calendar.
So my question is once the website is online how would i change things like that.
PS: Sorry for asking such a question on this platform since it seems most of the questions are purely reagrding coding, but I am new to the development world and I couldn't really find a good answer to that through google.

Is there a simple way to allow a thrid party to add content to my website?

I am currently creating a basic website for a small sports-association. It is simply used to display some basic information about training times, becoming a member, locations, history, etc...
However, we would also like the option to add news and upcoming special events. I am making the website in HTML, but this is much too complex for the other volunteers. I was wondering if I could embed some service into the website where they can easily add some small news articles without diving into html.
I myself was first thinking of using some simple blog-service (like notion.so, blogger.com) and embedding this using an IFrame. However, most websites have a protection against being used as a frame.
I would like at some point that they do not rely on me for basic updates. Is there a way to implement this option? Or should we fall back on something like google sites?
It really depends on the company. I suggest asking them if they would like to add content first, and if they say no, I think thats copyright.
I suggest not using google sites because the viewers of the website can always scroll dow and find out this is through Google Sites. In my opinion that doesn't seem as professional.
My answer is to teach them the basics. It isn't that hard to teach them that the text goes inside and a header is through
I now found out it is possible to embed a blogger.com page in an iFrame, so this is a solution for now.

How to create an animated website like Ba Ba Dum [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
My wife's birthday is coming up and I would like to create a website similar to
Ba Ba Dum: https://babadum.com/
I have learned HTML5 in school but never learned about its ability to create animated websites.
How do I go about making a website like that? Do I have to use Flash or is it fully rendered with HTML5? Looking at the source code revealed something about google api and ajax and jquery, are they essential to making an animated website like this?
Thanks!
Although your question is way, way too broad, I'll try to help.
The site you linked -as far as I can tell- is made HTML, CSS and JavaScript. There are less and less sites that use Flash, and you shouldn't use that either - it's starting to die out, at last.
Be prepared to research a lot - you'll have to learn about CSS3 (style, position and animations), JavaScript ("JS", it's very useful for sites filled with interactive elements - sounds, videos, etc) and jQuery (special JS library, it contains several dozens of pre-written functions that can make web development easier and faster). If I were you, I'd visit Codecademy, it's a website that teaches these languages, and for free. Completing those courses shouldn't take more than 20-30 hours, and it would give you a solid base to start from.
Of course, the required skill level depends on the type of site you want to build. A simple, animated website can be built with only HTML and CSS3. For more complex sites you most likely have to use JS and jQuery.
Here is what should you do:
Start out with a fix idea: you want to know what you want to create, especially because (probably) this will be your first serious project. Doodle on paper, write down your ideas about what should happen if you press a button, for example.
Divide the site into smaller pieces: you won't finish it one day, so you should focus on building the site step by step. Create a button, use CSS to make it fancy then give it some animation. If you are satisfied, you can move on to the next part.
Research: most likely you won't be the first person to do the things you want to do the way you want to do. Use google and you'll find hundreds of different tutorials, starting from simple things (building a layout) to more complex one (pure CSS animations, canvas, etc). If you stuck, Stackoverflow will help, but you'll have to be more specific with your questions. This current question is bad, and I'm only writing this response because I too know about needing help and realizing no one will help me just because my question is too broad. And I don't have anything better to do at 23:40 :) Try to find out if someone already asked your question - it's possible, and that way you may find the answer(s) instantly.
Study source codes: if you are using Chrome, you click on any element on a site to view it's code - you just have to select "Inspect element" from the context menu (there are other ways to do it with other browsers). It will show you the HTML, the CSS properties and even the relevant JS code. You can modify these values (especially useful with CSS) if you want to experiment a little - these changes are only visible for you and deleted when you refresh the page. This method is useful if you found the perfect button animation you want to include on your page but don't know how to do it.
Backup your work! Create a backup copy of your site every day, so if you mess something up badly (happens to everyone, especially if you're in a hurry like often I am) you don't have to start from scratch. It happened to me before, and if you are using other people's code (from tutorials, I'm not talking about stealing) it might happen to you too.
Also, good luck!
Here are a few places I'd recommend going to, all of these have helped me and are a good place to start.
Codecademy - http://www.codecademy.com/learn
For basic HTML, CSS, JavaScript and jQuery lessons. Best site on the web, I say. Also, recently released AngularJS lessons, which are quite good.
Code school - https://www.codeschool.com/
Provides good AngularJS lessons, which you should do once you've finished the Codecademy ones.
Egghead - https://egghead.io/
Good for AngularJS lessons and HTML5 canvas lessons. The HTML5 canvas lessons are brilliant, the presenter is a genius.
What all these things are.
HTML5 canvas - A method of drawing graphics to the screen. Great for video games and animations. I've actually made the loading effect of that site you listed with canvas.
jQuery - A JavaScript library, which is a bunch of predefined functions for ease in coding. It is good for special effects and event listeners.
AngularJS - An awesome library which makes displaying data so much easier. Great for fast single page apps.

Embedding multiple pages within one page, possible?

I wanted to make a webpage with three columns, one for my youtube feed, one for reddit, and one for a meme site undecided. I assumed this would be very simple using iframes, oh ho so wrong. I had no idea about the security google, facebook, reddit and others had taken to stop people from using iframes for their sites. Seeing no easy way to circumvent this issue I hope that the good people at stack overflow might have some knowledge of how I can do this.
Note, i also tried rss feeds. Found this very messy but if someone knows of a good way to do it please let me know
You could use their API'S and convert the answer to your API reuqest to JSON so you can parse that as a video. That way you won't have to use iFrames. I hope this helps.

Flash parser for html

As I was working on this project for a friend of mine who is terrified of changing from HTML to flash, I realized that maybe there could be a bridge between them. So I started working on a flash project that would grab the HTML from his page and parse it to display it in flash. Although I am sure there are resources available for this already, I figured that the experts on SO might be willing to suffer through the logic of one user trying to develop this script.
So basically, I am not asking for an answer, I am asking for some step-by-step direction that could be posted so other people could see the logic behind breaking down this project. I think it would be really useful (not just for me, but for anyone wanting to learn more about objects and oop).
So, much like the thread between primarily Senocular and Rampage, this would be a thread where I would be the student asking the questions in a logical step-by-step manner and someone else (or someones else) could provide guidance.
Let me know if you are interested and I can start by posting what I have already written. We can go from there and I am sure it will prove insightful to anyone who reads it. If no one is interested, or no one has the time or inclination, no problem.
Best wishes,
Jase
Who in their right mind would change from html to flash for displaying a simple website? I don't see the logic behind it, it's more like you are trying too hard. Flash has its function in the web, as well as html does. If it's just for simple displaying, using flash is just the wrong way and won't make your website any better but worse because its loading time will be too long.
Goole Search retrieved these:
HTMLWrapper
Groe.org HTMLParser
There is an article about the 1st on *drawlogic. I think the seconds' home is on sourceforge here.
Thing is, browsers already do a fine job at parsing html code. Having the flash player parse html files not only does away with any accessibility advantage your markup can offer but it also feels like reinventing the wheel. If you need to display html content, leave it to the browser.
Slightly offtopic - Flashpaper can convert most HTML pages into swf format.
Given properly "disciplined" HTML, you can use the XML parser in the player for the basic parsing. Are you really talking about writing an HTML renderer in Flash though? Or just being able to pull information from HTML dynamically?