Conceptos básicos de la comunicación visual, su historia y evolución al ambiente digital, la cromática, composición, tipografía, texturas digitales, formas (marcos interactivos), diagramación, escalas, medidas electrónicas para elementos digitales (pixeles, vector y bitmap).
Diseño gráfico para el medio cibernético, el flujograma de un portal, mapas de navegación y su interactividad, elementos multimedia, ubicación de logos en páginas Web, páginas dinámicas, animación, la infográfica digital, uso de Adobe Photoshop y Flash, Fireworks, actionscripting, bibliotecas de y elementos gráficos, botones de navegación, hiperenlaces, CSS, XML, Rich Media para producción de contenidos con visuales, sonido e hipertexto. Fundamentos de HTML y Javascript. Interfaces de diseño. Uso de Macs y PC para diseño. Hosting en la Red. Instrucción en clase sobre el uso de los programas de diseño, talleres de práctica y proyectos creativos.
Cosas Divertidas con archivos en Mac y PC
1) recuerda quitar los espacio al principio del nombre de archivo y al final
2) trata de evitar espacios en el nombre de archivo, mejor usa _ (underscore)
3a) en Mac usas el comando de "Get Info" para ver el nombre de archivo mas claramente.
3b) en PC usas el comando de "Properties"
4) en HTML
a) recuerda la diferencia entre:
" <---------------buena y mas usada
' <---------------buena
` <---------------mala
“ y ” <---------------horrible
codigo CSS
.grande {
height: 200px;
overflow:hidden;
position: relative;
}
.grande:before, .chiquito:before {
position: absolute;
background: rgba(0,0,0,.5);
top: 0;
left:0;
width: 100%;
height: 100%;
content: "\00a0";
}
.grande:hover:before, .grande:hover p, .chiquito:hover:before, .grande:hover p {
display:none;
}
.grande p {
position: absolute;
top: 20px;
right: 5px;
color: #fff;
font-size: 40px;
}
.chiquito p {
position: absolute;
top: 20px;
right: 20px;
color: #fff;
font-size: 20px;
}
.chiquito {
height: 100px;
overflow:hidden;
position: relative;
}
.no-padding {
padding: 0 !important;
}
#entradas {
margin-bottom: 30px;
}
<div class="row" id="entradas">
<div class="col-md-6 grande no-padding">
<img src="https://unlimitedstudios.com/images/slide_1.jpg" class="img-responsive">
<p>Titulo de la Noticia</p>
</div>
<div class="col-md-6 grande no-padding">
<div class="row">
<div class="col-md-6 chiquito no-padding">
<img src="https://www.unlimitedstudios.com/images/slide_2.jpg" class="img-responsive">
<p>Titulo de la Noticia</p>
</div>
<div class="col-md-6 chiquito no-padding">
<img src="https://www.unlimitedstudios.com/images/d4c0822cf132a38e883647d0ee5d4975.png" class="img-responsive">
<p>Titulo de la Noticia</p>
</div>
</div>
<div class="row">
<div class="col-md-6 chiquito no-padding">
<img src="https://www.unlimitedstudios.com/images/8d803399acb8e4f8f9a43571e54d6791.png" class="img-responsive">
<p>Titulo de la Noticia</p>
</div>
<div class="col-md-6 chiquito no-padding">
<img src="https://www.unlimitedstudios.com/images/f938eb27adeab333c2965419cc976ce5.png" class="img-responsive">
<p>Titulo de la Noticia</p>
</div>
</div>
</div>
</div>
<br><br><br><br><br><br>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Noticias Unlimited</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>