Ask MetaFilter questions tagged with html

Help me learn old school web design

anotherpanacea — Sat, 11 May 2013 11:11:40 -0800

I have recently taken charge of an old webpage that is a bit out of date on a university server. I am primarily familiar with Google Sites and Wordpress, where there's a CMS editor, but here it's just an ftp site with raw index files that require Spry to run. What do I need to edit it? Would it be relatively easy to create a redirect to a site that I control running a CMS I understand? How do I keep that from ruining all the old backlinks?

No italics in Dolphin browser (android)

mudpuppie — Mon, 22 Apr 2013 13:19:38 -0800

I use Dolphin as my default browser on my Samsung Galaxy S3. I've just noticed that italics don't show up in Dolphin. (Screenshot.) They do show up in the stock browser. (Screenshot.) I can't find a setting anywhere that indicates why the <em> tag isn't showing. Help? Here's the about screen for my phone, and for Dolphin, if those are helpful.

HTML to PDF

Quisp Lover — Sun, 21 Apr 2013 09:18:20 -0800

Help me turn a photo essay, currently in HTML, into a PDF (without big ugly white space when photos break to the following page). This is very simple: a series of center-aligned photos (not enlargeable) interspersed with bits of center-aligned text, sort of like a film strip. It's long...probably will be a 20 page PDF.

I want to convert to PDF as painlessly and cheaply as possible. When I create a PDF via Safari, it's got lots of white space, where a given photo won't cram into the page.

What's my best bet here? I am on a Mac. And I'm willing to jigger the photo sizes if necessary.

Tell me I don't need to buy Acrobat....

Rise from your grave!

griphus — Mon, 15 Apr 2013 12:11:02 -0800

I have webspace and a domain which is currently hosting a Wordpress blog -- an instance of WP running on the server, not a redirect -- on it that I haven't updated in a year. I want to use the domain to showcase my projects, past and present, and one of these projects is the current main blog. So I have a few logistics questions below the fold. 1) What is the best/least-break-y way to keep that blog alive but off the main page. What do I need to make sure to update (i.e. Google Analytics links, etc.)? What should I expect to break? Should I put it in a subdomain?

2) I tend to just use Tumblr for my projects, so I don't really need to host anything else except a splash page with links. What is the best way to make that "showcase" page? I haven't touched HTML since before CSS was a thing, so the only thing that hand-coding it will assure is that it is ugly and not up to any sort of spec.

The admin of the server is a friend (it's his own webhosting company), but I don't like to bug him, so I just want to come to him with everything at once.

The website is in my profile if you need to take a look at it for any reason.

New Tumblr music player code?

BlackLeotardFront — Thu, 11 Apr 2013 12:19:18 -0800

Tumblr recently switched out their flash-based music player with a new, more mobile-friendly one. That's good, except the new one is devastatingly ugly and has totally different proportions. I'm not even sure it's displaying correctly - the arrow is off-center, the text looks wonky. I have been trying in vain to find ways of fiddling with its attributes, but the ones exposed are very limited. Has anyone else noticed this problem with the look, and has anyone had any success in customizing it? Note: I don't plan to switch to another player because I have scores of tracks on tumblr's servers. I know I should move to my own backend and CMS, but until I have time to do that, I'd just like to be able to fix the way it looks.

Reading to complete before a technical interview (CSS, JS, HTML)?

jsturgill — Fri, 22 Mar 2013 14:15:56 -0800

I'm scheduled for a technical interview after the weekend for a front-end development position. I'd like to spend some intensive time beforehand reading relevant blogs and books to prime the ol' noodle and supplement my existing knowledge. Could you recommend some resources? Are there questions you would ask an applicant in this situation, or that you have been asked? The interview will, in particular, cover "HTML, CSS, JavaScript, and jQuery." The company in question runs on WordPress, so items at the intersection of any and all of those technologies might be particularly helpful. Code will be discussed and produced as part of it.

Recommendations for a simple Web contact form?

steinsaltz — Mon, 18 Mar 2013 09:48:16 -0800

Someone with a simple .HTML/.PHP page and no content management system needs me to put up a "Contact Us" form. In the old days there were a lot of PHP scripts to do this, but I can't tell if any of them are still reliable and secure. Are there any recommendations for one? I'm familiar with all the great ones for Wordpress (Gravity Forms, Contact Form 7) but unfortunately can't use those because this site has no database. Any help much appreciated.

user-scalable=wrong

benzenedream — Wed, 13 Mar 2013 21:21:24 -0800

On Android, is there a way in any of the available browsers to turn off honoring <meta name = "viewport" content = "initial-scale = x.x, user-scalable = no">? I'm sick of designers that don't want me to zoom in on their preciously designed mobile site.

Why does daringfireball show a "white flash" between pages?

mark7570 — Wed, 13 Mar 2013 14:19:25 -0800

I've noticed that when I click around the popular Daring Fireball site, there's a brief whitescreen flash in between pages... i.e., the entire browser window turns white for just a moment before the next page loads. Anyone know why? Strangely enough, it only happens if I move the mouse after clicking the link; if I leave the mouse still, there's no white flash. This happens in Safari and Chrome.

I ask because I'm developing a site that is displaying the same behavior, and I'm wondering if anyone knows a fix. Most sites don't have this problem, but Daring Fireball and a couple of others do.

How to replace non-ascii characters with HTML entities?

the latin mouse — Wed, 27 Feb 2013 08:32:30 -0800

I’m currently working on an international project and need to format documents written in German, Polish and Croatian for use on the web. What is the quickest way to convert all the non-ASCII characters into the relevant character entity? Some sort of web form would be my ideal solution, but I’d settle for a freeware program.

How to create a simple review/rating website?

vidur — Tue, 19 Feb 2013 19:59:10 -0800

I want to create an intra-company website for my co-workers to rate/review widgets. It will not be a commercial venture. Is there is a free or free-ish way to do this? I intend to do this as a fun side project. In my mind, it is something similar to "rate my professors", but pre-populated with widgets/criteria to rate. Users will not have the ability to add widgets. They will only be able to search for an existing widget by name, and then rate it along 2-4 criteria. Nothing too complicated. I have some techie skills, but nothing advanced. Is it possible to do this easily/cheaply?

Open Facebook share links to iOS app from email?

mgriffioen — Mon, 18 Feb 2013 11:07:29 -0800

Work has had me start building responsive html emails to send to our member list with Facebook share links inside. I know you can open links to iOS native apps from emails and websites within the iOS environment, but is it possible to have those "share to your wall" links work correctly? I've googled around a bit, but not having any luck finding a clear answer.

What are the cutting edge data visualization tools out there right now?

Rodrigo Lamaitre — Sat, 16 Feb 2013 11:42:23 -0800

I am handy with HTML, CSS and a little Javascript. I also have a lot of experience with Wordpress theme development. What is the best path for me to become an ace data visualizer on the web? When I was in university, I got really familiar with building Wordpress sites, HTML, CSS and Javascript. I haven't really kept up with programming for a number of years but historically found myself fairly comfortable with new languages.

I've since become an economist, and part of what I am trying to do is develop a more flexible toolkit for presenting data and text. I like the infographic style and would love to be able to produce articles on the web using that format with relative ease. Ideally, I'd love to build this into existing Wordpress blogs too, but that's not necessarily something I'm married to.

What tools should I be using? Generally, I will be developing my data using Excel or SPSS, so something that is relatively easy to import data and produce stunning charts would be great. On my "god I wish it existed" list would be a tool that would be able to replicate bar charts with importable images - so, instead of a bar that goes to 100, I would love something that would stack, say, a car for every 10 in the dataset (so 10 cars for 100.)

What tools do you think I should be using? I am assuming some scripting will be necessary and I am comfortable with that, but the more out of the box, the better. I have never been good at graphic design so the less of that, the better, unless there's a great guide to get me up to speed.

Website updates without RSS

gagoumot — Wed, 13 Feb 2013 08:16:33 -0800

How do I monitor changes to a website when the results vary based upon a selection from a drop-down menu? How can I find where they are pulling from? I would like to track when the USDA updates a list of documents on this webpage, specifically for the Livestock Subcommittee.

On other pages where they don't provide automatic updates, I use the amazingly useful Firefox add-on Update Scanner. However, this page changes based upon what subcommittee I select from the drop-down menu, so I don't think Update Scanner will work.

Is there a way to set something up? Is there a way to "call" whatever database they are using for each record?

If there is a solution, I would also appreciate hearing how you arrived to it, as this is a quite common occurrence on USDA webpages.

Images not showing in site using Google Drive

perhapses — Sat, 09 Feb 2013 09:22:35 -0800

I uploaded a folder containing a basic website to Google Drive and shared it publicly. Everything works except the images and I haven't been able to figure out why. I find this Google explanation a bit confusing. I thought it was saying that I needed to change all the image source links to the full Google Drive URL instead of being relative links, like everything currently is. That didn't work. All the other links work fine. I'm not sure why the images don't. Here's the site. What does Google mean by using the webViewLink?

HMTL tables

fucker — Sun, 27 Jan 2013 14:14:37 -0800

I'd like to make attractive html tables (and various kinds of graphs, charts, etc) for a wordpress blog, but I don't think like a programmer. Is there a program where I can manipulate the design elements like pictures instead of code? And then plug the information into the table cells and grab the code when it all looks like what I want?

How to divide a div into two triangles with Javascript?

eustacescrubb — Tue, 08 Jan 2013 08:40:41 -0800

Javascript question: I have a rectangular div. Imagine that div is divided from one corner to the other to make two right triangles. I would like to, on hover, have Javascript tell me which triangle my mouse is over. But my trigonometry powers are failing me, and Google is coming up short. Hope me, admin!

(Simple, Clean, Modern) Open Source Web Design Template?

tomwheeler — Sun, 09 Dec 2012 21:49:12 -0800

I occasionally contribute tutorials to open source projects and I'm looking for a standard Web page template I can use for these. Although I know HTML/CSS and could write one from scratch, I'd rather spend that time writing more (or better) documentation for the projects. Do you know of any simple, nice looking, open source templates I could use? The ideal template would be:

Free: no cost and either is in the public domain or has a very liberal license like Apache. Requiring attribution is OK, but it's better if it can be in the page source instead of visible to the end user (my name doesn't go on the tutorial either)

Modern: works 100% in all browsers common today and gracefully degrades for older ones

Simple: Doesn't use gratuitous Javascript or define a zillion CSS classes. Ideally, the CSS would be small enough to include directly in the page's <head> element so there's just one file.

Attractive: Github's Wiki markup wins here, but fails at simplicity

If there's support for code syntax highlighting (especially Java, UNIX Shell, Python and R), that would be a big plus.

Selectively show Tumblr captions?

hegemone — Thu, 06 Dec 2012 13:00:38 -0800

Tumblr-filtr: is there any way to make some of my captions show up on the main page, and others just appear on the permalink page? So, I have one of those 4-column themes which I'd like to be mostly just images. And my default setting is for captions to appear in the permalink pages only, but I'd like to have the option of being able to selectively showing captions on the front page. Is this not actually possible? Like, is it all or nothing with captions on index or permalink pages? I've been googling for an inappropriate amount of time to try to figure this out, but it seems like no one else is even asking this question.

This is the (I think, been a while since I messed with HTML/CSS) the relevant portion of code in the theme:

{block:Photo}
{block:IndexPage}
<img class="photoPost" src="{PhotoURL-250}" width="180"/>
{/block:IndexPage}
{block:PermalinkPage}
<a href="{Permalink}">
<img class="photo" src="{PhotoURL-500}" />
</a>
{block:Caption}
<div class="caption">{Caption}
{/block:Caption}
{/block:PermalinkPage}
{/block:Photo}

Responsive Email Template Resources?

mgriffioen — Fri, 30 Nov 2012 19:21:14 -0800

Know of a good resource for mobile-friendly responsive email templates for html emails? I've been tasked with converting the (mostly) table-based html emails I've been developing to more mobile-friendly, responsive layouts. Any resources for templates and tutorials are greatly appreciated!

What next for web design?

mean cheez — Thu, 29 Nov 2012 08:12:12 -0800

How best can I get on a good track to grow and learn as a web designer? I've been using Codecademy, but I'd like to branch out. Over the past few years I've tried my hand at web design a few times, only ever using HTML, CSS, and the most basic jQuery. Each time I've really enjoyed it. I love looking at raw code in Notepad++ and trying to figure out why it works. But inevitably I'll finish a project or hit a wall and drop out of it for a while.

I started powering through the lessons on Codecademy last week and it's been great to get back into it. But I'll run out of material pretty soon, and I'd love to hear how others have learned.

What other languages should I try and study? I think my long-term goal is to learn how to design a beautiful, functional front-end, and then build a bare-bones CMS to easily maintain and update a personal blog. I know I could do this with a blogging tool, but I'd much rather learn how to build it myself, even if it is a huge time commitment.

Any tips for other resources, personal stories about learning web development, and ideas for simple projects to practice would be awesome. Thanks for reading!

Turning user input into pie (charts)

antonymous — Tue, 27 Nov 2012 08:59:21 -0800

WordPressFilter: I'm looking for a plugin/widget/codesnippet that will allow me to create a graph using input from the user. This seems really simple and I don't want to reinvent the wheel, but my Google-fu is taking the day off. Basically, I want the user to put numbers into one or more fields, then we apply our mathemagic formula to those numbers, then we give them a graph with the results. I tried looking along the lines of mortgage calculators, but no dice there either.

I'd prefer to find a plugin for WordPress that will handle this, but I'm also amenable (to a lesser degree) to hacking together some solution in HTML5/js if that's a viable alternative. Gentle nudges in the right direction there would be helpful too, as my skills have atrophied a wee bit...

Where to start with modern web UI development?

jferg — Mon, 12 Nov 2012 12:39:28 -0800

Help me get my Web 2.x (or are we on 3.x now? I've lost track) on. I'm an old-school Web 1.0 developer who wants to kickstart himself into slightly more modern UI and user experience paradigms, and I have a project in mind (of course). The challenge? No expensive tools. Some background:

Me: I've been doing web stuff since the web came around; I was hand-coding HTML in vi in the mid-90s. I've done a lot of work in perl and Java (including newer frameworks like struts, spring, etc.). I know enough JavaScript to be dangerous, and can usually bash CSS1 into submission. I eat XML for breakfast. I speak SQL and unix fluently. I've done PHP, python, C/C++, and a little of a lot of other things. I can design APIs and databases all day long. In recent history, though, I've spent most of my time in the application security world, so haven't had the opportunity to keep my front-side development skills where I'd like them to be. HTML5 and CSS2 are stuck floating around with IPv6 in my mind, as technologies that exist but nobody really uses. But I know that's not true. I'm conceptually familiar with AJAX and friends, but have only broken AJAXy sites, not implemented my own. Flash is neat, but has always been on the back burner because I don't have tools. (And isn't really what I want for this project, since it doesn't work on iOS.)

Project: I have an idea for a site I'd like to put together, nothing extraordinarily complex - probably a database-driven backend, and, since it's going to be aimed at kids (and their parents), a shiny, shiny front-end. I find that 75% of kid-focused sites out there look like (and usually are) crap that looks like it was written in FrontPage 98. I don't want to be part of that 75%. I'd like to have iOS and Android components, but those would be mostly later parts of the project, the first, initial part would be browser-based. (I want to build this site for my kids first, and later for others.)

Constraints: As I mentioned above - no expensive tools. I can't afford a copy of Flash right now, or a Mac to do iOS native development. I have a laptop I can run Eclipse and friends on. An ideal solution would be something where I could do the bulk of the development remotely, without installing things on a desktop besides PuTTY and Chrome, but I realize that may be too much to hope for. I have a DreamHost account with Apache/PHP/et al, but can spend a few dollars for different hosting if there's something more "modern" that's worthwhile.

It seems like HTML5 is probably the right answer here, but how? There have to be tools for building nice HTML5 interfaces out there - surely they're not all built from scratch? What am I missing? What's the new hotness? Is there a technology for this kind of thing that hasn't crossed my sight yet? Where do I get started building a Web 2.0 UI? Any suggestions of any variety are welcome.

Best practices for editing RTL languages for the Web?

bricoleur — Tue, 30 Oct 2012 09:29:54 -0800

What tools do you use to edit Persian for the Web, preferably, but not necessarily, on a Mac? I need to be able to take a Word doc in Persian and accurately convert it to UTF-8 HTML. (I'd prefer to do this without retaining all the bloated MS Word markup, but am willing to compromise on that.)

I also need to be able to edit that HTML later, and it's this second task that's driving me bonkers. I'm using BBEdit, and when I try to select a piece of text in the HTML, my cursor behaves in a completely (to me) unpredictable way. I click here, the cursor shows up over there. I try to use the shift key with the arrow keys to select text, and the selection shrinks or grows in directions and increments that baffle me. (WYSIWYG editors are, unsurprisingly, far worse.) As a corollary, the order of the characters as I see it in the markup is often not the same as when it's seen in the browser.

Complicating circumstances: These texts often include snippets of English (ltr), and I do not speak or read Persian (possibly not really relevant but I thought I should mention it so you could tailor your response to my level of ~~knowledge~~ ignorance).

Halp?

Free HTML hosting site

vidarling — Thu, 11 Oct 2012 09:05:59 -0800

Can someone please direct me to a free HTML hosting site? Webs.com no longer lets you host sites that we have created in HTML using Notepad. The simpler the better and the fact that we are working with 11 and 12 year old students would also be a deciding factor on what one we would/could use.