MENU

| BR

Campus

Cursos

Programas Executivos

Paises

Guia sobre HTML, CSS e Javascript: como entender o básico da programação

Guia sobre HTML, CSS e Javascript: como entender o básico da programação
#Tecnologia
10 de novembro - min de leitura

Quer aprender o básico para começar a programar? Então leia nosso guia sobre HTML, CSS e Javascript, criado por uma apaixonada por códigos e também professora da DH, Natália Lira.


O aprendizado de programação parece coração de mãe: sempre cabe mais uma linguagem para ser aprendida. E é por isso que convidamos uma apaixonada por programação para criar um guia sobre HTML, CSS, Javascript!

Acompanhe neste artigo, em parceria com a nossa professora do curso, Natália Lira, e descubra as funcionalidades e diferenças para dar os primeiros passos na programação.

Guia sobre HTML, CSS e Javascript: por onde começar

Futuras e futuros desenvolvedores web, este artigo é para você que quer começar a programar, mas, com tanta informação, não sabe por onde começar.

A proposta é explicar o trio que sustenta qualquer página web, assim como qual a diferença entre HTML, CSS e Javascript.

E a explicação será a mais próxima possível do mundo não virtual. Vamos pensar no processo de construção de uma casa e as etapas importantes até termos o produto final, combinado?

Para colocar em prática os primeiros passos

E a pergunta número um é: como desenvolver esse passo a passo junto ao tutorial? Ou seja, será que meu computador possui todas as ferramentas necessárias?

A resposta é: sim, possui!

Precisamos criar arquivos e ter a liberdade de declarar qual extensão ele terá (que é a indicação do tipo de arquivo - documentos podem ser PDF e imagens JPEG, por exemplo), tudo isso somado ao bloco de notas que temos no computador.

Pronto. Isso já é mais que suficiente para darmos esse start sobre a resposta da pergunta que não quer calar: para que serve HTML, CSS, Javascript e, é claro, sobre desenvolvimento de códigos.

Então, crie uma pasta em seu computador para a prática e, dentro dela, faça dois arquivos, cada qual indicando a linguagem que utilizaremos em sua extensão:

- Um chamado index.html
- Outro chamado estilo.css 

Como programar um site em HTML?

Precisamos levantar as paredes do nosso website, planejar quantos e quais cômodos teremos. Não há outra linguagem que faça isso melhor que o HTML.

Diferentemente do que alguns acreditam, não se trata de uma linguagem de programação, mas sim de marcação (Linguagem de Marcação de HiperTexto). Ou seja, iremos demarcar exatamente que tipo de conteúdo teremos em cada parte do site.

Isso é realizado por meio de tags, que são representadas pelo uso dos símbolos < e >, cada qual possuidora de um nome que a identifique e a diferencie.

A estrutura básica que todo arquivo HTML precisa ter é formada pelas quatro tags, representadas na imagem a seguir: 

*em verde, há a explicação de cada uma delas 


Além disso, tags html podem receber uma variedade de atributos (alguns opcionais e outros essenciais para seu funcionamento). 

Atributos são informações adicionadas, a fim de personalizar seu comportamento na tela. Um exemplo prático da combinação destes dois conceitos é quando desejamos mostrar uma imagem em uma página web. 

Para adicioná-la de forma semântica (que tenha significado na linguagem) podemos utilizar a tag img. Essa tag espera receber ao menos dois atributos:

- src: que indicará o caminho da imagem que queremos exibir;
- alt: que deve conter um texto descrevendo a imagem - para acessibilidade dos usuários que utilizam softwares sintetizadores de voz e também para quando, por alguma razão, existe problema de carregamento do site e a imagem não pode ser visualizada.

Usando o logo da Digital House como imagem, podemos utilizar o link online dele no código a seguir: 



Um toque de estilo ao site

E é chegada a hora de dar acabamento nas paredes e colorir cada espaço. Esse é o papel da linguagem de estilização CSS em um website. 

Por meio dela, podemos aplicar tamanho, profundidade, coloração, sombra, alinhamento entre itens, deixar em negrito, sublinhado e inserir lista grande de possibilidades. Portanto, basicamente, todo tipo de estilização é possível, graças ao CSS.

Há três formas de inserirmos estilo em uma página web. Neste tutorial, vamos usar o modo de link externo (apresentado na sexta linha do código anterior), onde utilizamos a tag link com os atributos rel (qual o tipo de relacionamento que as duas páginas terão entre si) e href (o caminho até o arquivo desejado).  

Vamos aprender mais três palavras técnicas para iniciarmos nesta linguagem:

Seletor (como iremos selecionar um ou mais elementos HTML);

Propriedades (quais características queremos alterar - exemplo: cor, plano de fundo, altura);

Valor (qual será o valor da propriedade citada - exemplo: vermelha, uma imagem, 1 pixel).


Há mais de 19 formas de selecionar um elemento no arquivo CSS. Para descomplicar ainda mais, vamos utilizar a mais famosa e simples delas: a seleção pelo nome da própria tag desejada

Seguindo o exemplo que usamos até aqui, se quisermos aplicar um tamanho à imagem adicionada anteriormente, escrevemos o nome da tag e entre as chaves {} utilizaremos a propriedade width (largura em inglês) seguido pelo valor escolhido e a unidade de medida escolhida.

Uma das unidades mais conhecidas/utilizadas é o valor em pixels, representados pela abreviação px. Assim, nosso código ficará:



*Para quem tem acompanhado o código e quer ver o resultado no navegador*: clique com o botão direito sobre o ícone do arquivo index.html, clique na opção 'abrir como' e escolha seu navegador de preferência e poderá ver a página que acabou de criar aí na sua telinha.

'Hm.. se com HTML posso estruturar cada item do website e com CSS estilizá-los... o que mais devo aprender para me dar bem com o desenvolvimento front-end? Fique de olho no próximo ponto!

Agora vamos para a próxima parte deste guia sobre HTML, CSS e Javascript, a personalização (captando interação do usuário)

Personalizando: Javascript no HTML

Agora, nossa casa passou pelo processo de construção, acabamento e coloração. Parece que está tudo muito bom, não é mesmo? 

O que mais pode ser implementado? Talvez agora seja o momento de mobiliar ela, de forma a ficar mais atraente ao nosso cliente. E se te contássemos que é possível deixar o site mais interativo? 

Esse é um dos papéis que o Javascript desempenha (em sua forma pura) e que pode contribuir com o nosso trabalho. Podemos utilizar esta maravilhosa linguagem de programação para:

Dar vida ao carrossel de imagens de um e-commerce;

Apresentar um pop-up de alerta quando o usuário tenta deletar um produto cadastrado (conferindo se ele deseja mesmo continuar);

Validar informações contidas em um formulário de cadastro;

Avisar o usuário caso o e-mail digitado seja inválido.

Fazer o passo a passo de tudo isso é um assunto mais avançado, talvez pauta de uma outra conversa aqui, pelo blog. 

O que é importante sabermos agora é por onde começar. Como toda e boa linguagem de programação, o Javascript possui algumas estruturas básicas e, ao conhecermos elas, o caminho torna-se mais natural para avançar de nível e complexidade.

Continue seus estudos deste guia sobre HTML, CSS e Javascript

Inicialmente, recomendamos entender o que são variáveis e suas variações, estruturas condicionais, de repetição e funções. 

Entender esses conteúdos compilados e saber como utilizá-los para resolver problemas simples do dia a dia (por exemplo fazer um cálculo de soma de uma lista de comprar através do Javascript) é o que te ajudará a adquirir a lógica computacional, que nada mais é entender como podemos representar problemas reais e resolvê-los no mundo virtual. 

Esse conteúdo foi baseado nas regras das linguagens de desenvolvimento web e você pode encontrá-las e saber mais nos seguintes links:
- HTML (https://developer.mozilla.org/pt-BR/docs/Web/HTML)
- CSS (https://developer.mozilla.org/pt-BR/docs/Web/CSS)
- JAVASCRIPT (https://developer.mozilla.org/pt-BR/docs/Web/JavaScript)

Continue seus estudos deste guia sobre HTML, CSS e Javascript

Provavelmente este guia sobre HTML, CSS e Javascript impulsionou a sua curiosidade sobre o mundo da programação! A Digital House tem um curso de desenvolvimento Web Full Stack completo e atualizado. Ao longo das aulas você aprende a criar um site do zero em até 6 meses.


Leia mais no blog DH:

Minha primeira linguagem de programação: como escolher?

Primeiros passos no Git: o que eu preciso saber?

Pague só quando possuir renda: conheça o modelo ISA da DH

E aí, já segue a gente no Twitter? Vem pra rede, vamos conversar sobre habilidades digitais! ;)

Outras notícias

Aprenda Google Data Studio e as vantagens da ferramenta de dados img
#Dados

Aprenda Google Data Studio e as vantagens da ferramenta de dados

Para exemplificar a utilidade do Google Data Studio para gerar relatórios e insights, é importante ter um aspecto em mente: o filtro. Dizem que os dados são o novo petróleo, mas é importante fazer uma ressalva. Assim como o petróleo precisa ser refinado, os dados precisam ser interpretados e analisados. Ao contrário disso, vira um acúmulo de informações sem valor.O “achismo” é uma palavra banida no vocabulário de profissionais do marketing. Antigamente, era impossível mensurar os resultados de determinada campanha nos meios tradicionais. Essa história mudou para melhor com o advento da internet, mas esbarramos em outro desafio: a quantidade, o que inviabilizaria o nosso trabalho se não existissem ferramentas específicas para essa finalidade.É o caso do Google Data Studio, que ajuda na interpretação de dados coletados. Por meio dos seus infográficos, mais modernos que as planilhas, a ferramenta facilita o entendimento das informações.O que é o Google Data Studio?O Google Data Studio é uma solução disponibilizada gratuitamente pela empresa Google para visualização de dados de forma mais atrativos. A principal atribuição dessa ferramenta é justamente organizar os dados, podendo ser compartilhado em tempo real e salvo na nuvem para os demais colaboradores.Quando informamos que o Google Data Studio é ideal para criar infográficos mais modernos não é sem motivo. Com a ferramenta, é possível introduzir elementos visuais: tabelas, infográficos e mapas, sem precisar ser um profissional da área de design. Além de ser visualmente mais moderno, a ferramenta para criar dashboards serve para orientar a tomada de decisões das empresas com base nos dados recolhidos, o que diminui as chances de erro.Como usar Google Data Studio?Antes de ter acesso ao painel do Google Data Studio, precisamos partir de um princípio básico, que é o de possuir uma conta Gmail. Em seguida, é só acessar a plataforma com os seus dados e aceitar os Termos de Serviço e Políticas do Data Studio. Caso esteja interessado em saber como criar um relatório do zero, veja o passo a passo do Google Data Studio do próprio suporte ou no relatório de tutorial da plataforma, disponível somente na versão em inglês. Mas adiantamos um pouco do que você pode fazer no Data Studio:➜ Combinação de dados de diferentes plataformas (Facebook, YouTube, Google Ads, entre outros).➜ Introdução de novas dimensões (URL, palavras-chave, rede sociais, entre outros).➜ Escolha de métricas relevantes.➜ Mudar o visual do relatório.➜ Inserir gráficos.7 dicas de como usar Google Data StudioA aplicabilidade do Google Data Studio é tão grande que é perigoso se perder. Porém, para evitar esse problema, vamos dar algumas dicas importantes para o seu uso:➜ Estabeleça um objetivo para cada relatório, para não virar uma bagunça e resumir as informações.➜ Integre a sua fonte de dados, pois isso vai aumentar as suas opções.➜ Pratique antes de colocar a mão na massa. Use o explorador para ver como isso funciona na prática.➜ Comece pelos 11 pré-modelos, antes de começar a criar um do zero.➜ Compartilhe com os seus colegas e com a comunidade, para receber feedbacks.➜ Abuse dos recursos da ferramenta para fazer a personalização do seu relatório, por exemplo, com elementos interativos.➜ Padronize os seus relatórios, para saber onde encontrar as informações. As vantagens em criar dashboardsO Google Data Studio é a ferramenta certa para dashboards. A criação de painéis visuais fica mais fácil de identificar erros que não conseguimos visualizar enquanto estamos desenvolvendo o projeto. Outra vantagem de criar dashboards no Google Data Studio é a possibilidade de ser compartilhado com outros colegas de trabalho, mantendo a equipe unida e trabalhando colaborativamente. Para se tornar um profissional de dados e aprender sobre a ferramenta na prática, conheça o curso de Data Analytics da Digital House, para transformar grande quantidade de dados em insights.  Leia mais no blog DH:+ Dados abertos: como usar dados públicos para gerar estratégias de negócios+ Power BI para leigos: aprenda os primeiros passos+ Resumo LGPD: tudo o que uma empresa precisa saber sobre a nova leiE aí, já segue a gente no Twitter? Vem pra rede, vamos conversar sobre habilidades digitais! ;) 

Análise heurística em UX Design: como fazer uma inspeção na usabilidade do produto img
#UX

Análise heurística em UX Design: como fazer uma inspeção na usabilidade do produto

Há algum tempo quase tudo que fazemos tem a ajuda de um computador ou de um smartphone.Desde a escolha do programa de fim de semana ao uso das planilhas mais complexas de cálculo. Desde a localização exata daquela balada marota até a chamada de um carro para te levar de volta para casa, passando pelo pagamento do consumo naquele local.Todos esses sistemas, sites e aplicativos que facilitam (e muito) a nossa vida, são desenvolvidos por equipes multidisciplinares que pensam cada detalhe para que você tenha a melhor experiência possível, fique satisfeito e volte a utilizá-lo.Os profissionais responsáveis pela criação das experiências dos aplicativos e sites que usamos são os UX Designers. Muitos pontos precisam ser levados em consideração para atender uma quantidade quase que infinita de necessidades das pessoas. Visando facilitar a criação desses sistemas, são utilizadas boas práticas que vão além da estética das interfaces. O que é análise heurística?Para avaliar a qualidade da usabilidade de qualquer sistema, ou seja, se está fácil de usar aquele aplicativo diário, é utilizada uma técnica chamada Análise Heurística.As 10 heurísticas de Nielsen são as mais difundidas entre os designers e foram desenvolvidas há 25 anos por um profissional chamado Jacob Nielsen.Conheça as 10 aplicações da análise heurística nos projetosAbaixo a descrição de cada heurística e como elas impactam no design e na compreensão das interfaces.Visibilidade do status do sistemaO design deve sempre manter os usuários informados sobre o que está acontecendo, por meio de feedback apropriado dentro de um período de tempo razoável: 10 segundos é o tempo limite para manter a atenção do usuário focada.Quando os usuários sabem o status atual do sistema, eles aprendem o resultado de suas interações anteriores e determinam as próximas etapas. As interações previsíveis criam confiança no produto e também na marca.Combinação entre o sistema e o mundo realO design deve falar a linguagem dos usuários. Use palavras, frases e conceitos familiares ao usuário. Siga as convenções do mundo real, fazendo com que as informações apareçam em uma ordem natural e lógica.Termos, conceitos, ícones e imagens que parecem perfeitamente claros para você e seus colegas podem ser estranhos ou confusos para seus usuários.Quando um projeto segue as convenções do mundo real e correspondem aos resultados desejados (chamados de mapeamento natural), é mais fácil para os usuários aprenderem e lembrarem como a interface funciona. Isso ajuda a construir uma experiência intuitiva.Saídas claramente demarcadasOs usuários costumam realizar ações por engano. Eles precisam de uma "saída de emergência" claramente marcada para deixar a ação indesejada sem ter que passar por um longo processo.Quando é fácil para as pessoas desistir de um processo ou desfazer uma ação, isso fomenta um senso de liberdade e confiança. As saídas permitem que os usuários permaneçam no controle do sistema e evitem travar e se sentir frustrado.ConsistênciaOs usuários não devem se perguntar se palavras, situações ou ações diferentes significam a mesma coisa. Um mesmo comando ou ação deve ter sempre o mesmo efeito.A mesma operação deve ser apresentada na mesma localização e deve ser formatada/apresentada da mesma maneira para facilitar o reconhecimento. Isso reduzirá a carga cognitiva do usuário.Prevenção de errosBoas mensagens de erro são importantes, mas os melhores designs evitam cuidadosamente a ocorrência de problemas. Identifique e elimine qualquer situação que possa levar o usuário ao erro. Geralmente os erros são conscientes e baseados em uma incompatibilidade entre o modelo mental do usuário e o design.Minimizar a sobrecarga de memória do usuárioTorne os elementos, ações e opções visíveis. O usuário não deve ter que se lembrar de informações de uma parte da interface para outra.As informações necessárias para usar o design (por exemplo, rótulos de campo ou itens de menu) devem ser visíveis ou facilmente recuperáveis ​​quando necessário.Os humanos têm memórias de curto prazo limitadas. As interfaces que facilitam o reconhecimento reduzem a quantidade de esforço cognitivo exigido dos usuários.AtalhosDisponibilize atalhos para que usuários experientes executarem as operações mais rapidamente. Abreviações, teclas de função, duplo clique no mouse, função de volta em sistemas hipertexto podem ajudar. Tudo isso facilidade a usabilidade.Atalhos também servem para recuperar informações que estão em um outro ponto da navegação a partir da interface principal.Diálogos simples e naturaisAs interfaces não devem conter informações irrelevantes ou raramente necessárias. Cada unidade de informação em uma interface compete com as unidades relevantes de informação e diminui sua visibilidade relativa.Garanta que o conteúdo e o design visual estejam focados no essencial. Certifique-se de que os elementos visuais da interface apóiem ​​os objetivos principais do usuário.Boas mensagens de erroAs mensagens de erro devem ser em linguagem simples (sem códigos de erro), indicar precisamente o problema e sugerir uma solução de forma construtiva.Devem também devem ser apresentadas com tratamentos visuais que ajudarão os usuários a perceber e reconhecê-las.Ajuda e documentaçãoÉ melhor se o sistema não precisar de nenhuma explicação adicional. No entanto, pode ser necessário fornecer documentação para ajudar os usuários a entender como concluir suas tarefas.O conteúdo da ajuda e da documentação deve ser fácil de pesquisar e focado na tarefa do usuário. Seja conciso e liste as etapas concretas que precisam ser executadas.Qualquer sistema pode e deve ser construído com uma boa usabilidade, para isso, além das heurísticas citadas acima, leve em consideração também o contexto de uso, o setor de atuação, e principalmente, pesquisas com usuários. Com isso será possível encontrar outros tipos de heurísticas bem como desenvolver as próprias heurísticas do projeto.Você pode aprender UX Design na práticaÉ fazendo que a gente aprende, e por isso, esta é uma das máximas do curso de UX Design da Digital House. Ao longo das aulas você participa de exercícios, projetos, e desenvolve as habilidades que um UX Designer precisa ter.E mais, ao final do curso você conta com um portfólio de UX para apresentar ao mercado!Leia mais no blog DH:+ Como começar em UX Design+ Etnografia no UX: como entender a relação do consumidor com produtos e serviços+ Vantagens em contratar um UX Designer JúniorE aí, já segue a gente no Twitter? Vem pra rede, vamos conversar sobre habilidades digitais! ;)

Empreendedorismo de oportunidade: aprenda como criar negócios de sucesso img
#Marketing

Empreendedorismo de oportunidade: aprenda como criar negócios de sucesso

Há uma diferença entre empreendedorismo de oportunidade e empreendedorismo por necessidade. Antes de mostrar quais serão os tópicos apresentados ao longo do texto, cabe dizer que a atividade empreendedora envolve coragem e criatividade desses profissionais autônomos, para montar o negócio dos sonhos ou fugir do desemprego.A quantidade de empreendedores no Brasil chegou aos 52 milhões, usando como referência o levantamento da Global Entrepreneurship Monitor (GEM), feito em 2019. Destes, 9.031 milhões são microempreendedores, de acordo com o Sebrae. Veja empreendedores brasileiros de sucesso:➜ Flávio Augusto da Silva, fundador da Wise Up.➜ Luiza Helena Trajano, presidente da Magazine Luiza.➜ Abílio Diniz, fundador do Pão de Açúcar.O que é empreendedorismo de oportunidade?O empreendedorismo de oportunidade envolve o profissional que identificou uma lacuna no mercado e decidiu empreender nesta área. Mesmo possuindo alternativas de emprego, eles escolhem montar um novo negócio por causa da possibilidade de crescimento. Entre as motivações de um empreendedor, podemos elencar a vontade de abrir o negócio dos sonhos, aumentar a renda e ser independente financeiramente.Todo projeto empreendedor requer planejamento estratégico, estudo de mercado e confiança. Veja a importância desses três pilares antes de abrir o seu negócio: ➜ Planejamento estratégico: para que as ideias saiam do papel de forma baseada. ➜ Estudo de mercado: para que o empreendedor saiba o cenário em que está ingressando.➜ Confiança: o empreendedor precisa ser o primeiro a acreditar no seu negócio. Características de um empreendedorPara se tornar um empreendedor de sucesso, é preciso ter algumas atitudes e comportamentos, que não são regra, mas ajudam.Por isso, reunimos as principais dicas para empreender e que são necessárias para profissionais seguirem nesta carreira, lembrando que muitas são soft skills requisitadas em diversas áreas. ➜ Proatividade: profissional que se antecipa aos fatos e cria novas oportunidades de negócio.➜ Persistência: não desiste facilmente diante dos desafios, reformula o plano e se esforça mais do que os outros para alcançar os objetivos.➜ Empreender é se arriscar: avalia as alternativas para fazer as escolhas certas e tentar reduzir a margem de erro.➜ Qualidade: busca melhorar os produtos ou serviços do negócio, cumprindo com os prazos.➜ Comprometimento: chama a responsabilidade para si e tem senso de equipe para alcançar o que deseja.➜ Atualização: mantém-se informado sobre o que está acontecendo no mercado.➜ Focado em resultados: estabelece metas que precisam ser alcançadas em curto e longo prazo.➜ Versatilidade: é resiliente para se adaptar às mudanças e sistemático para a tomada de decisões.➜ Relacionamento: sabe se envolver com as pessoas certas que possam ajudá-los nos seus projetos.➜ Autoconfiança: demonstra segurança para sustentar o seu negócio.Diferença entre empreendedorismo de oportunidade e necessidadeExistem várias formas de empreender, porém as mais comuns são por oportunidade ou necessidade.De um lado, temos os novos negócios que surgem paralelos a outras atividades do empreendedor, que pode ser um trabalho fixo, e que funcionam como renda extra ou busca da independência profissional.Já no empreendedorismo de necessidade, as pessoas buscam melhores alternativas de trabalho, pois não encontraram, ou se veem em um caminho único devido ao desemprego ou situação econômica do país. Como transformar necessidades em oportunidades?Para transformar as suas necessidades em oportunidades, você deve fazer o mesmo que o empreendedor que age para realizar o seu sonho.Então, faça um planejamento estratégico, estude o mercado que pretende entrar, seja seguro de si e busque desenvolver as características mencionadas no tópico anterior.3 dicas para investir em empreendedorismo de oportunidadeSe você está pensando em abrir um negócio, mas não sabe por onde começar. Nós separamos alguns segmentos que você pode ficar de olho para 2021. Veja quais são:Criação de infoprodutos Se você possui um conhecimento amplo sobre um assunto, a criação de infoprodutos pode ser uma boa alternativa para começar a empreender, podendo ser um curso online, vídeoaulas, um e-book, entre outras possibilidades.A grande vantagem é que você consegue atingir um número maior de pessoas, por ser um negócio desenvolvido no formato digital.AfiliadosO marketing de afiliados é uma das formas de ganhar dinheiro que está ganhando mais adeptos no mundo.Existem diversos programas como a Magalu Parceiro e Amazon Associados que oferecem essa possibilidade, além de plataformas específicas para isso.Loja virtualOs e-commerces estão bombando, nunca se vendeu tanto. Essa tendência só deve aumentar, já que as pessoas viram que é mais prático e cômodo comprar de casa sem precisar se deslocar até o local. Como empreender com a Digital HouseUm empreendedor de sucesso tem ainda mais chances de avalancar seus negócios com um curso de marketing digital. Aprenda na prática a criar estratégias, o branding de uma marca, mídia e como acompanhar resultados.A melhor parte é que você tem aulas com especialistas de mercado que sabem como funciona a dinâmica do empreendedorismo.Leia mais no blog DH:+ Dica dos professores: 5 livros inspiradores sobre transformação digital+ Pitch de sucesso: passo a passo para vender ideias+ Como criar anúncios no Google AdsE aí, já segue a gente no Twitter? Vem pra rede, vamos conversar sobre habilidades digitais! ;)