Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Fiz diferente, semanticamente também está correto?

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Desafios finais e atividade Desenvolvendo a página de portfolio

por Renata Igarashi
| 25.7k xp | 1 posts

Fiz o exercício desafio de outra maneira, gostaria de saber se semanticamente também está correto? Se não tiver, qual o problema com a forma que eu fiz?

<!DOCTYPE html>
<html>
    <head>
        <title>Biografia - João da Silva</title>
        <meta charset="utf-8">
        <link rel="icon" href="img/favicon.png">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/site.css">
        <link rel="stylesheet" href="css/portfolio.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
    </head>
    <body>
        <main>
            <h1 class="titulo-principal">Portfolio</h1>

            <div class="container">
            <p>Veja abaixo a lista dos meus projetos mais relevantes</p>
                <div class="caixa-projeto">
                    <img src="img/bmw.png" alt="Projeto BMW" class="foto-projeto">
                    <p><a href="#">BMW.com: reformulação de design e implementação de HTML, CSS e JavaScript</a></p>
                </div>    
                <div class="caixa-projeto">
                    <img src="img/uol.png" alt="Projeto UOL" class="foto-projeto">
                    <p><a href="#">UOL.com: reformulação de design e implementação de HTML, CSS e JavaScript</a></p>
                </div>
                <div class="caixa-projeto">
                    <img src="img/ibm.png" alt="Projeto IBM" class="foto-projeto">
                    <p><a href="#">IBM.com: aplicação de progressive enhamcement em conjunto com aplicação back-end</a></p>
                </div>
                <div class="caixa-projeto">
                    <img src="img/g1.png" alt="Projeto G1" class="foto-projeto">
                    <p><a href="#">G1.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</a></p>
                </div>
            </div>
        </main>
        <img src="img/eu.jpg" alt="Foto de João da Silva" class="minha-foto">
        <aside class="navegacao-site">
            <h1>João da Silva</h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="bio.html">Sobre mim</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
            <ul class="icones-redes-sociais">
                <li>
                    <a class="github" href="https://github.com/joaodasilva">
                        Github
                    </a>
                </li>
                <li>
                    <a class="twitter" href="https://twitter.com/joaodasilva">
                        Twitter
                    </a>
                </li>
                <li>
                    <a class="linkedin" href="https://br.linkedin.com/pub/joão-da-silva/32/4/508">
                        LinkedIn
                    </a>
                </li>
            </ul>
        </aside>
        <footer class="rodape-pagina">
            &copy; João da Silva 2014
        </footer>
    </body>
</html>
.foto-projeto{
    position: relative;
    width: 100%;
}

.caixa-projeto {
    float:left;
    box-sizing: border-box;
    border: 8px solid black;
    padding: 16px;
    width: 45%;
    margin:16px;

}
4 respostas
por Ramon Pacheco
| 487.6k xp | 249 posts
Moderador Web Developer Jr.

Olá Renata, na minha opinião não há erro semântico.

Aguarde por mais respostas.

Att,

por Daniel Isola
| 167.9k xp | 29 posts
Senior IT Manager

Olá Renata! Muito legal seu projeto, vou apenas dar umas dicas do ponto de vista semântico, como você pediu! Podemos fazer algumas mudanças no seu código, por exemplo:

  • Você usou a tag <h1>mais de uma vez em diversos elementos, considere usar os outros h`s (h2, h3, h4...):

    <h1 class="titulo-principal">Portfolio</h1>

    e

    <h1>João da Silva</h1>

  • E apenas um detalhe que pode ajudar os buscadores a entenderem melhor sua pagina, considere utilizar a propriedade lang="pt" no seu HTML para dizer que o seu conteúdo está em português!

Novamente, parabéns pelo projeto bem realizado! Espero ter ajudado, e bons estudos!

por Talita Azevedo
| 218.5k xp | 182 posts
Moderador

Olá Renata! Não localizei nenhum erro semântico no código, parabéns !!! =)

solução!
por Pedro Ávila
| 330.4k xp | 175 posts

Renata, acredito que não ficou como é proposto pelo exercício.

O próprio exercício sugere que você utilize as tags <figure> e <figcaption> para as imagens, além disso o fato do autor na correção agrupar essas imagens dentro de uma lista ul é uma forma de dizer para o mecanismo de busca que essas imagens estão relacionadas entre si. E a utilização do <figcaption> é importante para dizer que aquela descrição é uma legenda daquela figura.

Bem, pelo que entendi, essas técnicas para agrupar em <ul> e adicionar as imagens em <figure> agregam uma boa carga semântica.

Já em relação ao CSS, não há necessidade de configurar o atributo position como relative para as imagens. Além disso você teve muito trabalho para escrever em cada <img> que ela pertencia à classe .foto-projeto. Você poderia simplesmente fazer assim:

.caixa-projeto {
    // Seus códigos permanecem
}

.caixa-projeto img {
    /* dessa maneira todas as imagens dentro da div 
.caixa-projeto receberão as propriedades abaixo */

    width: 100%;
}