Adding an iphone icon to a DotNetNuke site - iphone

First and foremost I apologize if this question is not programmer per-se but I've been trying to get some details as to why I'm having this particular problem.
When you view this page on your phone http://www.wilsontireandservice.com/mobile.aspx I would like it when you bookmark a site to your menu it shows up as an icon. On droid phones this was fairly easy to do by just adding this link in the markup:
<link rel="icon" type="image/png" href="/Portals/71/Icon.png" />
Which is placed inside the skin.ascx file.
However, when trying to do this on an iPhone, I can't seem to get the thing to work. the Icon file is 57x57. I've tried changing the name (Icon.png, apple_touch_icon.png, apple-touch-icon.png), I tried moving the image changing the path to the root folder instead. I placed it inside an HTML module set to repeat on all pages in the header (under settings) with no luck.
We are currently running DNN 5 if it matters, what I'm wondering is there some kind of restriction on doing this within DNN or my version too out of date (we're moving to DNN 6 over the summer), or maybe this has nothing to do with DNN at all.
Thank you for any help you can provide.

This shouldn't be DNN specific. Follow this. You can try it on a blank html page to make sure DNN isn't affecting it.

Related

Joomla 3.6.4 home page does not use correct robots meta data

Whilst in development on a temporary subdomain I had robots set to No Index, No Follow in the Joomla 3.6.4 Global Configuration.
After moving the site to its permanent home I changed the settings to Index, Follow but, all the pages are fine, except the home page, which is still showing (when source is viewed) meta name="robots" content="noindex, nofollow"
I have changed the menu item to 'Index, Follow' rather than 'use global' and, when that made no difference, also did the same for the single article which is assigned to that page. Still no change. It doesn't change on the original development site version, either.
This is a template that I have used many times before: I keep a basic copy with some global tweaks that I have made and then adapt it for each new site. I can change the robots meta tags on this original template with no problem.
I have no SEF plugins. The only SEF tool is the System - SEF.
I have checked all the template files over and over and I am now about to tear my hair out.
Any suggestions gratefully received.
(p.s. can someone with a better reputation than me please add a Joomla3.6.4 forum tag?)

iPhone Stylesheet or JS

I downloaded a template and customised it a bit. It's working well but the template has a kind of mobile style sheet. When I open the webpage with the iPhone, it looks great on the homepage. However, on the most important pages I don't want it to appear for mobile I want it to appear like it would on a browser.
I've tried.
Deleting the: style-mobile.css file. - Nothing happened.
Playing around with the style-mobile.css file. - Nothing!
Deleting some js files.
I can't seem to find the code that is telling my iPhone to open the page like an iPhone instead of opening it like a browser.
Where will I find this??
The idea that you can download an arbitrary HTML/CSS/JS(?) template that is designed for mobiles and have it magically adapt to look right in a classic browser window is .... naive.
Either look for a template that is designed to look good in both contexts, or build your own layouts using something like Twitter Bootstrap which is responsive to differences in the display port size.

Live preview with LESS or SCSS?

I am trying to figure out if there is a way to use LESS or SCSS without having to save the document or refresh the browser. At the moment I use CSS Edit which is great for live previews but I cant find a way to get the live previewing to work with LESS or SCSS. My ideal situation would be to get a truely live (or as close to) setup working with Textmate and my broswer. I have looked at a few options, WebPutty is great but it's in Beta and web based so I'd love a solution that could fit into my existing workflow.
Many thanks
This might be what you're looking for: livereload.com
I only just found this myself while Googling for the same problem, Haa!
It's currently only for 64-bit Macs. Its also in beta..
Windows version under dev.
Can't seem to find a link to the v1 that is mentioned on the site?
If you're using static files you can use this code taken from http://f.cl.ly/items/0y2G351r3O3T3j1b401u/Live-LESS-previewing-in-Espresso.html
<!-- Link directly to LESS stylesheet first -->
<link rel="stylesheet/less" href="style.less" type="text/css" media="screen" />
<!-- Then link to LESS, and enable development watch mode -->
<script src="less-1.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
less.env = "development";
less.watch();
</script>
<!-- VoilĂ ! Instant LESS previews in Espresso -->
However, if you are using localhost, I've not figured out how to get this to work yet.
Check out EDGE. http://getedge.io - it let's you live edit Sass and LESS files from Sublime Text or Textmate. No need to save the file - it updates as you type. You can sign up for the private beta right now.
There is no complete solution for what you are looking.
Chrome dev tools (with sass source maps enabled) is your best bet but I don't think you can do mixins
http://livestyle.emmet.io/ is another option you might want to try
Brackets works well with live changes but applies only for chrome
Here's what I do and it serves the purpose and works like a charm in mac/pc and linux
Have one terminal open that does sass --watch
Have another terminal/app that lets you run live-reload
Your sass will compile and as soon as your stylesheet changes all your browsers get refreshed
But you can't do style injection with this, meaning the page WILL refresh (if you want to theme dialogs, you will have to open them again) But there are other tools available for style injection as well
Hope this helps!
live.js is your solution :)
It doesn't not only work with html, js, css but also less.
You have to trick it with filetype of css:
<link rel="stylesheet/less" type="text/css" href="stylesheets/main.less.css">
Tried the bookmark version on rails local server. Works a breeze!
CssRefresh
My co-worker and I whipped up http://less2css.org the other day. Allows you to choose the version and see your less converted in realtime.
Hope it helps someone.
I think there is no such add-on right now, but I'm also a fan of Live CSS Editor (if that's what you meant by CSS Edit).
I think it would be useful to have something similar with SASS or LESS support, so I made a quick prototype for such Chrome add-on (analogue to Live CSS Editor). It includes syntax highlighting and LESS support with use of client-side LESS library. It's not user-friendly yet so not a candidate to the Chrome Store, but here is it's Google Code Project where it can be downloaded and loaded into Chrome as unpacked extension. I'll try to improve it over time, but anyone else can try too ;)
Screenshots and a bit more are in this blog post.

How to build web clips like http://brdrck.me/settings/

I am very interested in building an app like http://brdrck.me/settings/. My first questions are what is inside a web clip file? Is it a html or something else? The second question is how to add the icon to home screens programmatically. As you can see from the page I mentioned above http://brdrck.me/settings/. I tried to check its source code from browser but it turns out to be some normal CSS and javascript code in my Chrome browser and I don't know how to check the source in my Mobile Safari. Any one help?
You won't be able to get any valuable code from the source. Trust me. :D
But, I can help you out.
I use two different methods: The "Add to Homescreen" and .mobileconfig files (the one you have to install)
For adding to the homescreen check out this resource. With the help of some creative work-arounds, it isn't too difficult.
http://mobile.tutsplus.com/tutorials/iphone/iphone-web-app-meta-tags/
The mobileconfig file is a bit more difficult, esp trying to get it signed, but this might help you a bit. Try to create one with a webclip then view the generated files source: http://support.apple.com/kb/DL1465
Hope this helps.

What widget kit / framework is Woopra using?

If you use Woopra, you probably know that several months ago they released a web based analysis tool. I was surprised by how smooth and well designed it was. Taking a look at the source code, it seemed to be coded using GWT. However, its Mac look and feel reminds me of Sproutcore. I'm not aware of a look and feel like it for GWT.
I'm really interested on their widget kit, so I started to look for newcomers in this area, without success.
It's hard for me to believe that they custom coded it completely, as it uses many different widgets, charts and effects and it could be, by itself, a huge undertaking.
Do you know if they are using a custom widget kit / framework and, if so, its name?
Thanks in advance,
Juan
Hey guys, I'm not using any library beside jQuery. The Woopra web application has been built from scratch from the ground up.
I hope this answers your question.
Elie.
woopra.com
If you view the page source through your browser and find a reference to one of the follow files:
a long md5sum for the name and ends in .cache.js or .cache.html
some name that ends with nocache.js or nocache.html
If it has either, you know the site is written using GWT. For example, when looking at the Wave source it references:
<script type="text/javascript" src="/wave/static/1880D9859FBFB1895A16B35680031427.cache.js">
While the web version of Evernote pulls in:
<script type="text/javascript" src='/com.evernote.ENWeb/com.evernote.ENWeb.nocache.js?97654'></script>
Of course, it's possible to rename these files so just because they're missing, doesn't mean it's not written in GWT. Nevertheless, without these files it's a pretty good bet that they're not using GWT.