Material de estudo, HTML? #38
Replies: 17 comments
-
|
Ao menos eu utilizo os próprios sites que navego em si, não sou muito de ler documentação da w3c (acho um porre a documentação), mas quando muito em dúvida ou querendo saber algo que não tenho certeza a MDN supre minhas necessidades. Acredito que a galera deva se inspirar na necessidade, ou seja conforme a demanda do job se faz uma busca no google à caça de soluções ou mesmo projetos existentes que já tenham utilizado. |
Beta Was this translation helpful? Give feedback.
-
|
Pois é, você tem razão, também percebo pouco material nesse sentido. Mas até que faz sentido. HTML é "só" marcação, então em tese se você aprender a base e saber lidar com semântica e acessibilidade, já terá acervo suficiente para desenvolver um HTML bom. |
Beta Was this translation helpful? Give feedback.
-
|
Esse é o ponto @lfeh, pegar uma base sólida na linguagem e evoluir com a semântica e acessibilidade, eu sinto uma carência nessa área, vemos poucas discussões e artigos legais focados nisso. |
Beta Was this translation helpful? Give feedback.
-
|
Onde tem Layout Engine tem HTML, browsers estão indo pra TV e muitos outros devices, tudo HTML. Acho que a linguagem tem pouca ênfase pois é muito simples (simples é bom!), então da pra aprender tudo em bem pouco tempo e não apresenta nenhum desafio comparado com tendencias malucas que vemos todo dia em outros ecosistemas, como javascript ou php. Uma coisa óbvia e importante de se ter em mente é que existem milhares de linguagens que podemos usar para gerar HTML! O cara pode ser o ninja master daquela linguagem pop de servidor, vai virar tudo html na outra ponta, to falando isso só pra reforçar que HTML é importante demais na área de web! Também não recomendo comprar demais todas as tendencias que o Google empurra, e vai continuar empurrando, HTML ainda é XML. XML não morreu como dizem, ele é herança e um numero absurdo de conceitos que usamos hoje em tudo que é canto vem desse ecosistema. Acho incrível como pessoas que produzem HTML não conhecem XSLT. XML+XSLT=HTML, isso foi um stack oficial e ainda é padrão w3c ate hoje. Não precisa usar nem gostar, mas se o que ta escrevendo vai virar HTML, conhecer as origens é muito importante. Um dos sites que achei as melhores informações sobre o assunto é o http://html5doctor.com/, costumo tambem ler direto da fonte https://www.w3.org/TR/html5/ |
Beta Was this translation helpful? Give feedback.
-
|
Só pra trazer um pouco de tempero e tirar a áurea de simplicidade do HTML --> https://github.com/posthtml/posthtml =p c/c @fernandofleury |
Beta Was this translation helpful? Give feedback.
-
|
hehehe tecnicamente JS, uma linguagem usada tambem para gerar HTML :) |
Beta Was this translation helpful? Give feedback.
-
|
Menosprezar HTML é um termo delicado. No final das contas ainda é só uma linguagem de marcação, o objetivo dela é enriquecer o conteúdo que está ali escrito, e gerar diretivas de comunicação com JS. Claro, dá pra aprofundar a disseminação considerando Shadow DOM, principalmente quando se fala de Web Components. Mas o próprio Web Component vai usufruir do HTML só pra marcação, e ainda vai precisar de CSS e JS pra funcionar de fato. Pelo menos pra mim, o necessário é compreender o que o HTML tem pra oferecer, seja em APIs terceirizadas (Tipo Canvas API, é algo proveniente do HTML, mas com a utilização em JS), em tags mais semânticas, mas ainda no fim é só uma linguagem de marcação. |
Beta Was this translation helpful? Give feedback.
-
|
HTML é vida. HTML é amor. HTML é o princípio e o fim. @Ravennnn eu sugiro que você inicie o estudo desse artigo do Vannevar Bush: http://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/ Ele foi escrito em 1945, onde o Vannevar Bush questiona como fazemos o relacionamento entre informações. Era uma época onde era muito complicado guardar informação. O espaço física já não era suficiente, aí os caras passaram a guardar muita informação em micro-filme. Mas o problema disso era como você relaciona uma informações em micro-filmes separados? Falo um bocado sobre essa história no meu livro. Mas já fiz muito jabá! ;-) Vou tentar escrever mais sobre isso no Tableless. Esse artigo está até antigo. É de 2008: Vale muito a pena estudar esse assunto. É isso que diferencia devs medianos dos maravilhosos. |
Beta Was this translation helpful? Give feedback.
-
|
Obrigado pelas fontes @diegoeis, vou me aprofundar nisso, sinto que ser um desenvolvedor mediano hoje em dia, não é mais o suficiente. E realmente eu não tive muito contato com outras linguagens de marcação como XML ou XSLT, obrigado pela dica @bernardodiasc. |
Beta Was this translation helpful? Give feedback.
-
@diegoeis bem observado. Valeu pelos artigos! Já havia lido seu artigo de 2008, mas sempre bom reler. :) Escrevi um artigo sobre isso, mas nunca foi publicado, era pra ser uma análise de como nós, humanos, criamos a informação a partir do pensar, por exemplo, e transformamos isso de diversas maneiras para poder enviar para outro interlocutor. A informação então é armazenada digitalmente, o que chamamos de dados e lá no final, na ponta do usuario, o que o usuário vê já não são mais dados crus que armazenamos, sendo então o conteúdo da aplicação, bonitinho, digerido, manipulado, etc, o resultado do nosso trabalho. Junto com essa análise um monte de outras observações e comparações até chegar na querida buzzword "interoperabilidade". A palavra interoperabilidade já perdeu a graça falar, "saiu dos trends", mas nunca foi tão importante quanto no cenário atual, com a maturidade do open source e open data que temos hoje, com a acessibilidade da internet e a famigerada internet das coisas. Dito isso, nunca confio em devs que acham sites feios quando não tem css aplicado ou não é feito na ultima tecnologia de js disponível. Não é nada diferente de deixar de ler um bom livro por não ter gravuras... @Ravennnn XSLT é feio, tem dúzias de defeitos, não vai te dar nenhuma relevancia no mercado de trabalho. Antes que alguem ache que to defendendo a linguagem. Eu gosto muito, me divirto, mas só de brincadeira mesmo. Resumindo, XML é uma linguagem de transporte de dados, assim como o Json, YML, CSV etc. Essas linguagem em si não têm muita diferença além da sitaxe. Veja, o conceito é extremamente simples, estrutura os dados dentro das regras dessas linguagens, e manda os dados para serem consumidos por outra aplicação, sem ter necessariamente que eniviar a aplicação inteira... To resumindo, mas a ideia é mais ou menos essa, conceitos bem comuns, mas não menos importante por isso. Agora que deu pra ter uma ideia pra que serve o XML (assim como o Json), vamos falar de XSLT, que é uma linguagem de transformação, tambem é conhecida como linguagem de template. Oras, hoje existem dezenas de linguagens de template, e na pratica tudo funciona muito parecido. Nesse ponto pegamos os dados estruturados em XML e transformamos com XSLT para HTML (pode transformar em outro XML, ou em PDF, ou em varios outros tipos de arquivo de dados). Então pode-se dizer que:
E a lista continua em várias plataformas. Boa parte das opções se encontram no ecosistema de JavaScript, por sua popularidade como linguagem de web. Tem uma diferença quando colocamos esses "stacks" lado a lado é que o XML é uma linguagem em si, o HTML é derivado do XML assim como varias outras linguagens. No caso do Javascript, o Json é uma sublinguagem da linguagem JS. Na pratica a ordem das coisas muda, nada de mais, mas é mais ou menos assim: voce aplica XSLT em cima do XML e o resultado é HTML, por exemplo. No ambiente de JS voce executa o template (mustache, handlebars, etc) consumindo o Json... Dificil de explicar, mas é estruturalmente diferente, embora conceitualmente possua o mesmo objetivo. Foi mal o textão, escrevi tudo de cabeça então se houver algum equivoco por favor me avisem. :) |
Beta Was this translation helpful? Give feedback.
-
|
Se alguem se interessou por XSLT, fiz uma brincadeira aqui https://github.com/bernardodiasc/xslt pra mostrar mais ou menos qual a graça. Existe uma coisinha chamada Mixed Content, que basicamente é voce ter HTML dentro dos dados armazenados. Digamos que um membro de um objeto JSON possui esses dados em formato HTML e voce só precisa da imagem que está no segundo paragrafo... boa sorte hehehe Nesse exemplo mostrei duas formas de fazer um menu (ignorem css e js no exemplo, não tem nem é pra ter), uma forma simplesmente consumindo um HTML de dentro de um XML e a outra forma consumindo dados estruturados dentro do XML e transformando em HTML, o resultado dos dois casos é identico. Enfim, é só de brincadeira mesmo. XSLT Sandbox: https://eduardoboucas.com/xsltea/ |
Beta Was this translation helpful? Give feedback.
-
|
Ah, fiz experimentos tambem com outro projeto que explora exatamente o que comentei anteriormente: https://github.com/bernardodiasc/elements Apesar de um monte de coisas abordadas, em essencia esse projeto possui até agora XSLT e Swig gerando resultados identicos, consumindo exatamente os mesmos dados (embora um em xml e outro em json). A experiencia foi muito boa, o ponto de vista foi comprovado. :) obs: aqui vc escolhe qual templat engine quer rodar https://github.com/bernardodiasc/elements/blob/gh-pages/gulpfile.js#L15 |
Beta Was this translation helpful? Give feedback.
-
|
Muito interessante @diegoeis e @bernardodiasc . Entender o início, a base, é sempre importante para que possamos expandir a mente e, consequentemente, nos tornar um profissional melhor e mais flexível. Engana-se quem pensa que HTML é algo simples, vai muito além como o @diegoeis citou. Ele está mudando a cada dia mais e mais a maneira como nos comportamos e relacionamos informações. @Ravennnn, para estudar acabo utilizando a W3C e MDN como principais referências. Mas também há esse guia chamado Dive into HTML5 que é excelente e completo. Além de acompanhar diversos blogs como o Tableless, HTML5 Rocks, HTML5 Doctor, A List Apart, Smashing Magazine, dentre tantos outros. Também procuro estar sempre a par de questões relacionadas à Acessibilidade e UX, pois penso que é muito importante ter em mente que o HTML5 pode ajudar a mudar a vida das pessoas. |
Beta Was this translation helpful? Give feedback.
-
|
Carario @bernardodiasc, que aula mano. Sensacional mesmo. Você tem blog? Poderia facilmente escrever um artigo sobre isso. |
Beta Was this translation helpful? Give feedback.
-
|
+1 @bernardodiasc . Cria um blog. ;) |
Beta Was this translation helpful? Give feedback.
-
|
Vlw @lfeh e @diogorodrigues! não tenho blog, mas sempre penso em ter, falta o habito de escrever peças completas... tambem to vendo grande valor em somar meus 2 centavos com tanta riquesa nesse forum, realmente :) |
Beta Was this translation helpful? Give feedback.
-
|
free code camp é legal, mozzila mdn tem tudo, e no site da w3schools |
Beta Was this translation helpful? Give feedback.
-
Como disse Diego Eis:
Sinto falta de bons artigos sobre esse assunto, acho que boa parte dos desenvolvedores acaba menosprezando o HTML. Gostaria de saber onde vocês costumam a buscar conteúdo avançado sobre marcação e semântica.
Beta Was this translation helpful? Give feedback.
All reactions