En el siguiente vídeo se explica la evolución de los prototipos de baja a alta fidelidad, se muestran los principales atributos estéticos de los elementos de una página web (colores, áreas, cajas de contenido, imágenes, tipografías, menús y enlaces, iconos y elementos decorativos), se comentan algunos aspectos sobre el software de diseño visual (trabajar en capas, medir, editar imágenes), se ofrecen cinco consejos antes de empezar a diseñar (busca inspiración, paleta básica de colores, busca recursos gráficos, define las tipografías, recopila el material necesario), y cinco consejos para empezar a diseñar (trabaja en capas, de general a particular, no abuses de ciertos elementos, optimiza el tiempo, organización).
viernes, 27 de noviembre de 2015
Prototipos visuales de alta fidelidad
En el vídeo Prototipado: wireframes, mockups y prototipos se te ha explicado que existen diferentes tipos de prototipos, de baja y alta fidelidad.
En el siguiente vídeo se explica la evolución de los prototipos de baja a alta fidelidad, se muestran los principales atributos estéticos de los elementos de una página web (colores, áreas, cajas de contenido, imágenes, tipografías, menús y enlaces, iconos y elementos decorativos), se comentan algunos aspectos sobre el software de diseño visual (trabajar en capas, medir, editar imágenes), se ofrecen cinco consejos antes de empezar a diseñar (busca inspiración, paleta básica de colores, busca recursos gráficos, define las tipografías, recopila el material necesario), y cinco consejos para empezar a diseñar (trabaja en capas, de general a particular, no abuses de ciertos elementos, optimiza el tiempo, organización).
En el siguiente vídeo se explica la evolución de los prototipos de baja a alta fidelidad, se muestran los principales atributos estéticos de los elementos de una página web (colores, áreas, cajas de contenido, imágenes, tipografías, menús y enlaces, iconos y elementos decorativos), se comentan algunos aspectos sobre el software de diseño visual (trabajar en capas, medir, editar imágenes), se ofrecen cinco consejos antes de empezar a diseñar (busca inspiración, paleta básica de colores, busca recursos gráficos, define las tipografías, recopila el material necesario), y cinco consejos para empezar a diseñar (trabaja en capas, de general a particular, no abuses de ciertos elementos, optimiza el tiempo, organización).
HTML: tres errores típicos
En el siguiente vídeo se muestran tres errores (confusiones o malas prácticas) que hasta gente que lleva muchos años creando páginas web comete de vez en cuando:
Después de ver este vídeo esperamos que tú no cometas estos errores.
- Saltos de línea.
- Espacios en blanco.
- Referencias de caracteres (caracteres especiales).
Después de ver este vídeo esperamos que tú no cometas estos errores.
HTML: problemas con los editores
En el siguiente vídeo se muestran algunos problemas que se pueden tener en Microsoft Windows con el editor Bloc de Notas y en Apple Macintosh con el editor TextEdit.
HTML: enlaces
La Web se basa en dos conceptos que han sido explicados en el primer módulo de este curso: el hipertexto y la hipermedia.
El hipertexto permite crear, agregar, enlazar y compartir información con una estructura no secuencial que proviene de diversas fuentes por medio de enlaces. Los enlaces también se conocen como hipervínculos, vínculos o ligas (en Sudamérica). Y en inglés se emplean los términos hyperlink y link.
En el siguiente vídeo se explica qué es el hipertexto, los tipos de enlaces que se pueden crear (intradocumental, extradocumental) en las páginas web, el concepto de URL (Uniform Resource Locator) que ya debes conocer y se proporcionan algunos consejos para crear enlaces correctos.
El hipertexto permite crear, agregar, enlazar y compartir información con una estructura no secuencial que proviene de diversas fuentes por medio de enlaces. Los enlaces también se conocen como hipervínculos, vínculos o ligas (en Sudamérica). Y en inglés se emplean los términos hyperlink y link.
En el siguiente vídeo se explica qué es el hipertexto, los tipos de enlaces que se pueden crear (intradocumental, extradocumental) en las páginas web, el concepto de URL (Uniform Resource Locator) que ya debes conocer y se proporcionan algunos consejos para crear enlaces correctos.
HTML: listas
En el siguiente vídeo se explican los diferentes tipos de listas que existen en HTML (ul, ol, dl) y la creación de listas anidadas.
HTML: conceptos básicos
Los comienzos siempre son difíciles... ¿Qué programa necesito para escribir una página web? ¿Por dónde empiezo? ¿Qué pasa si me equivoco? ¿Puedo romper algo?
Poco a poco, antes de correr hay que aprender a caminar.
En el siguiente vídeo se explica que HTML se emplea únicamente para definir la estructura y el contenido o información de una página web, la presentación visual no se define con HTML (esto es muy importante que lo recuerdes, no lo olvides). También se muestra la estructura de un elemento (etiqueta) y se explican las etiquetas básicas (html, head, title, body, h1, h2, h3, h4, h5, h6, p, strong, em).
Nota: Si la presentación visual no se define con HTML, ¿entonces con qué se define? Se define con CSS (Cascading Style Sheets), y no te preocupes, eso te lo explicaremos más adelante. Ahora, recuerda, poco a poco.
En el siguiente vídeo se explican las reglas básicas que se deben aplicar en la creación de una página web:
También se dan algunas recomendaciones sobre los caracteres válidos en los nombres de los ficheros.
Poco a poco, antes de correr hay que aprender a caminar.
En el siguiente vídeo se explica que HTML se emplea únicamente para definir la estructura y el contenido o información de una página web, la presentación visual no se define con HTML (esto es muy importante que lo recuerdes, no lo olvides). También se muestra la estructura de un elemento (etiqueta) y se explican las etiquetas básicas (html, head, title, body, h1, h2, h3, h4, h5, h6, p, strong, em).
Nota: Si la presentación visual no se define con HTML, ¿entonces con qué se define? Se define con CSS (Cascading Style Sheets), y no te preocupes, eso te lo explicaremos más adelante. Ahora, recuerda, poco a poco.
- Etiquetas siempre cerradas.
- Documentos bien formados.
- Etiquetas en minúsculas.
- Valores de los atributos siempre entre comillas.
También se dan algunas recomendaciones sobre los caracteres válidos en los nombres de los ficheros.
lunes, 23 de noviembre de 2015
El lenguaje HTML
HTML son las siglas de HyperText Markup Language, que puede traducirse como lenguaje de marcas o marcado de hipertexto.
El lenguaje HTML se emplea para crear las páginas web. Es muy fácil ver el código HTML de una página web, la opción exacta cambia de un navegador a otro y también puede cambiar de una versión a otra de un mismo navegador, pero suelen tener un nombre similar:
El lenguaje HTML tiene muchas etiquetas, pero aplicando el Principio de Pareto (la regla del 80-20), sólo hay que conocer bien el 20% de las etiquetas, ya que con ellas se crea el 80% del contenido de las páginas web. Las etiquetas más importantes son:
En el siguiente vídeo se explica la historia del lenguaje HTML durante sus primeros años y su relación con otros lenguajes, como SGML, XML, HTML+ y HTML5. Además, sabrás por qué el W3C abandonó el desarrollo de XHTML y apostó por HTML5.
El 28 de octubre de 2014 el W3C publicó HTML5. A vocabulary and associated APIs for HTML and XHTML. W3C Recommendation 28 October 2014, lo que supone que HTML5 ya tiene el rango de estándar.
¿Significa esto que ya se puede utilizar HTML5 sin problemas? No, algo ha cambiado, ya tenemos una versión estable de HTML5, pero eso no significa que de un día para otro todos los navegadores web lo soportarán mágicamente. Los navegadores web actuales, y no digamos los que tienen varios años, no soportan muchas cosas de HTML5, así que se debe utilizar con precaución.
Si quieres saber algo más sobre la publicación de HTML5 consulta la nota de prensa del W3C HTML5 is a W3C Recommendation.
Importante: el material educativo de este curso fue preparado antes de la publicación de HTML5 como estándar, por lo que a veces se puede indicar que HTML5 no es un estándar.
El lenguaje HTML se emplea para crear las páginas web. Es muy fácil ver el código HTML de una página web, la opción exacta cambia de un navegador a otro y también puede cambiar de una versión a otra de un mismo navegador, pero suelen tener un nombre similar:
- Ver código fuente de la página en Google Chrome y Mozilla Firefox.
- Ver código fuente en Internet Explorer y Opera.
El lenguaje HTML tiene muchas etiquetas, pero aplicando el Principio de Pareto (la regla del 80-20), sólo hay que conocer bien el 20% de las etiquetas, ya que con ellas se crea el 80% del contenido de las páginas web. Las etiquetas más importantes son:
- html
- head
- meta
- title
- link
- style
- script
- body
- p
- a
- strong
- em
- img
- form
- input
- select
- textarea
- table
- tr
- th
- td
- blockquote
- hr
- ul
- ol
- li
- div
- span
Historia de HTML
El lenguaje HTML, al igual que los lenguajes o idiomas que hablan las personas, evoluciona con el tiempo.En el siguiente vídeo se explica la historia del lenguaje HTML durante sus primeros años y su relación con otros lenguajes, como SGML, XML, HTML+ y HTML5. Además, sabrás por qué el W3C abandonó el desarrollo de XHTML y apostó por HTML5.
Sobre HTML5
¿Significa esto que ya se puede utilizar HTML5 sin problemas? No, algo ha cambiado, ya tenemos una versión estable de HTML5, pero eso no significa que de un día para otro todos los navegadores web lo soportarán mágicamente. Los navegadores web actuales, y no digamos los que tienen varios años, no soportan muchas cosas de HTML5, así que se debe utilizar con precaución.
Si quieres saber algo más sobre la publicación de HTML5 consulta la nota de prensa del W3C HTML5 is a W3C Recommendation.
Importante: el material educativo de este curso fue preparado antes de la publicación de HTML5 como estándar, por lo que a veces se puede indicar que HTML5 no es un estándar.
El desarrollo Web
En el vídeo El desarrollo web se han mostrado las principales fases del desarrollo de un sitio web. En la segunda fase, "Planificación", aparecían los hitos "Wireframes" y "Revisión Wireframes".
En diseño web, un wireframe (en español se puede traducir por esquema de la página o plano de la pantalla, aunque no se suelen usar estos términos), es un dibujo o esquema que representa el esqueleto o estructura visual de un sitio web (un conjunto de páginas web) o de una página web concreta. El wireframe suele carecer de aspectos visuales como estilo tipográfico, colores e imágenes, ya que su propósito es servir de apoyo para discutir el contenido, funcionalidad y comportamiento de un sitio web o de una página web.
En el siguiente vídeo se explican las diferencias que existen entre los wireframes, los mockups y los prototipos, se explica la importancia de prototipar una aplicación o sitio web antes de implementarla y se muestran los diferentes tipos de diagramas que se emplean para representar la navegación, la estructura y el funcionamiento de una aplicación o sitio web.
¿Cómo funciona el DNS?
El siguiente vídeo es un vídeo oficial de red.es, "una entidad pública que trabaja para que la sociedad española aproveche al máximo el potencial de Internet y las nuevas tecnologías". Este vídeo puede ser un poco difícil de entender porque no contiene ninguna explicación, es simplemente una animación, pero con lo que te hemos explicado en Las direcciones IP y el sistema de nombres de dominio seguro que lo podrás entender correctamente.
La idea principal que transmite este vídeo es que sólo transcurren unas milésimas de segundo desde que el usuario aprieta el botón para navegar a una dirección web hasta que se resuelve la dirección IP asociada a un nombre de dominio y se solicita el recurso asociado a la dirección web.
La idea principal que transmite este vídeo es que sólo transcurren unas milésimas de segundo desde que el usuario aprieta el botón para navegar a una dirección web hasta que se resuelve la dirección IP asociada a un nombre de dominio y se solicita el recurso asociado a la dirección web.
jueves, 19 de noviembre de 2015
Creación de una página web con Blogger
Estructura de un blog
Antes de crear tu primer blog te vamos a explicar la estructura básica de un blog. Como verás, un blog no es una página web muy compleja.Después de ver este vídeo ya podrás crear tu primer blog en Blogger.
Configuración básica
Edición básica de una entrada
En este vídeo te explicamos lo más importante que debes saber hacer cuando edites una entrada en Blogger.Edición avanzada de una entrada
¿Quieres crear un enlace en una entrada? ¿Quieres insertar una imagen o un vídeo? En el siguiente vídeo te explicamos cómo hacerlo.Además, también te mostramos cómo puedes asignar etiquetas a tus entradas. En el vídeo de la siguiente lección te explicaremos cómo las puedes usar para que los visitantes de tu blog puedan navegar por las entradas a través de las eitquetas.
Diseño y gadgets
¿Ya no te gusta el diseño de tu blog? ¿Te has cansado de los colores que tiene? No te preocupes, en cualquier momento puedes cambiar la presentación visual de tu blog sin perder nada de lo que has escrito. En este vídeo te mostramos lo sencillo que es.Además, también te mostramos cómo puedes añadir un gadget para ampliar las posibilidades de tu blog. Por ejemplo, te vamos a mostrar cómo añadir un gadget para mostrar tus etiquetas.
Suscribirse a:
Entradas (Atom)