Frågor Diplomerad Webbdesigner

F: Jag skulle vilja göra så att en bild zoomas in när man håller musen över. Behöver jag JavaScript då?
S: Nej du kan använda CSS-transitions. Läs i följande tråd på StackOverflow. Berätta gärna hur det går :)

F: Hur gör jag en meny i CSS så att den funkar på mobilen?
S: Jag gjorde två exempel som du kan utgå ifrån. Det ena sättet behöver JavaScript det andra inte.

F: Hur bäddar jag in en Youtube-film?
S: För att bädda in Youtube-filmer surfar du fram filmen på Youtube och sedan precis nedanför själva film-fönstret finns en knapp som heter Dela eller Share. Där innanför finns en Embedd-knapp. I den hittar du HTML-kod som du kopierar och klistrar in. Se till att du får med hela raden. Det funkar bara om du har ett eget webhotell eller webserver. Annars kommer du se det som en grå ruta där videon kommer hamna.

F: Hur vet jag att min HTML & CSS är rätt?
S: Det finns verktyg du kan använda för att testa din HTML & CSS. De kallas att validera den. Det finns en HTML-validator och en CSS-validator. Resultatet från ett sånthär test kan tas med en nypa salt. Vissa saker är inte viktiga att dom är rätt och andra är viktigare. Det är väldigt bra att testa lite då och då för att se så man inte gjort slarvfel (tex glömt avsluta taggar) eller glömt måsvingar i sin CSS.

F: Hur skriver jag ett eget tema till WordPress?
S: WordPress har överlag väldigt välskriven dokumentation. Börja med den om teman :)

F: Hur kommer jag igång med JavaScript?
S: Jag skulle börja med att lära mig en sorts JavaScript som kallas jQuery. Det finns en väldigt fin dokumentation som kan va värd att börja med. Kul!

F: Hur gör jag ett bildspel?
S: Du behöver använda JavaScript eller jQuery för ett bildspel. Testa gärna med Lean Slider. Exempel på hur du använde det finns på deras hemsida. De man gör är att ladda hem några filer från deras hemsida som man kopierar in i sin egen. Sedan lägger man till lite HTML, Javascript och CSS. Klart :)

F: Hur centrerar och beskär jag en bild i CSS?
S: Testa med oversize:hidden i CSS:en och läs i under svaret som fått 49 röster. Det går att göra men det finns inget jättebra sätt. För mig slutade det med att jag gjorde ett exempel där jag lägger bilden som bakgrund.

F: Hur gör man en meny i HTML?
S: Menyer gör man i listor. Det finns en fin artikel på w3schools om det :)

F: Hur gör man bakgrundsbilder som scrollar?
S: Det kallas Fixed Background Scrolling. Eller parallax scrolling. Börja med att läsa på: http://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/ Min kompis Johan använder det på sin hemsida.

F: Hur gör man för att använda olika fonter?
S: Det absolut enklaste sättet att använda fonter är att använda de som finns på datorn. Läs på w3schools om hur. Förutom det så kan man ladda in andra typsnitt via tex Google Fonts.

F: Hur centrerar man i CSS? Utan att använda <center> i HTML.
S: För att centrera i CSS behöver elementet ha en fast bredd. Jag gjorde ett centrera exempel och så kan du läsa överkursvarianten på W3.

HandBrake to encode HD video for Youtube

I’ve just defeated a problem I had with Youtube not accepting my videos encoded with Handbrake.

I usually encode videos using the High Profile preset in Handbrake but for some reason Youtube wasn’t very happy with that. It uploaded fine but after converting it it only displayed the first 30 seconds of my video. And that in fast forward speed. Not what I wanted.

By default Handbrake use the x264 encoder. If you select FFmpeg in the Video tab it works fines. I also increased the quality to QP:5 which seems to be ok for Youtube.

Making screencasts for Youtube with CamStudio

Yesterday I needed to find a simple and robust solutions for recording a screencast. It turned out to be not as easy as I thought.

To get a similar workflow as with my other video editing I wanted it to work like this:

  1. Record a 1280 x 720 section from my screen to a high quality format
  2. Open and edit the recorded file in Sony Vegas Platinum 8
  3. Render it from Vegas to a lossless format
  4. Re-render it using HandBrake
  5. Upload the file to Youtube

Record with CamStudio

I started out with the latest beta of CamStudio. It a nice, simple and easy tool that does what I need.

My first attempt was to save an AVI file with the included Microsoft Video 1 codec. The quality was pretty low so I tried to use the CamStudioCodec (from their web site). I got a nice looking AVI. However Vegas didn’t really like this file. It worked, but it was very slow.

Then I tried to use the Huffyuv codec that I had installed recently when I optimized my HDV workflow. It created a BEAUTIFUL HUGE file that I could work with in Vegas. I edited the file, normalized the audio and rendered the video almost exactly the same way as I render all my other videos (described in my HDV workflow). I just lowered the resolution from 1440 x 1080 to 1280 x 720.

Re-render and upload to Youtube

I opened the file in HandBrake and selected the High Profile. I exported the file the same way as in my normal HDV workflow. It created a good looking file. I uploaded it to Youtube. Everything went smooth. Until I looked at the video on Youtube. It came out gray. No video at all. I made a test upload to Vimeo. No problems. I tried with different codecs and settings. Both in Handbrake, Vegas and CamStudio. All came out gray on Youtube.

I tried really hard to understand why this didn’t work but I couldn’t get it to work so I resorted to Avidemux. I opened the file in Avidemux. Selected the MPEG-4 ASP (Xvid) codec for video and MP3 for audio (I increased the quality on both). I exported the file and boom. It worked fine on Youtube.

I’m not sure what went wrong. Or why. And I ended up yet another tool in my belt. But I almost reached my goal of having similar workflows so I’m pleased.