Ola este es el blog que nos pidió hacer la maestra Ale de proyecto final:b
miércoles, 7 de junio de 2023
Logotipos
Presenta el primer nombre detrás y los otros dos enfrente con un color más obscuro :D
Opinión de la prepa
La preparatorio fue una experiencia linda, vivimos muchos momentos buenos y unos no tan buenos pero al fin fue una experiencia que solo se vive una vez, extrañaremos a todos con los que tuvimos una buena amistad, la graduación será una despedida triste pero todos irán por su camino y ojalá les valla bien a todos :')
Blender es un programa informático multiplataforma, dedicado especialmente al modelado, iluminación, renderizado, la animación y creación de gráficos tridimensionales. También de composición digital utilizando la técnica procesal de nodos, edición de vídeo, escultura (incluye topología dinámica) y pintura digital.
Con Blender, puede crear visualizaciones 3D, así como imágenes fijas, animaciones 3D, tomas VFX. Puede incluso editar videos. Se adapta bien a las personas y los estudios pequeños que se benefician de su canalización unificada y su proceso de desarrollo receptivo.
El programa fue inicialmente distribuido de forma gratuita pero sin el código fuente, con un manual disponible para la venta, aunque posteriormente pasó a ser software libre. Actualmente es compatible con todas las versiones de Windows, macOS, GNU/Linux, Android, Solaris, FreeBSD e IRIX.
Características Clave
- Blender es una suite de creación de contenido 3D totalmente integrada que ofrece una amplia gama de herramientas esenciales, que incluyen Modelado, Renderizado, Animación y Rigging, Edición de Video, VFX, Composición, Texturizado y muchos tipos de Simulaciones.
- Es multiplataforma, con una interfaz gráfica de usuario (GUI) OpenGL que es uniforme en todas las plataformas principales (y personalizable con comandos de Python).
- Es una arquitectura 3D de alta calidad, permitiendo un flujo de trabajo de creación rápido y eficiente.
- Cuenta con el apoyo activo de la comunidad. Vea https://www.blender.org/community para obtener una lista extensa de sitios.
- Tiene un pequeño ejecutable, que es opcionalmente portátil.
Puede descargar la última versión de Blender aquí. https://www.blender.org/download/
Composición visual
¿Qué es la composición visual?
Toda creación visual tiene un objetivo. Generar emociones, transmitir un mensaje, comunicar, por poner algunos ejemplos. Este objetivo se consigue gracias a una composición visual: elementos organizados de una manera específica que, al unirlos, forman una imagen y producen un efecto.
La composición visual crea la unidad en la imagen y establece un orden el cual lo determina su creador. Cuando construyes una pieza buscas transmitir algo y para poder tener éxito en esta tarea te explicamos algunos elementos de la composición visual básicos que serán de mucha ayuda.
Ritmo visual
El ritmo es un término que se extrae de la música y que busca la armonía en todo arte. ¿Cómo entenderlo en la imagen? El ritmo visual se construye a través de secuencias o repeticiones y se puede determinar de la siguiente manera:
•Ritmo continuo: parte de elementos visuales que no cambian de forma, ni tamaño.
•Ritmo discontinuo: parte del contrapunto para destacar algún elemento visual.
•Ritmo creciente y decreciente: parte de la secuencialidad, pero cambia en tamaño.
En la naturaleza y cotidianidad podemos ver la expresión de estas composiciones. Una banda de pájaros volando en el cielo construyen un ritmo continuo. Un edificio simétrico en la noche con solo una luz encendida podría exponer discontinuidad. Un balón rebotando asemeja el ritmo decreciente y creciente al verse más pequeño cuando está en el aire y más grande cuando está en el piso.
Jerarquía visual
La jerarquía visual nos ayuda a transmitir la información que queremos de una forma clara, permitiendo interacción con nuestra imagen. Para construir jerarquía visual puedes tener en cuenta los siguientes elementos:
•Tamaño
•Color
•Alineaciones
•Repeticiones
•Proximidad
•Espacio
•Texturas
•Contrastes
Al hacer uso de estos elementos de una forma consciente y jerarquizada habrá una diferenciación en nuestra composición visual y así se trasmitirá un mensaje claro.
Yuxtaposiciones
Una palabra muy larga para un concepto sencillo. La yuxtaposición en la composición visual se refiere al vínculo que se crea entre varios objetos al tocarse, pero que no interfieren entre ellos.
En la naturaleza el principio de yuxtaposición es universal. Un fruto que cae de un árbol. La luna que es cortada por una nube. El cielo se llena de estrellas.
Paleta cromática en la composición visual
La paleta cromática es el conjunto de colores que suma toda la variedad de cierta tonalidad. El uso de la paleta genera unidad y cohesión en una composición visual. Puedes encontrar:
•Paletas monocromáticas
•Paletas análogas
•Paletas complementarias
•Colores pasteles
•Colores positivos
Para crear una paleta cromática debes seleccionar un color, luego identificar el opuesto y posteriormente crear tintas, tonos y sombras para cada color.
Balance visual
•Balance simétrico
•Balance asimétrico
•Balance radial
Proporción visual
El balance visual podría asemejarse a la proporción; sin embargo, este elemento de la composición visual se construye en la relación de tamaño entre los diferentes elementos que hay en un diseño. Aquí debes tener muy en cuenta el tamaño, la proporción y la división de los elementos, en cuanto a la construcción de unidad.
No existe una composición visual perfecta, si no una composición visual efectiva, es decir que logra transmitir lo que busca. Con los anteriores conceptos podrás explotar aún más tu creatividad y tener resultados increíbles.
¿Qué es la regla de los tercios?
La regla de los tercios es una guía de composición que coloca al sujeto en el tercio izquierdo o derecho de una imagen, lo que deja los otros dos tercios más despejados. Si bien hay otras formas de composición, por lo general, la regla de los tercios te lleva a hacer fotos atractivas y bien compuestas.
Si quieres dividir una foto, o incluso el visor de tu cámara, en nueve partes iguales usando líneas horizontales y verticales, eso forma tu cuadrícula de la regla de los tercios, una configuración que puedes seleccionar en la mayoría de las cámaras e incluso en tu teléfono.
¿Qué es una página web en HTML?
Una página HyperText Markup Language o HTML es un documento de texto con marcas. Forma parte del lenguaje utilizado para la elaboración de sitios web y hace referencia a los enlaces que conectan páginas web entre sí, dentro de un único sitio o varios.
Las marcas utilizadas en HTML sirven para etiquetar diferentes elementos dentro de un página web: imágenes, texto, videos, entre otros. Seguro ya has visto de qué te hablamos, pero te mostramos algunos ejemplos de etiquetas:
<head>
<title>
<body>
<section>
<video>
Otro ejemplo más claro del uso de etiquetas es el siguiente:
<h1>Cómo hacer una página web en HTML</h1>
Aquí, la etiqueta <h1> indica que se trata de un título.
Las etiquetas son vitales en la creación de páginas web en HTML, pues con ellas se aplicarán las pautas de diseño web que las conformarán, para darles un orden jerárquico. Con las etiquetas pueden realizarse diferentes indicaciones como el tipo de fuente, su tamaño y color, entre otros atributos.
1. Conoce los conceptos básicos de las páginas HTML
Antes de realizar tu página con códigos HTML, veamos algunos conceptos fundamentales, pues seguramente los aplicarás. No te preocupes, en este enlace encontrarás esos elementos explicados a detalle, para que los utilices durante todo tu proceso de programación.
Lo más relevante que debes conocer para comprender la estructura del HTML es lo siguiente:
• Las etiquetas deben tener apertura y cierre (<h1> texto </h1>). De lo contrario, el código no será reconocido por el sitio y los cambios que realices no se visualizarán. Siempre es importante revisar este aspecto, antes de poner un nuevo código, para evitar una posterior revisión exhaustiva en busca de un error.
•La estructura básica de una página web se compone por las etiquetas <html>, <head> y <body>. La primera indica el comienzo de la página; la segunda es la cabecera y contiene información descriptiva del sitio; y la tercera es la que abarca todos los elementos visibles dentro de la página.
•Los niveles de títulos pueden variar desde la etiqueta h1 hasta la h6.
•La etiqueta <p> corresponde a los párrafos.
•La etiqueta <a> representa los enlaces.
•Los metadatos contienen información sobre la página, como: estilos, buscadores, scripts, por mencionar algunos. Estos se conforman por las etiquetas <base>, <head>, <link>, <meta>, <style> y <title>.
Se calcula que hay alrededor de 142 etiquetas HTML; sin embargo, muchas de ellas ya han caído en desuso, sobre todo con la aparición de HTML5, la versión más reciente del código que incluye valiosas funciones nuevas.
2. Abre el editor de texto y comienza con una estructura básica
Si tienes una computadora Windows, podrás encontrar el editor de texto como «Bloc de notas»; en una computadora Mac puedes utilizar «TextEdit». Después de abrirlo, escribe una estructura base de HTML como la que te mostramos en la siguiente imagen:
Como principiante, también puedes usar los editores WYSIWYG, del inglés «what you see is what you get», los cuales sirven para visualizar directamente cómo se muestra la página conforme se va escribiendo el código HTML. Entre algunos programas de este tipo están:
Sublime Text: este editor de texto web está habilitado tanto para código HTML como CSS personalizado. Es fácil de usar y resalta las líneas de código en la sintaxis.
Notepad ++: un programa gratuito para redactar varios lenguajes como el HTML, CSS, JavaScript o PHP. Es nativo de Microsoft y es el básico de los programadores.
Visual Studio Code: disponible para todos los sistemas operativos, ofrece una versión gratuita y funciones de desarrollo personalizado.
Atom: un editor de código abierto para HTML, JavaScript, CSS y Node.js. Cuenta con auto completado inteligente y permite la instalación de paquetes.
Coda: exclusivo del sistema macOS, soporta múltiples lenguajes de programación; es sencillo de manejar y su sistema te permite guardar fragmentos de código.
3. Trabaja el texto en HTML
Trabajar el texto en HTML es uno de los pasos más sencillos. Aquí podrás utilizar las etiquetas de título que te mencionamos anteriormente (h1, h2, h3, h4, h5, h6). Su uso dependerá de la jerarquización que desees darle a cada título o subtítulo.
La etiqueta <p> marca los párrafos. Con ambos elementos ya puedes comenzar a codificar el texto de tu página.
4. Cambia el color del texto
Para cambiar el color del texto, escribe la etiqueta correspondiente escribiendo el color que prefieras entre comillas. Por ejemplo:
También con el código HTML puedes indicar los colores de fondo de tu sitio web; existen más de 16 millones de opciones con los sistemas RGB y HEX.
5. Da formato al texto
Para dar formato solo escribe el código como en el siguiente ejemplo:
Texto en negrita usa la etiqueta <b>texto</b>
Texto subrayado <u>texto</u>
Texto en cursivas o itálicas <i>texto</i>
6. Incluye un enlace a otra página
Si en el texto quieres incluir un enlace a otra página, debs utilizar la etiqueta:
Aquí debes añadir el URL que deseas enlazar. El atributo «blank» se utiliza para que el enlace que agregues se pueda abrir en una nueva pestaña o página. En caso de que quieras que la liga se abra en la misma página, escribe «self».
7. Agrega contenido multimedia
Imágenes
Un elemento vital en una página web son las imágenes. Para añadirlas en HTML debes usar la etiqueta <img>:
El atributo «src» es para abrir un URL para la imagen que quieres mostrar. El apartado «alt» permite visualizar un texto alterno descriptivo, en caso de que, por error de carga del sitio, la imagen no pueda verse. El texto en la imagen también sirve como posicionamiento en buscadores, como Google.
Los atributos «height» y «width» corresponden a las dimensiones que desees que tenga cada imagen, a lo alto y ancho.
Video
Hoy en día los videos son uno de los contenidos más cotizados de las páginas web. Para insertarlos en tu sitio coloca este código:
<video width="320" height=240" controls>
<source src="animación.mp4" type="video/mp4">
Tu navegador no soporta este formato de video
</video>
Donde «height» y «width» establecen el tamaño del video, «source» es la clave del video, «src» indica la URL del video o la ubicación del archivo y «type» sirve para señalar el formato de video. En caso de no poder reproducirlo, aparecerá la leyenda «Tu navegador no soporta este formato de video». También puedes insertar un video de YouTube con el código de inserción que ya te ofrece la plataforma.
Audio
Respecto a los audios o canciones, puedes agregar este código:
<audio controls>
<source src="cancion.mp3" type="audio/mp3">
Tu navegador no soporta este formato de audio
</audio>
En este caso «src» describe el nombre o ubicación del archivo y «type» sirve para indicar el formato del audio. Si no es posible reproducirlo aparecerá la frase «Tu navegador no soporta este formato de audio».
8. Cerciórate de que todas las etiquetas estén cerradas
Antes de guardar el documento y ver los resultados, es muy importante que cierres todas las etiquetas en la parte inferior del documento para que puedan visualizarse correctamente todos los códigos que utilizaste. Estos se cierran de la siguiente forma:
9. Guarda tu documento HTML
Para guardar el texto que creaste, recuerda cambiar el formato «.txt» por «.html». Para abrirlo y ver los resultados, da clic derecho sobre el archivo y selecciona el navegador de tu preferencia. Si percibes errores en el diseño de la página, deberás regresar al editor de texto o bloc de notas para revisar a detalle en dónde está el error.
¡Listo! Ahora ya sabes cómo crear una página web en HTML. Si utilizas esto, en conjunto con el código CSS, puedes optimizar la parte visual y con el lenguaje JavaScript puedes agregar elementos dinámicos para crear páginas interactivas para tus visitantes.
Suscribirse a:
Entradas (Atom)