Plataforma pessoal para visualizar
Interface Web
Usuário x Sistema

Sistema de aprendizagem para aprender a fazer interface web de um sistema de informação na web.

(Transferência de Conhecimento entre Usuários e Sistemas)

Através desta PLATAFORMA PESSOAL sôbre Interface Web
EU ajudo a VOCÊ a usar esta PLATAFORMA
mapeando a Experiência, para especificar e desenvolver Sistema de Informação.

Conforto, Estimulo e Interesse Visual para: Clientes, Usuários, Gestores, Analistas, Designers e Desenvolvedores de Sistemas.


Você esta interessado em experimentar fazer uma INTERFACE WEB e tem um Caso Real ?

Se  SIM  eu também





BEM VINDO

O que ofereço e forma de trocar idéias:

wdz.eng.br@gmail.com


Ir para Site
(Clicar abaixo para ver forma de trocar idéias)		 Objetivo
Serviço de Especificação de Sistema (WDS) Fazer Cliente
Componente Digital (WDC) Montar páginas com auxilio de componentes
Produto (WDP) Fazer página Web
Dicas sobre interfaces de sistemas na web e suas tecnologias (WDK) Marcar presença na internet

Veja o site que atende sua necessidade

v8_12 Atualizações
Lista de requisitos (previsto e não previsto) por seção
Header
  • Interface:
    . conceito -> Interface: passar indice local para direita:redesenhada.
    . conceito -> Interface -> onde se encaixa: colocar usuário, ambiente, formulário, relatório: desenho atualizado
    . visualização: montar interface a partir de outras visualizações de wdk: interface criada
    EU:
    . objetivos:rever
    .alinhamento do conhecimento: criar interface
    Experiência:
    . entregas: mostrar galeria desse ano: interface criada, . aprendizagem :apontar para modelo conceitual:criar link para imagem.
    Diagrama Wdz
  • Trocar:
    . Conceito, gestão e compliance por conceito, significado e função. Arescentar gestão, governança e compliance
    • Mapa do site
  • Reorganizar:
    . Permutar itens dos orientadores
    . Gestão: colocar Gerir o valor <- (Desejar -> Fazer -> Usar)
    . trocar Requisitos por Atualizações

    • Orientadores para o Negócio:



    Autor:Walter Dominguez
    Hoje me dedico à modelagem, design e prototipação digital de serviço e componentes e transito pelos meios acadêmicos e de conteudos. Venho da atuação na área de TI em desenvolvimento de aplicações, metodologia e planejamento em empresas nos ramos de telecomunicação, tecnologia da informação, seguradora, banco de investimento, navegação, cooperativa e internet. Encontrei na área digital através da internet uma nova visão para criar valor por meio de jornadas, blueprints e diagramas para o desenvolvimento de sistemas e software através de páginas Web.

    Curriculum +

    Mapeamento, design, modelagem e prototipação digital.


    Tipos de Proto-Persona:
  • Criador, desenvolvedor, produtor, consumidor (usuário)

    • Proto-Persona:
    Quer fazer uma página Web.
    Ter um caso real.
    Ter conhecimento do negóco em que atua.
    Ter capacidade de elaborar modelos abstratos que descrevam a sua estrutura e o seu funcionamento.
    Quer aplicar técnicas de elicitação de requisitos.
    Quer detalhar de forma analítica e sistêmica o requisito.
    Gerar a documentação do sistema.
    Ter visão sistêmica e analítica
    Ser um consumidor de Informação
    Nivel de escolaridade superior


    Perguntas


    Gerir o valor <- (Desejar -> Fazer -> Usar)
  • Adm do tempo
  • Análise de Impacto de Mudança     (Especificação do produto)
  • Modelo de Projeto 
  • Modelo de Negocio 
  • Tomada de decisão 


    • Começar com a experiência do interessado e caminhar em direção a tecnologia.
    • Partir do simples para o complexo
    • Configurar um conjunto de modelos adequados para aplicações especificas.
    • Modelo é direcionado por objetivos e riscos do projeto.
    • Modelo atravessa estados bem definidos
    • Dividir para conquistar
    • Seguir práticas modernas de desevolvimento
    • Evitar:
      • Multitarefas
      • Aprender rápido demais sem assimilar o que esta aprendendo
      • Trocar iniciativas atuais por novas e melhoradas porem não dominada. Exercitar o domínio.


    Negociação
  • Escopo, prazo e preço

    • Mudança de versão
  • Justifica pelos níveis de serviço desejado

    • Premissas e indicadores
  • São revisados constantemente

    • Tecnologia
  • É uma criação coletiva

    • Mudanças
  • Como diminuir seus efeitos

    • Inovação e melhorias
  • Portifólio de projetos

  • Demandas

    • Prioridade
  • De acordo com o orçado

    • Orientadores para o Sistema:



    Fazem parte deste site (visão externa):
    • WDZ - Home & Design & Developer
    • WDS - Serviços
    • WDS - Dicas
    • WDP - Produtos (Em elaboração)
    • WDC - Componentes
    Sistema:
    • Visão geral do processo:
    Contexto
    • Onde esta inserido a interface:
    Interface

    Lógica
    • Fuzzy
    Transação
  • Exemplo

    • Evento - 5W2H
  • O que: Identificação, Nomes, Conteúdo
  • Por que: Motivos
  • Quanto: Valores
  • Quando: Datas (início, fim, datas do financeiro)
  • Como: Regras, Recursos, Registros (atas, documentos, Inscrições)
  • Onde: Locais (real: endereço, virtual: conta)
  • Quem: Pessoas (PJ, PF)
  • Quanto:
  • Observações

    • Comportamento
  • Estático
  • Dinâmico
    • Diagramas

    Modelagem
    • Analise
    • Design
    Visualização
    • Tipos:
    Inteligencia Artificial
    • Highlights:
    Computador
  • Evolução do Processador


  • Organização do computador
    • Uma memória.
    • Uma unidade aritmética e lógica (ALU).
    • Uma unidade central de processamento (CPU), composta por diversos registradores,
    • e Uma Unidade de Controle (UI), cuja função é a mesma da tabela de controle da Máquina de Turing universal:
      . buscar um programa na memória, instrução por instrução, e
      . executá-lo sobre os dados de entrada.

  • Fusão CPU e GPU

    • Arquitetura de software:

    • Neste modelo o aplicativo é movido para o servidor e um navegador web é usado como um cliente magro. O aplicativo é executado em servidores web com os quais o navegador web se comunica e gera o código HTML para ser exibido no cliente.
    Arquitetura de rede
  • Camada OSI para computadores.

    • Orientadores para o Design do Site:



    • Fazer um cliente oferecendo serviço de aprendizagem de especificação de software para sistema de informação.
    • Marcar presença na internet oferecendo dicas sôbre sistema de informação e suas tecnologias.
    • Trabalhar no formato home & office.
    • Atuar no mapeamento, design, modelagem e prototipação de interface Web's através de páginas Web.
    • Montar as páginas através de componentes de software.
    • Usar site para divulgar meu trabalho.


    • Obter interessado que se torne cliente.

    • Restrições
  • Trabalhar no formato home & office.

    • Foco
  • Otimização, aprendizagem, requisitos de software e especificação de sistema

    • Caracteristicas do site
  • Divulga trabalho, forma de trocar idéia, vai além dos sites contidos nele, mapea visão, principios, orientações para o desenvolvimento de interfaces usando TI.

  • Escopo do site

    • Arquivos do site
    • Estrutura
    Aspectos da Experiência
  • Holistica: Incluir ações, pensamentos e sentimentos
  • Pessoas: Percepção
  • Situcionais: As circuntancias conduzem mais que a disponibilidade
  • Abordagem: Simplificação (seleção)

    • Principios Design, UX, UI
      1. Tenha um conceito, significado e função.
        1. Comunique não enfeite (linha, textura, forma, cor e imagem relacionados ao conceito).
        2. Crie uma unidade visual (todas as partes relacionadas).
        3. Use duas (+ ou - 3) tipografia (peso e largura).
        4. Mostre uma coisa de cada vez(direcione 1. a um item depois progressivamente tamanho, peso e cores).
        5. Escolha as cores com um objetivo (as cores tem significados culturais.
        6. Se puder fazer com menos melhor (menos é mais).
        7. O espaço negativo é mágico: crie-o não o preencha.
        8. Tratar a tipografia como imagem.
        9. Mantenha a tipografia amigavel (pense em quem vai ler).
        10. Seja universal, não se trata de você.
        11. Condense e separe: crie ritmos em termos de tamanho, pesos e espaço.
        12. Jogue com com luz e sombras como fogos de artifíios e o sol nascente.
        13. Faça um objetivo ou simplesmente não faça.
        14. Meça com os seus olhos (faça que compoerte da maneira que você quer).
        15. Crie as imagens que você precise não crie aleatoriamente (personifique).
        16. Crie movimento (img bidemensional, assimetria, intervalos espaciais e enfase direcional, profundidade e movimento espacial).
        17. Preste atenção a história mas não a repita..
        18. Evite a simetria (o formato cria o design).
    • Principios UX e UI
    • Exemplo:
    Design
    • Elementos
    • Box Model sising
    • Grid
    • Usabilidade
    Frameworks Tecnologias Web

    Orientadores para Projeto de Desenvolvimento



    Estudo de definição do WDZ:
    • WDZ - Estudo de definição
    Domínios:
    • WDK - Dicas
    • Visão Engenharia de Sistema
    • Visão de Software
    • Visão de Engenharia de Requisitos
    • Ciclos de Vida de Negocio e Sistema
    • Glossário
    Galeria de Projetos:
    • Galeria de Projetos
    Ciclos de vida:
      • A melhor abordagem para um determinado projeto depende, em grande parte, da natureza do projeto e da natureza da organização. A abordagem em cascata funciona melhor com projetos de grande porte, complexos, que têm numerosos interessados, afetam a empresa toda e não podem ser facilmente divididos em subprojetos. Ela também funciona bem com organizações que têm uma cultura formal e uma estrutura hierárquica.
      • A abordagem em espiral e a programação ágil funcionam bem nas organizações dinâmicas, que podem tolerar aambiguidade e necessitam obter resultados rapidamente. O caminho em espiral pode apresentar melhores resultados quando adotado para projetos que se dividem facilmente em subprojetos e para projetos mais simples, em especial o desenvolvimento de sistemas de usuário único ou que afetam um pequeno departamento. A programação ágil é bem-sucedida em ambiente onde as necessidades do usuário são difíceis de especificar ou mudam rapidamente.
      • A prototipagem funciona melhor para projetos de pequeno e médio portes. Ela funciona bem onde a cultura suporta equipes funcionalmente mistas. A prototipagem pode ser combinada com a abordagem em espiral e ser usada para um ou mais dos subprojetos em um desenvolvimento em espiral.
    Métodos
    • Método convencional
    • Método agil
    • Método V
    Aprendizagem
    • Analogia e Incremental
    Tipos de mapeamento:
    • Mapeamentos
    Entregas
    • Método convencional
    Tarefa
  • Funcional - Para atender exigências de uma pessoa
  • Sentimental - Sentimento ao terminar uma tarefa
  • Emocional - Percebida ao usar uma solução

    • Abordagem de desenvolvimento
  • Escopo -> Requisitos ->Design ->
    Desenvolvimento -> teste
    Evolutiva e aprendizagem em espiral.

    • Restrição
  • Não atende a necessidades não declaradas.

    • Relacionamentos
  • Entender o processo e conceitos
  • Validar as necessidades
  • Planejar o atendimento
  • Garantir a entrega
    • Caminho
  • Senão trilhar não vai deixar de existir

    • Método de pesquisa
  • Quantitativo
  • Qualitativo

    • Metodologia de Projeto

    Metodologias Tradicionais

    Exemplo:Um bom exemplo de aplicabilidade da metodologia tradicional é em projetos ou licitações do governo.
    Vantagens:
    • Maior percepção por parte do cliente referente ao valor total do projeto;
    • Entrega do produto em sua totalidade;
    • Maior enfoque na etapa de planejamento, com o objetivo de eliminar os riscos;
    • Projetos são realizados de forma mais rápida.
    Desvantagens:
    • Planejamento rígido, com pouca flexibilidade de trabalho;
    • Não é interessante para clientes que querem sempre inovar e adicionar melhorias no seu produto.
    • Todo o processo é centralizado no gerente de projetos.

    Metodologias Ágeis

    Exemplo: projeto novo e com inovações com várias versões como por exemplo um site, já fica bem mais interessante apostar nos métodos ágeis. Vantagens:
    • Se você busca alcançar a famosa transformação digital, esse é o caminho. O mundo digital está em constante metamorfose, escolher metodologias rígidas como as tradicionais irá apenas atrasar seu negócio.;
    • Maior liberdade no planejamento do projeto e em cada etapa de trabalho;
    • Projetos são discutidos e flexibilizados em conjunto;
    • Equipe trabalha mais unida e a divisão do trabalho é realizada de acordo com as habilidades de cada membro do time;
    • Existe uma participação mais ativa do cliente em todas as etapas do projeto, através de feedbacks.
    Desvantagens:
    • O produto é entregue por partes, o que pode não ser vantajoso para o cliente que precisa de um projeto 100% pronto;
    • Planejamento extenso, que exige várias análises em cada etapa do projeto;
    • Pode ter um custo mais volátil do que um projeto realizado com metodologias tradicionais.


    Técnicas
    • Mapeamento
    • Prototipação
    Ferramentas

    Níveis
  • Negocio, sistema e individual

    • Diagramas
  • Funcional, Comportamental e Estrutural

    • Performance
  • Rede

    • Orientadores Externos:



    Padrões
    • CGI - comitê gestor da internet Brasil
    • W3C - Consórcio World Wide Web Brasil
    • Tecnologia para desenvolvedores web
    • Tableless - Formas de desenvolvimento de sites
    • NN/g - Nielsen norman grouping - pesquisa baseada em UI
    • Apple - guia interface humana
    Cursos e Suporte
    • Udemy- Cursos sob demanda
    • Stackoverflow- perguntas e respostas
    Literatura
    • Pessoas e livro
    Tendências
    • Gartner
    • Ovum
    • Forrester
    • Techtudo
    • MacMagazine
    • Technology review
    • Cronapp
    • Profissões
    Seminários
    • Emap/Fgv
    • Infnet/Ciclo de palestras
    • Coppe/Pesc

    Biblioteca
    Sitetoteca

    Jornada de Treinamento
  • Treinamento
    Histórico Cursos
    Trab AcademicoCurso
    Trab Empresas

    • Conhecimento a adquirir:
  • SVG - Figura geomérica com texto interno as figuras.
    JS e Jquery - Drag and drop do mapa do site.
    JS - Gravação de arquivo de texto e edição.
    SSL open source - torna o site seguro.

    • Lista de Insights
  • Drag and Drop do mapa do site