Html y Css

• Ricardo
• Html y Css
• 13 Marzo 2022
• 13 Marzo 2022

La  idea es indicar como hacemos para compilar LESS y minicamos CSS desde terminal. Lo primero indicar que tenemos que tener instalado:

- lessc
- minify

Para instalar lessc y compilar less :

sudo apt-get install node-less

Aunque como bien dice en fuente de donde pille la informacion para instalarlo, la version que instalas no es la mas actualizada, podra actualizar la versionmas actualizada, a mi no me funciono y tampoco la solucion que indica.

Si quiere ver la version que tiene instalado de lessc :

lessc --version

No indica la version que tenemos instalada.

Si queremos generar el CSS, simplemente:

lessc fichero.less fichero.css

Y ya tendríamos el CSS del LESS que queramos.

Para instalar minify y minizar css:

sudo apt-get install minify

La verdad no dio problema y es sencillo utilizarlo.

minify -o nombre_salida fichero_minizar

Con esto es suficiente.

• Ricardo
• Html y Css
• 22 Septiembre 2021
• 01 Octubre 2021

Si queremos aprender html ,primero un poco teoria, suele ser la parte que menos gusta, por este motivo no me voy enrrollar mucho.

¿Que és y para que sirve html ?

HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet, son las siglas "Lenguaje de Marcado de Hipertexto" (ingles) se utiliza para estructurar y desplegar una página web y sus contenidos, con imagenes y todos sus componentes.

¿Por qué le llaman un lenguaje de etiquetas?

Porque HTML utiliza etiquetas de marca , que consisten en un corchete izquierdo( < ), (el símbolo "menor que''), al que sigue el nombre de la etiqueta y cerrado por un corchete derecho( > ).

 ¿Cuales son las etiquetas que hay en html5 ?

Realmente no se cuantas son, pero no son muchas. Se puedes consultar en wikipedia la pagina html5 que tiene un listado ellas.

 Un poco de práctica con videos.

Un video sencillo que enseña hace una pagina web

Video que encontre en el canal FalconMaster, os recomiendo visitar su blog , lo tiene muy bien organizado y muy bueno su contenido.

Otro video que podemos ir haciendo como practica, esta vez de la academia-x

Para empezar está bien...

• Ricardo
• Html y Css
• 29 Febrero 2016
• 15 Septiembre 2021

Ya hace más de un año , que estuve peleando con una web para que me cargara de forma correcta una fuente  ( ver fuente entypo ).  Ahora me volvío a tocar realizar una web que necesita muchas fuentes, hasta solo necesitaba ,una o dos fuentes como mucho, por este motivo no le presté demasiado información a la instrucción:

@font-face {

font-family: [NombreFuente]
scr: url(' ../fonts/[nombrefichero.eot]')

scr: url(' ../fonts/[nombrefichero.ttf]');
}

Realizamos una declaración de una fuente con dos ficheros como mínimo, el .eot que es el necesario para los navegadores como IE y .ttf para el resto de navegadores.

 Fuentes y Referencia para más información facilitada por nuestro amigo y compañero Pablo Arias.

¿Como utilizar cualquier fuente/tipografía en tu web ?

https://css-tricks.com/snippets/css/using-font-face/

• Ricardo
• Html y Css
• 18 Febrero 2015
• 22 Septiembre 2021

Problema al utilizar fuente entypo con ::before

Al utilizar la fuente entypo ( fuente iconos) en una web , no encontramos con el problema que se ve de distinta forma en varios navegadores y varios sistemas operativos.

Ubuntu - Mozilla

Mozilla - IOS

Chrome - IOS

Chrome - Windows

Chromium - Ubuntu

El codigo de html que utilizo es:

<div class="pie">
             <span class="direccion"></span>
Plaza Rosalía de Castro 9/11, 36350 Nigrán (Pontevedra) 
             <span class="telefono"></span>
986 365 414 
             <span class="email"></span>
Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.
<span class="web"></span>
www.plazafitness.es
</div> 

 En el fichero css que cargo en el fichero html, utilizo es siguiente código:

 /* Fonts */
@font-face {
   font-family:Entypo;
   src: url("../fonts/Entypo.eot") /* EOT file for IE */
}
@font-face {
   font-family: Entypo;
   src: url("../fonts/Entypo.ttf") /* TTF file for CSS3 browsers */
}

Esté código es el que utilizamos para poder cargar la fuente, que tenemos en un directorio llamado fonts.

• Ricardo
• Html y Css
• 22 Octubre 2014
• 22 Septiembre 2021

Como hacer un menud desplegable solo con html y css, de la mano Carlos Arturo de falconmasters.com, que tiene un blog muy bueno donde puedes aprender muchisimo.

http://www.falconmasters.com/tutoriales/como-hacer-un-menu-desplegable/

Muy bueno

• Olalla
• Html y Css
• 31 Marzo 2014
• 05 Marzo 2015

El diseño web adaptable o adaptativo (en inglés, Responsive Web Design) es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario.

Para aquellos que aun no entendierón lo que significa tener una web responsive , en el siguiente vídeo creo que los explica muy bien. ( vídeo de Web desarrolladores de google        )

QUE NO DEBEMOS HACER A LA HORA CREAR UNA WEB

• Utilizar sytle en la etiquetas html . No es consejable tener los estilos dentro del html , para eso tenemos el CSS.
• Utilizar demasiados contenedores y clases. Reducir al máximo los contenedores será mas fácil.
• No utilizar px , utilizar %.

QUE DEBEMOS HACER SI QUEREMOS UNA WEB RESPONSIVE

• Diseñar la web de pantalla pequeñas grandes.
• Identificar los dispositivos, sistemas operativos, y resoluciones pantalla más habituales.
• Un html lo más semántico posible, para poder adaptarlo mejor.
• Fuentes con tamaños con %, definir un tamaño y luego el resto con %

CSS y HTML PARA HACER QUE SEA RESPONSIVE

Algunos cambios en nuestro código.

AÑADIR A NUESTRO HTML .

Entre la <head></head> añadir la meta-etiqueta :

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Con esta meta-etiqueta indicamos al navegador web que el valor del zoom que queremos que use. Siendo 1.0 una visualización sin Zoom y 2.0 una ampliación de toda la web al doble de su tamaño.

Hay dos tipicas configuraciones posibles de está etiqueta.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Recomenda cuando tenemos una web totalmente adaptada a moviles

<meta name="viewport" content="width=[Pixeles del min. ancho para ver bien la web]" />

Cuando no está adaptada completamente a moviles y le recomendamos una medida para ver.

CAMBIOS EN CSS PARA HACER RESPONSIVE.

Realmente la mayor parte del curre está en el css , si tenemos un html limpio y sencillo.

Lo primero que debemos tener claro es:

- Si deseamos que sea escalable o que tengamos fijo medidas entre resoluciones pantalla, o ambos.

Luego debemos crear las media queries , son sentencias que nos permite hacer declaraciones de etiquetas, clases, id  ,... para las distintas pantallas.

Luego las media queries para adaptar a internet explorer, aunque personalmente yo no las utilizo, es la única forma que encontré para protestar por la mala compatibilidad que tiene este navegador.

Ejemplo @media screen

@media screen and ([CONDICION]){}

Pero para aquellos que queráis adaptar vuestra web a ese navegador existe una librería para ello, css3-mediaqueries-js, es una librería javascript que simplemente debemos añadir para Internet Explorer de versiones anteriores a la 9.

En la que bastaría con añadir al html en el <head>

<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->

Los 3 grupos de resoluciones básicos dentro al hacer design responsive:

• Grandes pantallas, donde nuestra web cabe y sobra incluso espacio para visualizarla.
• Pequeñas o antiguas pantallas, donde nuestra web, para el ancho marcado no cabe y nos aparece la odiosa barra inferior (que nadie usa) para terminar de ver el contenido.
• Pantallas móviles, donde el espacio es tan pequeño que la información no se lee correctamente con el diseño global.

FUENTES:

Tutorial IKhuerta : Transformar una Web a Responsive

• Olalla
• Html y Css
• 24 Diciembre 2013
• 24 Diciembre 2013

Hace muy poco tiempo que empecé a utilizar inkscape, ya que no soy diseñador pero de vez cuando necesito hacer pequeñas cosas de diseñador, ya que los diseñadores que subcontracto están bastante liados para hacer pequeños trabajos, hasta ahora me estaba arreglando com Gimp, pero como veo que los diseñadores buenos utilizan programas de gráficos vectoriales, me metó en el mundo diseño grafico vectorial.

Me encuentro que es un mundo que con creatividad el potencial es impresionante. Empiezo introducirme en progrmacion con SVG, que se incluido de forma nativa en la mayoria de los navegadores, como Chrome, Safari e internet explorer 9, siendo un resultado de una combinación de dos lenguajes propuestos a W3C (VML y PGML).

En W3C encuentro todo un tuctorial como utilizar SVG en la WEB.En la wiki podemos encontrar también mucha información y como siempre muy bien organizada de esta especificación para describir gráficos vectoriales.

Con este lenguaje (especificación) dejamos pensar que las imagenes son estáticas y crear imagenes a traves de código, pudiendo darle efectos de movimiento,cambio con interacción del internauta.

Más referencias:

Un blog que hace un pequeño ejemplo de un circulo que incrementa utilizando javascript+SVG+html. En W3C tiene ejemplo SVG donde podemos cambiar el código ver como queda.

Otras cosas: Joomla no lo admite.

Intento subir imagenes SVG a nuestra galería para que podamos reutilizar las...
En joomla las extensiones svg, no las soporta, incluso no las soporta añadiendo en Configuración Global de la parte administrador, nos genera un error al intentar subir el fichero.

Aunque la solución puede ser sencilla (como subir el fichero directamente con ftp), pienso que debo buscar información.
Según parece este ataque es debilidad en software ( en este caso php), pero bueno si estamos subiendo nosotros el fichero no es un ataque, aunque nunca se sabe.
Fichero en pdf que habla de este ataque.
Veo que el foro joomla spanish algunos ya preguntaron por ese error, pero no veo que alguien contestará algo coherente.
¡ Seguiré averiguando !...

• Olalla
• Html y Css
• 24 Diciembre 2013
• 24 Diciembre 2013

Hace tiempo que conocía la utilización de esta técnica, aunque no sabía muy bien como y tampoco que la conicía con el nombre SPRITES.

En que consiste la tecnica SPRITES.

Es utilizar una imagen para generar varias imagenes en nuestra web, una imagen que puede contener varias imagenes, varios colores ... , así de esta manera, conseguimos que la web pesé menos y sea más rápida a la hora de cargar.

Ya que hace que el navegador del usuario (cliente) no tenga que cargar varias imagenes a la hora de ver una web, simplemente con una imagen y con instrucciones de css muestra la parte de la imagen que nos interesa.

Como utilizar una imagen dentro de otra.

Si en nuestra hoja de estilos (css) creamos una clase o contenedor (ID) , indicando ancho y alto de la imagen que queremos visualizar, indicando la situacion en la imagen con la coordenadas x y

Buscando información encuentro un lugar (Ref2) que si tenemos varias imagenes y queremos utilizar la técnica SPRITERS , se la subimos y este nos da:
Una imagen con la tres que subimos.
Nos indica la posicion de las tres imagenes.

Puede ser una herramienta util y interesante para ahorrarnos tiempo. Yo hice la prueba con tres iconos separados que tenía de redes y email.

Y el resultado fue la imagen anterior y el siguiente código.
Para ver imagen de email: background-position: 0px 0px; siendo el primero 0px la coordenada X
Para ver imagen de facebook:background-position: 0px -60px;
Para ver imagen de gmail:background-position: 0px -120px;

Ejemplo (Ref1):
#name
{
width: 60px ; /*ancho de la imagen (contenedor)
height: 60px ;/*alto de la imagen (contenedor)
background:url('url de imagen') 0px -60px no-repeat
}

En la ultima instrucción lo que indicamos con -0px -60px son la coordenadas (X) y (Y) indicando donde se encuentra la parte de la imagen queremos mostrar, en este caso el icono de facebook.