Demonstração do jQuery UI utilizando Single Page Application

Transições

Cube - Page - Concave - Zoom - Linear - Fade - None - Default

Temas

Default - Sky - Beige - Simple - Serif - Night Moon - Solarized

1 - O início da internet

Para começarmos a falar sobre o Single Page Application e a Aplicação desenvolvida é necessário conhecermos um pouco sobre a evolução da web.

Redes Interconectadas

A rede Mundial de Computadores hoje conhecida como "Internet" é ligada a criação das redes interconectadas utilizadas pelos militares norte americanos.

ARPANET

Essa rede foi criada em resposta ao projeto sputnik da antiga URSS(União das Repúblicas Socialistas Soviéticas) e seu uso inicialmente era para disputa de poder entre EUA e URSS

ARPANET - Professores

Em 1975, a ARPANET permitia um acesso livre aos professores e pesquisadores dessa tecnologia e já existiam, em média, dois mil usuários.

ARPANET - Aberta

Em 1989, ouviu-se pela primeira vez o termo “World Wide Web – WWW”, que justamente indicou a concepção de uma infraestrutura mundial de computadores conectados independente de sua localização geográfica para qualquer finalidade

2 - Linguagens web

Depois de conhecer um pouco sobre a internet é preciso saber um pouco sobre as linguagens utilizadas para criar páginas web

HTML - Hyper Text Makup Language

Surgiu basicamente com a internet quando Tim Berners-Lee, desenvolveu várias ferramentas para facilitar a comunicação dele com seus amigos inicialmente utlizando seu próprio navegador chamado nexus. Utilizado para colocar conteúdo em uma página web, funciona como um 'esqueleto de textos'

CSS - Cascading Style Sheet

Também surgiu por conta dos estudos de Berners-Lee. Utilizado para dar estilo ao conteúdo de uma página web ele funciona como um 'enfeite para os textos criados'

JavaScript

Surgiu a partir de estudos feitos pelo Brendam Eich que trabalhava para a Netscape(um dos primeiros navegadores criados) Utilizado para adicionar as ações e efeitos para a página html e css funciona como 'Escolhas e ações para os textos estilizados'.

4 - SPA - Single Page Application

Single Page Application é um metodo de desenvolvimento utilizado para sumir com todos os carregamentos da página, tendo a finalidade de simular aplicações de software desktop no ´próprio Browser.

SSA - Server Side Application

Método de desenvolvimento convencional requisições feitas de cliente para servidor constantemente fazendo a página ser carregada totalmente.

5 - jQuery/jQueryUI - Bibliotecas javascript

jQuery - Write Less, Do More
jQueryUI - Write Less, Do More ++

Ambas são bibliotecas criadas com javascript e elas tem a finalidade de facilitar a vida dos desenvovedores e manipular o DOM são crossbrowser e fáceis de utilizar.

6 - DOM - Document Object Model

É toda estrutura formada pelo html que ao ser interpretado pelo navegador se torna um objeto, ou seja, o DOM é um modelo do objeto html.

7 - Arquitetura Cliente/Servidor

Client-Side : São as partes visuais da web, tudo que é possível visualizar faz parte do client-Side

Server-Side : São as partes escondidas da web, mais precisamente os códigos de back-end como php.

8 - Exemplo SPA e SSA

9 - UX - User Experience

Experiência de usuário, é um termo dado aos estudos feitos em cima de como o usuário agirá em determinadas situações para assim desenvolver a melhor experiência possível.

10 - Desenvolvendo um SPA

Agora que conhecemos os principais itens a ser utilizado vamos ao desenvolvimento de um SPA simples utilizando ajax.load() do jQuery.

Adicionando o jQuery.load()

$(document).ready(function(){

    $.ajaxSetup({cache: false}); //Não salvar pagina em cache.

    //Menu - Indice
    $("#menu-indice").menu();

    $("#conteudo-section-direita").load("home.html");
    
    $("#menu-indice li").click(function(){
         var page = $(this).attr("id");
         $("#conteudo-section-direita").load(page+".html");

            
        //Add class para o menu atual
        $('#'+page).addClass('current-menu').siblings().removeClass('current-menu');
    });

});

Tela da Aplicação

11 - SPA X SSA

Estudo feito Sobre os dois métodos

SPA

Aplicação Web
Performance ++
Acessibilidade ++
Fluidez ++
Interatividade ++
Possibilidades ++
Inovações ++
UX ++

SSA

Websites
SEO ++

Tabela comparativa

Comparação Single Page Application Server Side Application Performance ***** *** Interatividade ***** *** UX ***** *** SEO ** ***** Atrativo **** *** Fluidez ***** ** Possibilidade ***** **

Demonstração do jQuery UI utilizando Single Page Application – Redes Interconectadas – HTML - Hyper Text Makup Language

dougjuliao

Demonstração do jQuery UI utilizando Single Page Application – Redes Interconectadas – HTML - Hyper Text Makup Language

0 1

Apresentacao-tcc