Categoría: Diseño Web

  • Bootstrap 5: Colores, fuentes y tipografías

    En esta entrada voy a  repasar cómo se pueden usar las características de Bootstrap 5: Colores, fuentes y tipografías. Bootstrap usa la siguiente configuración predeterminada: ENCABEZADOS Los encabezados disponibles en HTML son h1, h2, h3, h4, h5 y h6, y como ya sabemos se usan para titulares. En Bootstrap 5 tienen un diseño un poco…

  • Técnicas para mejorar la usabilidad web

    Uno de los aspectos más ‘invisibles’ pero a la vez importantes de una web es su usabilidad, es decir, intentar que el máximo de clientes potenciales que llegan a la web cumplan con sus objetivos. Cuando digo que la usabilidad es ‘invisible’ es porque el diseño es algo palpable, el posicionamiento y publicidad también es…

  • Desarrollador framework angular 6: Inicio

    El desarrollo de aplicaciones con javascript siempre son complejas ya que su código fuente suele ser bastante complejo, pero se usa para todo tipo de procesos: Manipular la interfaz del usuario, conectar con el servidor, validaciones, etc. Y en muchas ocasiones terminamos con códigos demasiado complejos para que otra persona pueda entenderlos de forma rápida.…

  • Usabilidad de una página web

    Cuando desarrollamos una página web o en realidad cualquier aplicación, herramienta, utensilio… cualquier cosa, uno de los objetivos que debería ser innegociable es que debería ser usable para la gran mayoría de las personas que lo vayan a usar, es lo que se conoce como usabilidad. Usabilidad en el desarrollo web En cuanto al desarrollo…

  • HTML5: Elementos estructurales

    Los elementos estructurales de HTML5 están cobrando una relevancia cada vez mayor, y no solo para el diseño web, sino que para poder ganar posiciones en los buscadores son cada vez más importantes. Estos motores cada vez son más inteligentes, pero necesitan entender la relevancia del contenido y les podemos ayudar etiquetando las cosas correctamente.…

  • Bootstrap: jumbotron, botones y alertas

    Voy a seguir con el repaso a Boostrap tocando puntos tan importante para el diseño de una web como el desarrollo de una cabecera con Jumbotron, menús, botones y alertas. JUMBOTRON El Jumbotron es una clase que nos facilita a la hora de crear bloques con un fondo diferente, pensados para llamar la atención y…

  • Bootstrap: tablas responsive e imágenes

    Vamos a ver cómo podemos obtener unos diseños responsive de tablas e imágenes muy interesantes con un poco de código fuente y Bootstrap. TABLAS CON BOOTSTRAP En primer lugar hay que repasar los componentes básicos de una tabla: table: Es la etiqueta que engloba la tabla. tr: hace referencia a las filas. td: hace referencia…

  • Bootstrap: inicio

    Vamos a ver como podemos iniciarnos en el diseño web con Bootstrap. ¿QUE ES? Bootstrap es un framework de front-end (parte visible de una web o aplicación) gratuito  y que su auge consiste en que permite un desarrollo web más rápido y fácil, porque te permite diseñar siguiendo una guía de etiquetas HTML que una…

  • Dar estilos al texto con CSS

    Aunque es cierto que una imagen o un vídeo ayuda (y mucho) a la conversión, no es menos cierto que la materia prima básica de cualquier Web son los textos, ya que se usan para que el cliente entienda quienes somos, que vendemos y sobre todo que queremos de él. Por eso vamos a repasar…

  • Crear formularios con HTML5

    Con la aparición del HTML5 se han mejorado muchas cosas que antes eran mucho más complejas, como hemos visto introducir un vídeo ahora es muy sencillo. Pero desde mi punto de vista una de las tareas que más se han facilitado con el HTML5 es la creación de formularios, antes era muy complejo controlar que…

  • Insertar Audio, Video y elementos CANVAS con HTML5

    Los que venimos desarrollando webs desde hace mucho tiempo sabemos lo complejo que era insertar vídeos en nuestro diseño. Con HTML5 se han desarrollado etiquetas que facilitan este trabajo mucho, y no solo para vídeos sino para audios, y para dibujar gráficos se ha creado una etiqueta especifica que con un conocimiento alto de javascript…

  • Atributos HTML5: reversed, data, ping, download, contenteditable, spellcheck y draggable

    En HTML5 los atributos  se usan para informar del tipo de contenidos del elemento a los que se aplican, en esta entrada voy a repasar algunos de ellos. Cambiar el orden de una lista En primer lugar vamos a ver el atributo reversed, es muy fácil de usar pero puede ahorrarte muchas horas de trabajo.…

  • Etiquetas HTML5: time, dfn, cite, small y strong

    En esta entrada voy a repasar los elementos de fecha (time), definición (dfn), para citas (cite), letra pequeña (small) y letra fuerte (strong). Estos elementos permiten destacar un texto para los clientes y para los buscadores, siendo importante que estos últimos sepan que estamos mostrando. Marcar fecha con <time> Si introducimos una fecha u hora…

  • Usar devTools para mejorar el rendimiento

    El marketing online está muy condicionado por las condiciones que implanta Google, y este está obsesionado con el rendimiento y la usabilidad de las webs, y precisamente las herramientas más conocidas (WordPress, Prestashop, etc) son cada vez más fáciles de usar pero se descuida el rendimiento. Por esta obsesión, el propio Google nos ofrece dentro…

  • Consola de herramientas para desarrolladores de Google Chrome

    La consola de devTools o herramientas para desarrolladores de Google Chrome es una herramienta para poder hacer pruebas antes de crear nuestro código fuente, imagina que queremos recoger y cambiar el color de letra de un id concreto cuando pinchamos en un enlace con jQuery, podemos saber si nuestra función devuelve el valor esperado antes…

  • Editar html y css con DevTools

    Con la herramienta devTools de Google Chorme podemos configurar estilos y html, hacer pruebas antes de subirlo al servidor final o depurar el código fuente para corregir errores. Vamos a ver las posibilidades de esta herramienta y de su pestaña: Elements. Para ello abre el navegador Chrome -> pincha en configuraciones (3 puntos verticales arriba…

  • ¿Qué es y porque usar DevTools?

    Cuando estamos desarrollando una web, debemos plantearnos que esa web tiene que ser amigable para los usuarios, debemos pensar no solo en la vistosidad de nuestra web final, sino tenemos que plantearnos como se usara y que problemas pueden darse. Para llevar un control de nuestros desarrollos Google ha creado un conjunto de herramientas conocidas…

  • Encabezado HTML: metadatos, title, css, etc.

    El encabezado HTML (<head>) contiene metadatos sobre el contenido de la página web, se establecen normas sobre su comportamiento, la presentación de la información, se define la relación con otros elementos no visibles como las hojas de estilo (CSS), el javascript, etc. La importancia del TITLE Una página web esta formada por diferentes páginas independientes,…

  • Mi primera página web con HTML 5

    Para crear tú primera página web con HTML 5 solo se necesitan 2 cosas: 1 procesador de textos (Bloc de notas, sublimetext, etc) y conocimientos sobre el lenguaje de marcado HTML (HyperText Markup Language). El fichero El formato estándar de un fichero de una página web es un texto sin formato (esto hace referencia a…

  • Etiquetas html5

    Aunque las nuevas etiquetas de HTML5 ya están con nosotros hace unos añitos, voy a realizar un breve repaso a las mismas, explicando para que sirven y cuando deberíamos usarlas. Esta evolución pretende convertir la web en más semántica, más lógica y sencilla de entender… no solo para los humanos sino para los robots de…