SlideShare ist ein Scribd-Unternehmen logo
1 von 40
Geek basics
Knight Digital Media
Center
Web Geek Basics
Scot Hacker
Ajax   •Asynchronous Javascript and XML
       •AKA “Javascript finally works”
       •No full-page refresh, URL doesn’t change
       •More like desktop apps
       •Async database updates
Bounce Rate
 •From stats/analysis
 •User hits one page and leaves
 •You want to reduce bounce
Cache
 •Data stored locally for performance
 •Client (browser) stores copy of page
 •Server stores precompiled Java/PHP/Python, etc.
Cascading Style Sheets
 •Syntax for controlling appearance of pages
 •(HTML is for logical structure, CSS for looks)
 •Decoupled from HTML
 •Targets either official HTML tags or custom elements
 •Ideally site-wide
Client-side / Server-side
  •Servers provide services
  •Outlook/Mail.app are clients of your mail server
  •Firefox/Safari/Chrome are clients of a web server
  •PHP/ASP / Django / Rails are server-side
  •Javascript/Flash are client-side
Content Management
System
  •aka CMS: Database-backed publishing system
    •Creates pages “on the fly”
    •Site workflow, consistency, automation
    •WordPress, Drupal, Sitepoint, Ektron, dotCMS...
    •More than 600 on the market
    •Free <--> $$$ ... often proprietary
DNS
 •Domain Name System
 •Translates IP addresses to human-readable domain names
 •A critical backbone
 •A "nameserver" runs DNS software
Domain
 •example.com
 •Top level domains: .com, .net, .org, .edu, .gov
 •Subdomains: www.example.com, projects.example.com
 •Create/manage at a “registrar” like GoDaddy or Moniker
Embed/IFRAME
 •Code running on remote site embedded in yours
 •HTML and/or Javascript
 •Google Maps/Charts, Vimeo videos, widgets
 •Copy into HTML mode in your CMS (permissions)
File Formats - Audio
 •Audio alone not great on the web (except podcasts)
 •MP3 - Most common compression format - 1/10th size
 •128kbps+ for music, 64kbps for spoken word
 •Compressed MOV also acceptable
 •AIFF and WAV - Raw, uncompressed
File Formats - Image
    •TIFF, RAW - Uncompressed, large files, high-quality
    •PSD - Photoshop native, with layers, masks, editable text
    •JPG - Best for web photography. Full color, lossy compression
{   •GIF - Smallest files for line art (256 color, transparency)
    •PNG - Full color, lossless compression, transparency, OSS
File Formats - Video
  •MOV (QuickTime), WMV (Windows Media)
  •Also MP4, M4V
  •Can be compressed or uncompressed
  •Aim for 4MBs/minute in compression
  •Even compressed, files and bandwidth bills are big
  •Recommend embedding w/ Vimeo or YouTube
File Formats - Web
 •Only these can be in web folders:
 •Documents: HTML, CSS, JS, PHP, ASP maybe PDF
 •Audio: MP3, MOV, M4V, MP4, WMV (compressed)
 •Video: MOV, FLV (compressed)
 •Images: JPG, GIF, PNG (compressed)
 •Orphans = unused = clutter
Fluid vs. Fixed Layout
  •Resize browser window to test
  •Fluid works on more devices, but gives less control
  •Fixed more common by far (mastheads)
  •Recommended width for fixed: 960px (i.e. 1024 screen)
Fold (below the)
  •Analogy to newspapers
  •Content out of sight before user starts vertical scrolling
  •Used to be considered worthless; not anymore
Font family
 •You can only use fonts installed on all/most computers
 •These tend to be grouped by similarity
 •font:12px verdana,arial,helvetica,sans-serif;
 •Situation changing fast!
 •TypeKit, Google Fonts
FTP
 •File Transfer Protocol ( http:// nntp:// email:// ftp:// )
 •Internet’s oldest protocol
 •Move files between any two computers on net
FTP
 •File Transfer Protocol ( http:// nntp:// email:// ftp:// )
 •Internet’s oldest protocol
 •Move files between any two computers on net
Hash tag (Twitter)
 •Instant saved search - gathers conversation on same topic
 •Popular for breaking news, conferences
 •User can click to see aggregated tweets
Hexadecimal
 •Six-character representation of a color
 •16.7 million possible color values
 •Use in Photoshop, Flash, Dreamweaver, HTML, CSS...
 •Match image colors to web colors, build palettes
HTML5
 •Latest standard, not an animation tool!
 •New semantic tags (article, section, header, footer, aside)
 •New video handling
 •Offline storage / browser database
 •Geolocation
 •Canvas
Metadata
 •Data about your data
 •Like card catalog at library
 •MP3 tags
 •EXIF data in photos
 •HTML meta tags - content not shown in browser
Open source
 •Software created collaboratively, often without pay
 •Firefox, Apache, Linux, WordPress, Drupal
 •The best matches quality of best commercial software
 •You’re free to modify or scrutinize
Permalink
 •URL representing a permanent story page
 •Story may disappear from home or beat pages
 •Often includes a date, story keywords
Plugins

 •Software that extends other software
 •Spam control
 •Email comments
 •Contact form
 •Override roles
 •Conduct polls
 •Integrate Twitter/Flickr etc.
 •Photo galleries
 •Events systems
Responsive Design
 •We now have to cater to smartphones and giant monitors
 •Rather than serve multiple site versions, respond dynamically
 •bostonglobe.com is a great example
RSS
 •Really Simple Syndication
 •A “pull” format that feels like “push”
 •Lets users digest or discover your content w/o browser
 •Lets other sites integrate your linked headlines
 •Generated automatically by most CMSs
 •Internally: XML
 •Atom format is similar
RSS
Semantic Web
 •Page elements tagged in a meaningful way
 •Machines reading page source code can understand context
 •HTML5 helps by providing new <article> and <footer> tags
 •Microformats
 •Formats like RSS, Atom, XML, JSON
 •Build with clean code to encourage the semantic web
Server
 •Can mean either a physical machine or software
 •Usually a “pancake” w/very fast drives, high-rated RAM
 •Servers live in data centers with high redundancy
 •“Web server” can also mean software like Apache
 •Don’t confuse “web host” (company) with “server”
Tag (HTML)
 •A “container” that wraps text in a document
 •Can take “attributes” (some required)
 •All tags must be closed
 •All lowercase
 •Proper nesting
Tag (Taxonomy)
 •Similar to Categories or Beats, but less formal
 •Site may have a dozen categories but hundreds of tags
 •Sometimes used for User Generated Content
URL
   •Uniform Resource Locator (aka URI)
   •Every tiny piece of content has a unique address
   •Sometimes physical, sometimes virtual
   •Make them readable!
   •Include keywords for SEO


http://kdmc.berkeley.edu/blog/2010/feb/22/webcasts/

  protocol://subdomain.domain.tld/path/to/resource

http://news.cnet.com/2300-17938_105-10002703-4.html?
          s=0&o=10002703&tag=mncol;thum
Usability
 Usability is the study of the ease with which people can employ
            a tool in order to achieve a particular goal



•User testing: How long to achieve a task?
•Small focus groups - 5 users
•Eliminate confusion points
•If a site is hard to use, people leave
•Homepage should clearly state purpose
•Ask people to do simple tasks, record them
Usability (cont.)
 Usability is the study of the ease with which people can employ
            a tool in order to achieve a particular goal



•If they can’t find the it, they can’t USE it
•Search needs to rock
•Write for the web (short, scannable)
•Anticipate and answer user questions
•Jakob Neilsen: useit.com
•Usability 101 & Top 10 Web Design Mistakes
UI/UX   •User Interface/Experience
        •You can’t design an experience
        •You CAN design FOR an experience
Validation/Web Standards
 •Standards matter (w3.org)
 •The key to fixing what’s broken
 •Structural perfection
 •Google is blind
 •Important for SEO
 •validator.w3.org

Weitere ähnliche Inhalte

Was ist angesagt?

StoryCode Tech Immersion 1
StoryCode Tech Immersion 1StoryCode Tech Immersion 1
StoryCode Tech Immersion 1storycode
 
Xhtml and html5 basics
Xhtml and html5 basicsXhtml and html5 basics
Xhtml and html5 basicsmessinam
 
Expert guide for PHP
Expert guide for PHPExpert guide for PHP
Expert guide for PHPSteve Fort
 
Web development using html and wordpress
Web development using html and wordpressWeb development using html and wordpress
Web development using html and wordpressDakshata Gavand
 
My Site is slow - Drupal Camp London 2013
My Site is slow - Drupal Camp London 2013My Site is slow - Drupal Camp London 2013
My Site is slow - Drupal Camp London 2013hernanibf
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first courseVlad Posea
 
The Characteristics of a Successful SPA
The Characteristics of a Successful SPAThe Characteristics of a Successful SPA
The Characteristics of a Successful SPAGil Fink
 
WordPress & Other Content Management Systems
WordPress & Other Content Management SystemsWordPress & Other Content Management Systems
WordPress & Other Content Management SystemsEmily Lewis
 
Building rich interface components with SharePoint
Building rich interface components with SharePointBuilding rich interface components with SharePoint
Building rich interface components with SharePointLouis-Philippe Lavoie
 
Web programming and services
Web programming and servicesWeb programming and services
Web programming and serviceslaibamaqsood
 
From WordPress With Love
From WordPress With LoveFrom WordPress With Love
From WordPress With LoveUp2 Technology
 
High performance website
High performance websiteHigh performance website
High performance websiteChamnap Chhorn
 
Advanced Wordpress
Advanced WordpressAdvanced Wordpress
Advanced Wordpresslexinamer
 
Web technology P B Jadhav
Web technology  P B JadhavWeb technology  P B Jadhav
Web technology P B JadhavPRASHANT JADHAV
 
Drupal architectures for flexible content - Drupalcon Barcelona
Drupal architectures for flexible content - Drupalcon BarcelonaDrupal architectures for flexible content - Drupalcon Barcelona
Drupal architectures for flexible content - Drupalcon Barcelonahernanibf
 
On Again; Off Again - Benjamin Young - ebookcraft 2017
On Again; Off Again - Benjamin Young - ebookcraft 2017On Again; Off Again - Benjamin Young - ebookcraft 2017
On Again; Off Again - Benjamin Young - ebookcraft 2017BookNet Canada
 
Static and Dynamic webpage
Static and Dynamic webpageStatic and Dynamic webpage
Static and Dynamic webpageAishwarya Pallai
 

Was ist angesagt? (20)

StoryCode Tech Immersion 1
StoryCode Tech Immersion 1StoryCode Tech Immersion 1
StoryCode Tech Immersion 1
 
Xhtml and html5 basics
Xhtml and html5 basicsXhtml and html5 basics
Xhtml and html5 basics
 
Expert guide for PHP
Expert guide for PHPExpert guide for PHP
Expert guide for PHP
 
Web development using html and wordpress
Web development using html and wordpressWeb development using html and wordpress
Web development using html and wordpress
 
My Site is slow - Drupal Camp London 2013
My Site is slow - Drupal Camp London 2013My Site is slow - Drupal Camp London 2013
My Site is slow - Drupal Camp London 2013
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first course
 
The Characteristics of a Successful SPA
The Characteristics of a Successful SPAThe Characteristics of a Successful SPA
The Characteristics of a Successful SPA
 
WordPress & Other Content Management Systems
WordPress & Other Content Management SystemsWordPress & Other Content Management Systems
WordPress & Other Content Management Systems
 
Building rich interface components with SharePoint
Building rich interface components with SharePointBuilding rich interface components with SharePoint
Building rich interface components with SharePoint
 
Web programming and services
Web programming and servicesWeb programming and services
Web programming and services
 
Module 4 - Dreamweaver Templates (Static vs. Dynamic Content)
Module 4 - Dreamweaver Templates (Static vs. Dynamic Content)Module 4 - Dreamweaver Templates (Static vs. Dynamic Content)
Module 4 - Dreamweaver Templates (Static vs. Dynamic Content)
 
From WordPress With Love
From WordPress With LoveFrom WordPress With Love
From WordPress With Love
 
Languages of Internet
Languages of InternetLanguages of Internet
Languages of Internet
 
High performance website
High performance websiteHigh performance website
High performance website
 
Advanced Wordpress
Advanced WordpressAdvanced Wordpress
Advanced Wordpress
 
Dynamic Web
Dynamic WebDynamic Web
Dynamic Web
 
Web technology P B Jadhav
Web technology  P B JadhavWeb technology  P B Jadhav
Web technology P B Jadhav
 
Drupal architectures for flexible content - Drupalcon Barcelona
Drupal architectures for flexible content - Drupalcon BarcelonaDrupal architectures for flexible content - Drupalcon Barcelona
Drupal architectures for flexible content - Drupalcon Barcelona
 
On Again; Off Again - Benjamin Young - ebookcraft 2017
On Again; Off Again - Benjamin Young - ebookcraft 2017On Again; Off Again - Benjamin Young - ebookcraft 2017
On Again; Off Again - Benjamin Young - ebookcraft 2017
 
Static and Dynamic webpage
Static and Dynamic webpageStatic and Dynamic webpage
Static and Dynamic webpage
 

Andere mochten auch

Moving to a Zero IT Footprint
Moving to a Zero IT FootprintMoving to a Zero IT Footprint
Moving to a Zero IT FootprintTim Crawford
 
CIO Forum: CoIT + Self Service
CIO Forum: CoIT + Self ServiceCIO Forum: CoIT + Self Service
CIO Forum: CoIT + Self ServiceTim Crawford
 
Membership marketing madness feb 2013
Membership marketing madness feb 2013Membership marketing madness feb 2013
Membership marketing madness feb 2013Curtis Midkiff
 
IP touchphone; an advanced touchscreen IP phone console
IP touchphone; an advanced touchscreen IP phone consoleIP touchphone; an advanced touchscreen IP phone console
IP touchphone; an advanced touchscreen IP phone consolebobbytam
 
TechFuse 2013 - Break down the walls SharePoint 2013
TechFuse 2013 - Break down the walls SharePoint 2013TechFuse 2013 - Break down the walls SharePoint 2013
TechFuse 2013 - Break down the walls SharePoint 2013Avtex
 
Por que Criar a Rede UXnet no Rio?
Por que Criar a Rede UXnet no Rio?Por que Criar a Rede UXnet no Rio?
Por que Criar a Rede UXnet no Rio?monica m fernandes
 
SEO: Optimizing Sites for People (and search engines)
SEO: Optimizing Sites for People (and search engines)SEO: Optimizing Sites for People (and search engines)
SEO: Optimizing Sites for People (and search engines)kdmcBerkeley at UC Berkeley
 
Moving IT to a Zero Infrastructure Footprint
Moving IT to a Zero Infrastructure FootprintMoving IT to a Zero Infrastructure Footprint
Moving IT to a Zero Infrastructure FootprintTim Crawford
 

Andere mochten auch (12)

Moving to a Zero IT Footprint
Moving to a Zero IT FootprintMoving to a Zero IT Footprint
Moving to a Zero IT Footprint
 
CIO Forum: CoIT + Self Service
CIO Forum: CoIT + Self ServiceCIO Forum: CoIT + Self Service
CIO Forum: CoIT + Self Service
 
Membership marketing madness feb 2013
Membership marketing madness feb 2013Membership marketing madness feb 2013
Membership marketing madness feb 2013
 
After Hours Presentation
After Hours PresentationAfter Hours Presentation
After Hours Presentation
 
The Mobile Web for Mobile Audience
The Mobile Web for Mobile AudienceThe Mobile Web for Mobile Audience
The Mobile Web for Mobile Audience
 
IP touchphone; an advanced touchscreen IP phone console
IP touchphone; an advanced touchscreen IP phone consoleIP touchphone; an advanced touchscreen IP phone console
IP touchphone; an advanced touchscreen IP phone console
 
TechFuse 2013 - Break down the walls SharePoint 2013
TechFuse 2013 - Break down the walls SharePoint 2013TechFuse 2013 - Break down the walls SharePoint 2013
TechFuse 2013 - Break down the walls SharePoint 2013
 
Por que Criar a Rede UXnet no Rio?
Por que Criar a Rede UXnet no Rio?Por que Criar a Rede UXnet no Rio?
Por que Criar a Rede UXnet no Rio?
 
People Search
People SearchPeople Search
People Search
 
SEO: Optimizing Sites for People (and search engines)
SEO: Optimizing Sites for People (and search engines)SEO: Optimizing Sites for People (and search engines)
SEO: Optimizing Sites for People (and search engines)
 
Moving IT to a Zero Infrastructure Footprint
Moving IT to a Zero Infrastructure FootprintMoving IT to a Zero Infrastructure Footprint
Moving IT to a Zero Infrastructure Footprint
 
HTML5 & Visualization
HTML5 & VisualizationHTML5 & Visualization
HTML5 & Visualization
 

Ähnlich wie Geek basics

Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3g4gauravagarwal
 
Week 1 - Interactive News Editing and Producing
Week 1 - Interactive News Editing and ProducingWeek 1 - Interactive News Editing and Producing
Week 1 - Interactive News Editing and Producingkurtgessler
 
CNIT 129S: Ch 3: Web Application Technologies
CNIT 129S: Ch 3: Web Application TechnologiesCNIT 129S: Ch 3: Web Application Technologies
CNIT 129S: Ch 3: Web Application TechnologiesSam Bowne
 
Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Joseph Lewis
 
WCBos13 intermediate workshop
WCBos13 intermediate workshopWCBos13 intermediate workshop
WCBos13 intermediate workshopBoston WordPress
 
Mobile gotcha
Mobile gotchaMobile gotcha
Mobile gotchaphegaro
 
Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Dave Wallace
 
Front end for back end developers
Front end for back end developersFront end for back end developers
Front end for back end developersWojciech Bednarski
 
Html5 shubelal
Html5 shubelalHtml5 shubelal
Html5 shubelalShub
 
Web Design Basics.pptx
Web Design Basics.pptxWeb Design Basics.pptx
Web Design Basics.pptxBalasundaramSr
 
Demystifying WordPress
Demystifying WordPressDemystifying WordPress
Demystifying WordPressMykl Roventine
 
Apache Content Technologies
Apache Content TechnologiesApache Content Technologies
Apache Content Technologiesgagravarr
 
WordPress - Open Source Overview Presentation
WordPress - Open Source Overview PresentationWordPress - Open Source Overview Presentation
WordPress - Open Source Overview PresentationAndy Stratton
 
BITM3730 11-8.pptx
BITM3730 11-8.pptxBITM3730 11-8.pptx
BITM3730 11-8.pptxMattMarino13
 
ARTDM 171, Week 2: A Brief History + Web Basics
ARTDM 171, Week 2: A Brief History + Web BasicsARTDM 171, Week 2: A Brief History + Web Basics
ARTDM 171, Week 2: A Brief History + Web BasicsGilbert Guerrero
 

Ähnlich wie Geek basics (20)

Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
 
Week 1 - Interactive News Editing and Producing
Week 1 - Interactive News Editing and ProducingWeek 1 - Interactive News Editing and Producing
Week 1 - Interactive News Editing and Producing
 
CNIT 129S: Ch 3: Web Application Technologies
CNIT 129S: Ch 3: Web Application TechnologiesCNIT 129S: Ch 3: Web Application Technologies
CNIT 129S: Ch 3: Web Application Technologies
 
Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)
 
WCBos13 intermediate workshop
WCBos13 intermediate workshopWCBos13 intermediate workshop
WCBos13 intermediate workshop
 
Mobile gotcha
Mobile gotchaMobile gotcha
Mobile gotcha
 
Unit 01 (1).pdf
Unit 01 (1).pdfUnit 01 (1).pdf
Unit 01 (1).pdf
 
Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Cms & wordpress theme development 2011
Cms & wordpress theme development 2011
 
Front end for back end developers
Front end for back end developersFront end for back end developers
Front end for back end developers
 
Wp 3hr-course
Wp 3hr-courseWp 3hr-course
Wp 3hr-course
 
Html5 shubelal
Html5 shubelalHtml5 shubelal
Html5 shubelal
 
Web Design Basics.pptx
Web Design Basics.pptxWeb Design Basics.pptx
Web Design Basics.pptx
 
Introduction to web_design_cs_final_ason
Introduction to web_design_cs_final_asonIntroduction to web_design_cs_final_ason
Introduction to web_design_cs_final_ason
 
Demystifying WordPress
Demystifying WordPressDemystifying WordPress
Demystifying WordPress
 
Apache Content Technologies
Apache Content TechnologiesApache Content Technologies
Apache Content Technologies
 
Web Design Norms
Web Design NormsWeb Design Norms
Web Design Norms
 
WordPress - Open Source Overview Presentation
WordPress - Open Source Overview PresentationWordPress - Open Source Overview Presentation
WordPress - Open Source Overview Presentation
 
BITM3730 11-8.pptx
BITM3730 11-8.pptxBITM3730 11-8.pptx
BITM3730 11-8.pptx
 
CA-Web Hosting-Slide.pptx
CA-Web Hosting-Slide.pptxCA-Web Hosting-Slide.pptx
CA-Web Hosting-Slide.pptx
 
ARTDM 171, Week 2: A Brief History + Web Basics
ARTDM 171, Week 2: A Brief History + Web BasicsARTDM 171, Week 2: A Brief History + Web Basics
ARTDM 171, Week 2: A Brief History + Web Basics
 

Mehr von kdmcBerkeley at UC Berkeley (6)

WHM/cPanel in .edu Environments
WHM/cPanel in .edu EnvironmentsWHM/cPanel in .edu Environments
WHM/cPanel in .edu Environments
 
Web typography
Web typographyWeb typography
Web typography
 
Design concepts
Design conceptsDesign concepts
Design concepts
 
Twitter For Journalists
Twitter For JournalistsTwitter For Journalists
Twitter For Journalists
 
SEO Basics
SEO   BasicsSEO   Basics
SEO Basics
 
News21 Social Networking
News21 Social NetworkingNews21 Social Networking
News21 Social Networking
 

Kürzlich hochgeladen

AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 

Kürzlich hochgeladen (20)

AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 

Geek basics

  • 4. Ajax •Asynchronous Javascript and XML •AKA “Javascript finally works” •No full-page refresh, URL doesn’t change •More like desktop apps •Async database updates
  • 5. Bounce Rate •From stats/analysis •User hits one page and leaves •You want to reduce bounce
  • 6. Cache •Data stored locally for performance •Client (browser) stores copy of page •Server stores precompiled Java/PHP/Python, etc.
  • 7. Cascading Style Sheets •Syntax for controlling appearance of pages •(HTML is for logical structure, CSS for looks) •Decoupled from HTML •Targets either official HTML tags or custom elements •Ideally site-wide
  • 8. Client-side / Server-side •Servers provide services •Outlook/Mail.app are clients of your mail server •Firefox/Safari/Chrome are clients of a web server •PHP/ASP / Django / Rails are server-side •Javascript/Flash are client-side
  • 9. Content Management System •aka CMS: Database-backed publishing system •Creates pages “on the fly” •Site workflow, consistency, automation •WordPress, Drupal, Sitepoint, Ektron, dotCMS... •More than 600 on the market •Free <--> $$$ ... often proprietary
  • 10. DNS •Domain Name System •Translates IP addresses to human-readable domain names •A critical backbone •A "nameserver" runs DNS software
  • 11. Domain •example.com •Top level domains: .com, .net, .org, .edu, .gov •Subdomains: www.example.com, projects.example.com •Create/manage at a “registrar” like GoDaddy or Moniker
  • 12. Embed/IFRAME •Code running on remote site embedded in yours •HTML and/or Javascript •Google Maps/Charts, Vimeo videos, widgets •Copy into HTML mode in your CMS (permissions)
  • 13. File Formats - Audio •Audio alone not great on the web (except podcasts) •MP3 - Most common compression format - 1/10th size •128kbps+ for music, 64kbps for spoken word •Compressed MOV also acceptable •AIFF and WAV - Raw, uncompressed
  • 14. File Formats - Image •TIFF, RAW - Uncompressed, large files, high-quality •PSD - Photoshop native, with layers, masks, editable text •JPG - Best for web photography. Full color, lossy compression { •GIF - Smallest files for line art (256 color, transparency) •PNG - Full color, lossless compression, transparency, OSS
  • 15. File Formats - Video •MOV (QuickTime), WMV (Windows Media) •Also MP4, M4V •Can be compressed or uncompressed •Aim for 4MBs/minute in compression •Even compressed, files and bandwidth bills are big •Recommend embedding w/ Vimeo or YouTube
  • 16. File Formats - Web •Only these can be in web folders: •Documents: HTML, CSS, JS, PHP, ASP maybe PDF •Audio: MP3, MOV, M4V, MP4, WMV (compressed) •Video: MOV, FLV (compressed) •Images: JPG, GIF, PNG (compressed) •Orphans = unused = clutter
  • 17. Fluid vs. Fixed Layout •Resize browser window to test •Fluid works on more devices, but gives less control •Fixed more common by far (mastheads) •Recommended width for fixed: 960px (i.e. 1024 screen)
  • 18. Fold (below the) •Analogy to newspapers •Content out of sight before user starts vertical scrolling •Used to be considered worthless; not anymore
  • 19. Font family •You can only use fonts installed on all/most computers •These tend to be grouped by similarity •font:12px verdana,arial,helvetica,sans-serif; •Situation changing fast! •TypeKit, Google Fonts
  • 20. FTP •File Transfer Protocol ( http:// nntp:// email:// ftp:// ) •Internet’s oldest protocol •Move files between any two computers on net
  • 21. FTP •File Transfer Protocol ( http:// nntp:// email:// ftp:// ) •Internet’s oldest protocol •Move files between any two computers on net
  • 22. Hash tag (Twitter) •Instant saved search - gathers conversation on same topic •Popular for breaking news, conferences •User can click to see aggregated tweets
  • 23. Hexadecimal •Six-character representation of a color •16.7 million possible color values •Use in Photoshop, Flash, Dreamweaver, HTML, CSS... •Match image colors to web colors, build palettes
  • 24. HTML5 •Latest standard, not an animation tool! •New semantic tags (article, section, header, footer, aside) •New video handling •Offline storage / browser database •Geolocation •Canvas
  • 25. Metadata •Data about your data •Like card catalog at library •MP3 tags •EXIF data in photos •HTML meta tags - content not shown in browser
  • 26. Open source •Software created collaboratively, often without pay •Firefox, Apache, Linux, WordPress, Drupal •The best matches quality of best commercial software •You’re free to modify or scrutinize
  • 27. Permalink •URL representing a permanent story page •Story may disappear from home or beat pages •Often includes a date, story keywords
  • 28. Plugins •Software that extends other software •Spam control •Email comments •Contact form •Override roles •Conduct polls •Integrate Twitter/Flickr etc. •Photo galleries •Events systems
  • 29. Responsive Design •We now have to cater to smartphones and giant monitors •Rather than serve multiple site versions, respond dynamically •bostonglobe.com is a great example
  • 30. RSS •Really Simple Syndication •A “pull” format that feels like “push” •Lets users digest or discover your content w/o browser •Lets other sites integrate your linked headlines •Generated automatically by most CMSs •Internally: XML •Atom format is similar
  • 31. RSS
  • 32. Semantic Web •Page elements tagged in a meaningful way •Machines reading page source code can understand context •HTML5 helps by providing new <article> and <footer> tags •Microformats •Formats like RSS, Atom, XML, JSON •Build with clean code to encourage the semantic web
  • 33. Server •Can mean either a physical machine or software •Usually a “pancake” w/very fast drives, high-rated RAM •Servers live in data centers with high redundancy •“Web server” can also mean software like Apache •Don’t confuse “web host” (company) with “server”
  • 34. Tag (HTML) •A “container” that wraps text in a document •Can take “attributes” (some required) •All tags must be closed •All lowercase •Proper nesting
  • 35. Tag (Taxonomy) •Similar to Categories or Beats, but less formal •Site may have a dozen categories but hundreds of tags •Sometimes used for User Generated Content
  • 36. URL •Uniform Resource Locator (aka URI) •Every tiny piece of content has a unique address •Sometimes physical, sometimes virtual •Make them readable! •Include keywords for SEO http://kdmc.berkeley.edu/blog/2010/feb/22/webcasts/ protocol://subdomain.domain.tld/path/to/resource http://news.cnet.com/2300-17938_105-10002703-4.html? s=0&o=10002703&tag=mncol;thum
  • 37. Usability Usability is the study of the ease with which people can employ a tool in order to achieve a particular goal •User testing: How long to achieve a task? •Small focus groups - 5 users •Eliminate confusion points •If a site is hard to use, people leave •Homepage should clearly state purpose •Ask people to do simple tasks, record them
  • 38. Usability (cont.) Usability is the study of the ease with which people can employ a tool in order to achieve a particular goal •If they can’t find the it, they can’t USE it •Search needs to rock •Write for the web (short, scannable) •Anticipate and answer user questions •Jakob Neilsen: useit.com •Usability 101 & Top 10 Web Design Mistakes
  • 39. UI/UX •User Interface/Experience •You can’t design an experience •You CAN design FOR an experience
  • 40. Validation/Web Standards •Standards matter (w3.org) •The key to fixing what’s broken •Structural perfection •Google is blind •Important for SEO •validator.w3.org

Hinweis der Redaktion

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n