Why is adding HTML code so difficult?

Question

Level 1

0 points

Why is adding HTML code so difficult?

I'm trying to add a weather widget into my book. Yes, I've been spending a lot of time looking into dashcode and creating the widget from scratch, but I can't get it done. Even though I got Xcode and dashcode installed, I'm not that technically inclined and can't figure out how to take this snippet:

and make it into a widget that I can just drag and drop into the book's HTML widget window. Is there an easier way to do this? Otherwise, unfortunately, I don't think I'll be able to use some of these key features.

Posted on Jan 22, 2012 10:51 AM

Reply

Answer 1

Best reply

gordingin

Level 1

10 points

Jan 22, 2012 12:47 PM in response to fazworld

Well for one, you are trying to load flash content so that won't work but it looks like you can't access external data from the iBooks

Reply

Answer 2

fazworld Author

Level 1

0 points

Jan 22, 2012 3:44 PM in response to gordingin

Ok, thanks for the information.

Reply

Answer 3

Eunite

Level 1

0 points

Jan 22, 2012 3:54 PM in response to fazworld

The easiest way to do this is to rewrite (or copy) this widget into Dashcode. After that you can deploy it as a whole into a widget. The widget can be added to your iBook.

Reply

Answer 4

fazworld Author

Level 1

0 points

Jan 22, 2012 4:00 PM in response to Eunite

That's exactly what I tried to do, but I don't think I know enough of Dashcode to do that. Is there an easy way to copy and paste that script and then export that as a widget file to put into iBooks? I can take it from there if someone can show me how to do that... I'm not that inept (I setup a Joomla website for my business) and I've been trying different things, going through the tutorial and all that, but I'm just not savvy enough as a developer to do the code.

Reply

Answer 5

Eunite

Level 1

0 points

Jan 22, 2012 4:19 PM in response to fazworld

Seeing that your code is in <script tags>, you could try pasting it in the <body> of the index.html file, right after opening a new custom safari widget. The standard code view shows the main.js file, click on the double arrows next to the indicator to switch to the index.html file:

After that you can simply deploy your widget to your disk (Make sure you don't deploy it to the dashboard).

EDIT: Make a custom mobile Safari widget

EDIT2: Apple mobile hardware does not run flash. So I guess you're out of luck with this piece of code. I deployed the code you showed to try it out myself, and while it gives no errors, it only shows the text "Columbo Weather" with a link to the site.

Reply

Answer 6

fazworld Author

Level 1

0 points

Jan 22, 2012 4:29 PM in response to Eunite

Got it, that worked, thanks! But it's not a widget, so is there a way to export that to a widget so that it can be dragged and dropped into the HTML widget?

But now I think I'm running into the problem that everyone else is running to - even if I get the widget created and imported into iBooks, I don't think it (the html weather widget) will dynamically update. But anyway, if you can tell me how to turn that into a widget at least I'll know in the future if Apple does update the software to allow this.

Thanks!

Reply

Answer 7

Eunite

Level 1

0 points

Jan 22, 2012 4:38 PM in response to fazworld

I just noticed I made a mistake, as it's not possible to load safari applications into iBooks. You'd have to go through the process again, but making it a dashboard widget this time. I tried this for you, and this is where the flash files are going to give you an error. Again, running flash files on iDevices is not going to work. For your own future reference, I will explain the process of deploying your widget below:

When your widget is done you can choose to deploy it and put it in your iBook. On the left-hand side, there is a list containing the following items: Widget attributes, Default Image, Widget Icon and Run & Share. Click the last option (Run & Share). Give your widget a name and click "Save to disk". You can now drag the widget into your iBook/iBook Author application.

Reply

Answer 8

fazworld Author

Level 1

0 points

Jan 22, 2012 4:54 PM in response to Eunite

Almost there.. but when I save to disk it only gives me a folder with subdirectories (images, mobile, Parts, safari) and index.html. No widget.. ?

Reply

Answer 9

Eunite

Level 1

0 points

Jan 22, 2012 5:27 PM in response to fazworld

That is because you are creating a safari widget instead of a dashboard widget. Go to file -> new project. Select Dashboard and then click custom. After that follow the steps again and it will deploy as a widget.

Reply

Answer 10

fazworld Author

Level 1

0 points

Jan 22, 2012 5:31 PM in response to Eunite

Excellent! Thanks so much, that worked. I now have a clear understanding on how to create a widget to imebed into my ibook. Thanks again!

Reply

Answer 11

Jan 23, 2012 4:12 AM in response to fazworld

Has anyone been able to get a html widget to get external data? Looks like Apple, once again, locked us down. Make me wonder why we continue with this devices sometime.

Reply

Answer 12

frato

Level 1

30 points

Jan 24, 2012 1:13 AM in response to fazworld

You don't have to use Dashcode at all to create html widgets for iBooks. You only need three things :

- A screenshot of your widget, named "Default.png", used by iBooks for the widget preview

- An Info.plist with informations about your widget (name, size, author, ...). See this one for example

- And you need to put all your files (html, javascript, images, ...) in a folder. The name of the folder must be the same as the name you defined in the "CFBundleName" entry in your Info.plist

Then, you just have to add the ".wdgt" extension to your folder name, and it will have the "widget icon" (see example). You can then drop it in your iBook

Reply

Answer 13

Jan 24, 2012 3:07 AM in response to frato

Thank you frato for your information!

Reply

Answer 14

pordux

Level 1

0 points

Jan 24, 2012 12:48 PM in response to fazworld

After testing a quite big website i made in html5 with tons of jQuery, css3, jPlay, images and sounds, and compressiong everything together into a widget following your instructions....

EVERYTHING WORKED LIKE A CHARM!!!....

just remember to embed jquery and all the js files, and also delete .ico .gif and .swf formats,,,,

using 100% of embed jQuery is huge..... and the posibilities are very interestin... (at least for me... :-) )

Reply

Answer 15

imshapp

Level 1

0 points

Jan 26, 2012 7:00 AM in response to pordux

pordux,

Have you had any trouble with video in the HTML widget? You mentioned audio - just wondering if you have been successful with video as we're trying to create a videoPlayer with related video thumbnails (similar to YouTube) but the HTML widget won't accept our wdgt when it includes either .m4v or .mp4 video. We've exported the videos per Apple's recommendations with not luck in the HTML widget - but the same videos work just fine when dropped onto the canvas as a media element.

Reply