Desenvolvimento Web Prof. Radamés Pereira 2018/1.

Presentación del tema: "Desenvolvimento Web Prof. Radamés Pereira 2018/1."— Transcripción de la presentación:

1 Desenvolvimento Web Prof. Radamés Pereira 2018/1

2 Qual dos dois tipos? Codificadores irão focar seu esforço em resolver perguntas como: o que deve ser feito (ou pior: o que seu chefe quer que você faça), em alguns casos vai ser proativo e procurar saber como deve testar. Desenvolvedores vão questionar: para que serve este desenvolvimento? Qual problema iremos resolver?

3 QUAL A DIFERENÇA ENTRE UM CODER, UM HACKER, UM PROGRAMADOR, UM DESENVOLVEDOR E UM CIENTISTA DE COMPUTADORES? https://drive.google.com/open?id=1bZ_Qonq0RlN8qZx2wfTieTmFV_Rxr2RA Essas palavras podem ter o mesmo significado para você. Como geek, nerd e dweeb, todos sabem que existem diferenças significativas. Conhecer as diferenças também pode dar uma sensação de quanto você quer aprofundar na aventura de desenvolver software. ■Coders - Pode fazer muito. Vai funcionar, mas não será bonito. ■Hackers - geralmente são pessoas habilidosas, com pouca compreensão de alguma área. ■Programador - escreve códigos e compreende os algoritmos. Muitas vezes trabalha sozinho e bem. ■Desenvolvedor - São os melhores generalistas, podem usar muitos sistemas e idiomas diferentes e levá-los a conversar uns com os outros. São profissionais verdadeiros e amplos, trabalham com pessoas e se comunicam bem. ■Cientista de informática - Precisa provar como os computadores funcionam, a nível teórico. São também pessoas da matemática. Se você está perto de um desses, você pode ter uma idéia de como a cabeça funciona.

4 Desenvolvedores, programadores e Codificadores Desenvolvedores e programadores: São escritores de código mais experientes versados ​​ em pelo menos duas a três linguagens e escrevem códigos incríveis, limpos, sem erros e bem fundamentados. Eles podem aplicar seus conhecimentos algorítmicos para criar níveis sofisticados de codificação de software. Os desenvolvedores às vezes são chamados de líderes de um projeto. O desenvolvedor geralmente supervisionará uma equipe de codificadores e programadores para garantir que o aplicativo seja amigável e seja criado um produto final coeso. O desenvolvedor nesses casos provavelmente seria o ponto de contato direto do cliente e, em seguida, iria interagir com o resto da equipe para resolver o problema, fazer as mudanças solicitadas e responder perguntas do cliente. Codificadores: Os codificadores são comumente considerados o nível de programadores menos treinados ou experimentados. Esses indivíduos não possuem o mesmo conhecimento algorítmico que um programador ou desenvolvedor, já que eles são freqüentemente iniciantes no campo, habilidosos em apenas um idioma de codificação. Os codificadores geralmente recebem o trabalho de escrever partes diretas de código que podem ser facilmente delegadas pelos desenvolvedores.

5 Linguagens mais Usadas em 2017. https://stackify.com/popular-programming-languages-2018/ Algoritmos é tudo!

6 Pesquisa Google sobre Oportunidades e Salários https://blog.umbler.com/br/mercado-de-desenvolvimento-web-panorama-2016-e- expectativas-2017/ https://www.oficinadanet.com.br/post/14518-qual-a-linguagem-de-programacao-e- mais-bem-remunerada

7 O que é importante dominar? Webstandard Ao menos linguagem. HTML5, PHP, JAVA, Python, Ruby, C++, C#, CSS3 Object Orientation Javascript Design Pattern. Ajax SQL. jQuery, Mysql, SQLServer, Oracle, DB2, Postgres JSON SEO Outras...

8 Como funciona a Web?

9 Comunicação

10 Como trabalha o browser?

11 Motor de renderização Motor de renderização (ou motor de layout) é um software que transforma linguagem de marcação (como HTML, XML, etc.) e informações de formatação (como CSS, XSL, etc.) em um conteúdo formatado para ser exibido em uma tela (como um monitor, projetor, etc..)

12 Motor de renderização

13 Trabalho para a disciplina de Hiperdocumentos - Mestrado UFRGS - Prof. DR. JOSÉ VALDENI DE LIMA

14 História O HTML foi criado em 1991, por Tim Berners-Lee, no CERN (European Council for Nuclear Research) na suíça. Inicialmente o HTML foi projetado para interligar instituições de pesquisa próximas, e compartilhar documentos com facilidade. Em 1992, foi liberada a biblioteca de desenvolvimento WWW ( World Wide Web), uma rede de alcance mundial, que junto com o HTML proporcionou o uso em escala mundial da WEB. Ver: https://www.w3.org/https://www.w3.org/ A W3C é a organização oficial que desenvolve especificações para criação de conteúdos web e disponibiliza para consulta e acompanhamento os padrões de acessibilidade definidos.

15 Acessíbilidade “S I G N I F I C A N Ã O A P E N A S P E R M I T I R Q U E P E S S O A S C O M D I F I C U L D A D E S O U M O B I L I D A D E R E D U Z I D A P A R T I C I P E M D E A T I V I D A D E S Q U E I N C L U E M O U S O D E P R O D U T O S, S E R V I Ç O S E I N F O R M A Ç Ã O, M A S A I N C L U S Ã O E E X T E N S Ã OD O U S O D E S T E S P O R T O D A S A S P A R C E L A S P R E S E N T E S E M U M A D E T E R M I N A D A P O P U L A Ç Ã O.”

16 Usabilidade “É U M T E R M O U S A D O P A R A D E F I N I R A F A C I L I D A D E C O M Q U E A S P E S S O A S P O D E M E M P R E G A R N U M A F E R R A M E N T A O U O B J E T O A F I M D E R E A L I Z A R U M A T A R E F A E S P E C Í F I C A E I M P O R T A N T E.”

17 Crescimento

18

19 HTML5 De acordo com o W3C a Web é baseada em 3 pilares: 1.Um esquema de nomes para localização de fontes de informação na Web, esse esquema chama-se URL. 2.Um Protocolo de acesso para acessar estas fontes, hoje o HTTP. 3.Uma linguagem de Hypertexto, para a fácil navegação entre as fontes de informação: o HTML. Vamos nos focar no terceiro pilar, o HTML.

20 O que é XHTML: XHTML é a sigla para EXtensible HyperText Markup Language que em Português significa Linguagem Extensível para Marcação de Hipertexto. Criada a partir da linguagem HTML (versão anterior) juntamente com a linguagem XML, transformando-se em uma linguagem padronizada para web. XML (eXtensible Markup Language) é caracterizada como uma linguagem flexível e dinâmica que pode ser escrita em diversos formatos e interpretada com facilidade. A linguagem HTML (HyperText Markup Language) é a mais utilizadas para produção de páginas web. No entanto, determinados dispositivos com acesso à internet,como celulares e outros, não conseguem interpretar adequadamente essa linguagem. Por isso, utilizando as etiquetas de marcação (tags) HTML juntamente com as regras da linguagem XML, daí criou-se então a linguagem XHTML. XHTML surge como uma linguagem padronizada e recomendada pela organização W3C. A linguagem HTML5 é a quinta versão do HTML e é o padrão para produção de páginas web englobando diferentes linguagens.

21 Hypertexto. HTML é a abreviatura de HyperText Markup Language, é a linguagem que todos os programas navegadores usam para apresentar informações na World Wide Web (WWW). É uma linguagem simples que se baseia no uso de etiquetas com o texto ASCII fechado num par de parênteses angulares. O texto inserido dentro dos parênteses angulares informa qual é a utilidade da etiqueta. Exemplo: A etiqueta permite definir uma tabela. Resumindo em uma frase: o HTML é uma linguagem para publicação de conteúdo (texto, imagem, vídeo, áudio e etc) na Web.

22 O que é necessário para criar um documento HTML? ●Um processador de textos. Pode ser qualquer um que não formate o texto, já que a linguagem HTML é baseada no ASCII. No caso do Word, o documento será armazenado somente como texto, portanto é inadequado. ●Um navegador Web que se encarregará de interpretar e renderizar o hiperdocumento.

23 A sequência de trabalho para criar o documento é: ●Com um editor de texto criar o documento HTML e salvar com nome desejado e a extensão.htm e.html. ●Abrir o documento HTML com o programa navegador.

24 ESTRUTURA BÁSICA, DOCTYPE E CHARSETS A estrutura básica do HTML5 continua sendo a das versões anteriores da linguagem, há apenas uma exceção na escrita do Doctype. Segue abaixo como a estrutura básica pode ser seguida: O Doctype: O Doctype deve ser a primeira linha de código do documento antes da tag HTML: O Doctype indica para o navegador e para outros meios qual a especificação de código utilizar. Em versões anteriores, era necessário referenciar o DTD diretamente no código do Doctype. Com o HTML5, a referência por qual DTD utilizar é responsabilidade do Browser. O Doctype não é uma tag do HTML, mas uma instrução para que o browser tenha informações sobre qual versão de código a marcação foi escrita.

25 ESTRUTURA BÁSICA 1 2 3 4 5 6 7 8 9 10 Título do site Início do conteúdo

26 ANALISANDO

27 Código HTML O código HTML é uma série de elementos em árvore onde alguns elementos são filhos de outros e assim por diante. O elemento principal dessa grande árvore é sempre a tag HTML. O atributo LANG é necessário para que os user-agents saibam qual a linguagem principal do documento. Lembre-se que o atributo LANG não é restrito ao elemento HTML, ele pode ser utilizado em qualquer outro elemento para indicar o idioma do texto representado. Para encontrar a listagem de códigos das linguagens, acesse: http://www.w3.org/International/questions/qa- choosing-language-tags.

28 HEAD A Tag HEAD é onde fica toda a parte inteligente da página. No HEAD ficam os metadados. Metadados são informações sobre a página e o conteúdo ali publicado. Metatag Charset No nosso exemplo há uma metatag responsável por chavear qual tabela de caracteres a página está utilizando. Nas versões anteriores ao HTML5, essa tag era escrita da forma abaixo: <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”> Obs: Essa forma antiga também é suportada no HTML5. Contudo, é melhor que você utilize a nova forma.

29 TAGS, E : define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML. : define o cabeçalho de um documento HTML, que traz informações sobre o documento que está sendo aberto. : define o título da página, que é exibido na barra de título dos navegadores, COMENTÁRIOS E : define o conteúdo principal, o corpo do documento. Esta é a parte do documento HTML que é exibida no navegador. No corpo se pode definir atributos comuns a toda a página, como cor de fundo, margens, e outras formatações. : os comentários são utilizados para deixar o código compreensível. Eles não aparecem na tela, somente nó código fonte. : definição de parágrafo de texto. TESTANDO O CÓDIGO Para testar o código é necessário salvar o documento com a extensão “.html”. Geralmente utilizamos a nomenclatura “index.html” para dizer aos navegadores que aquele documento pertence a página principal do site, portanto, index.html é o documento início.

30 ATRIBUTOS Antes das demais tags, o que são ATRIBUTOS? Atributos são propriedades adicionais que as tags possuem. Algumas tags possuem atributos específicos e alguns atributos são globais, podendo ser aplicados a qualquer tag. Atributos são escritos dentro da tag, seguidos por um sinal de igual e depois entre aspas são declaradas as informações do atributo.

31 ATRIBUTOS As etiquetas podem incluir uma série de atributos, ou parâmetros, que em sua maioria são opcionais e que nos permitem definir diferentes possibilidades, ou características da mesma. Estes atributos são definidos por seu nome (que explica a sua utilidade) e o valor que contém por atribuição se usando o símbolo de igual. Exemplo: define uma tabela com borda de tamanho 2. Entre outras coisas, o manejo destas etiquetas nos permitirá: · Definir a estrutura lógica do documento HTML. · Aplicar vários estilos ao texto (negrito, fonte cursiva,,...). · A inserção de hiperlinks que permite o acesso de documentos relacionados ao atual. · A inclusão de imagens e arquivos multimídia (gráficos, vídeo, áudio, texto).

32 Exemplo 1: Exemplo para a disciplina DW Meu primeiro HTML Site para testar HTML !

33 Exemplo 2: Exemplo 2 para a disciplina DW Primeiro nome: Sobrenome: E-mail:

34 Referência HTML5 https://dev.w3.org/html5/html-author/

35 Geração de Ideias Uma das etapas mais fundamentais durante o processo de desenvolvimento de um produto, como web sites ou aplicativos, é a geração de ideias e protótipos. Após compreender o problema, independente de sua complexidade, é necessário gerar ideias para a solução para então implementá-la. Existem várias formas de representar uma ideia e projetar sua solução.

36 Wireframe Um wireframe é uma representação de baixa fidelidade de um projeto (rascunho). Ele deve mostrar claramente: – os principais grupos de conteúdo (o quê?) – a estrutura da informação (onde?) – uma descrição e visualização básica da interface e interação do usuário (como?) Wireframes não são apenas caixas meio sem sentido desenhadas em p&b, embora pareçam exatamente isso. Considere-os como o esqueleto do seu projeto e lembre-se que os wireframes devem conter a representação de todas as partes importantes do produto final. Wireframes devem ser criados num espaço de tempo curto: a maior parte do tempo deve ser gasta na comunicação com seus colegas e… pensando. A simples atividade de criar o wireframe deve ser realmente muito rápida. A visualização de um wireframe se dá esteticamente, mas de uma forma bastante simplificada. Preto e branco são as cores típicas que você irá usar (você pode adicionar o azul para especificar os links).

37 Protótipo Um protótipo, muitas vezes confundido com um wireframe, é uma representação de média a alta fidelidade do produto final e que simula a interface de interação do usuário. Ele deve possibilitar ao usuário: – experimentar o conteúdo e as interações da interface – testar as principais interações de forma similar ao produto final Um protótipo é uma simulação da interação final entre o usuário e a interface. Pode não parecer exatamente com o produto final, mas deve ser bastante similar (definitivamente não é um coisa cinzenta e com cara de rascunho, como são os wireframes). As interações devem ser moldadas com cuidado e apresentar uma semelhança significante com a experiência que o usuário terá no produto final. A interdependência entre a interface e o funcionamento do backend é frequentemente omitida para reduzir custos e acelerar os ciclos de desenvolvimento. Protótipos são utilizados em seu máximo potencial nos testes de usuário. A simulação das interações finais geram um ótimo material para testar a usabilidade da interface antes do desenvolvimento iniciar de fato. https://i.stack.imgur.com/TkMhq.gif

38 Mockup (mock-up) Um mockup é uma representação estática de média a alta fidelidade de um projeto. Muitas vezes um mockup é um rascunho bem próximo do projeto final do produto, ou até o próprio projeto visual do produto final. Um mockup bem feito: – representa a estrutura da informação, visualiza o conteúdo e demonstra as principais funcionalidades de uma forma estática – estimula as pessoas a realmente revisarem a parte visual do projeto Mockups são muitas vezes confundidos com wireframes, por causa dos nomes de certas empresas de software. Os mockups são particularmente úteis quando você quer vender a ideia do produto antes dele estar pronto para seu público estratégico (stakeholders). Graças a sua natureza visual, mockups não possuem a resistência dos entregáveis de baixa fidelidade (wireframes) e são bem mais rápidos de criar do que protótipos. Eles são ótimos coletores de feedback e, se inseridos no contexto geral do processo de criação do projeto, podem criar um bom capítulo da documentação.

39 Exercício! Criar um Wireframe: Página HTML Sugestão de ferramentas na nuvem (Google Drive): draw.io, Google Sites, Desenhos Google, Dica! Ver o sítio Web: https://pt.wikihow.com/Planejar-um-Site https://pt.wikihow.com/Planejar-um-Site