Html y Css

html-css

Html no es un lenguaje de programación, es un lenguaje de marcas de hipertexto, para la creación de paginas web.El lenguaje HTML se basa en la referenciación. Al añadir un elemento externo a la página (imagen, vídeo, script, etc.), este no se incrusta directamente en el código de la página, sino que se hace una referencia a la ubicación de dicho elemento mediante texto. HTML es un lenguaje que permita que cualquier página web, pueda ser interpretada de la misma forma por cualquier navegadores web.

CSS hojas de estilo en cascada hacen referencia a un lenguaje de hojas de estilos usado para describir la presentación semántica (el aspecto y formato) de un documento escrito en lenguaje de marcas. Su aplicación más común es dar estilo a páginas webs escritas en lenguaje HTML y XHTML, pero también puede ser aplicado a cualquier tipo de documentos XML, incluyendo SVG y XUL.

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado

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/

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado

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-Ubuntu

 

Mozilla - IOS

 Mozilla-IOS

Chrome - IOS

 

Chrome - Windows

 

Chromium - Ubuntu

Ubuntu-Chromium

 

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.

Ahora os muestro el código que utilizo para div y span que utilizamos

span{
    font-family: Entypo;
    font-size: 26px;
    font-weight: normal;
    font-style: normal;
    color:white;
    margin: 0px 5px 0px 25px;
}
span.direccion:before {
 content: '\2302';
}
span.telefono:before {
 content: '\1F4DE';
}
span.email:before {
 content: '\2709';
}
span.web:before {
 content: '\1F30E';
 
}  

" Creo que debo ponerme al día en html y css , ya que lo necesito "

La cuestión es que el código content lo encuentro en el siguiente link.

El problema surge que se ven bien los iconos de la casa y correo pero los del telefono no se ve bien en todos los navegadores y en todos sistemas operativos.

Como los diseñadores y los propietarios de las web no tienen la culpa de falta de conocimiento o de que no se respeten los navegadores no respeten los estandares, creo que tengo que buscar otra solución

Esté es el motivo de está entrada para poder publicar el problema y haber si hay alguien que me puede "echar un cabo".

Pruebo con otra fuente similar ICOMOON

Realizo los cambios necesarios en css y html , los cambios que yo creo que debería hacer... pero sigue sin funcionar, y lo más simpático es que los icono se muestran igualmente.

Ahora encuentro app de icomoon donde nos indica el código a utilizar, pero sigue igual .

Buceando un poco más en red, encuentro un proyecto icomoon en Github , donde podemos encontrar las fuentes en varios formatos.

En formatos svg, pdf,... para programas como Photoshop , ilustraitor... interesante!!!

"Tendré que informarme mejor como funciona para poder utilizar fuentes de iconos en las Web"

 

 

UTILIZAR FUENTE COMO SVG

Pensando soluciones, se me ocurre descargar los iconos en fichero svg, consigo los ficheros separado por cada fuente.

La subo a la carpeta imagenes con los nombre globe.svg y phone.svg, donde busca la forma maquetar html y css para poder mostrarlo.

El objetivo es que esté icono tome la medida de la fuente en cada resolución de cada pantalla.

Por lo que pone una medida la capa contendora no creo que sea lo apropiado...

 

 Más lugares dodne busco información.

Sitio donde me explican bien como utilizar unicode

http://norfipc.com/inf/insertar-caracteres-especiales-simbolos-unicode.html

 

Link a página de pruebas de fuentes:

http://ayuda.svigo.es/htmlCss/PruebasFuentes/

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado

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.

 ataquetipoxss-artic3-html

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 !...

 

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado

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

iconos-sms-artic-cssBuscando 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.

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado

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

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado

Toda esta información la saco de CSS3 PIE

CSS3 tiene algunas características de estilo increíblemente poderesosas como: esquinas redondeas, degradados en rellenos, sombras suaves... Estas características son las que más le gustan a los grandes diseñadores, que antes de CSS3 solo se podían hacer con grande librerías de JavaScript,bastante complejas a la hora de utilizar.

Con CSS3 esa dificultad se acaba, ya que podemos utilizar atributos muy sencillas, sin tener que conocer a utilizar esas librerías complejas, pero el caso es que hasta la versión 9 de Internet Explorer no acepto estos atributos.

Por eso conocí CSS3 PIE que es (PIE) Progresivo Internet Explorer, donde se trata de un proceso adjunto que permite los navegadores IE, podamos utilizar algunas de la características anteriores y se vean perfectamente en IE.

CSS3PIE-artic-html-css

Degradado

  1. background: -moz-linear-gradient(left, tomato, cyan, lightgreen);/* F 3.6+ */
  2. background: -ms-linear-gradient(left, tomato, cyan, lightgreen);/* IExplorer 10+ */
  3. background: -webkit-linear-gradient(left, tomato, cyan, lightgreen);/* FF 3.6+ */
  4. background: -o-linear-gradient(left, tomato, cyan, lightgreen);/* Safari 5.1+, Chrome 10+ */
  5. background: linear-gradient(left, tomato, cyan, lightgreen);/* ESTILO ESTANDAR */

Para los antiguos navegadores como internet explorer 6 + utilizaremos filtros, algo asi:

  1. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#000000’, endColorstr=’#ffffff’);  /* IE6 & IE7 */ /*NO FUNCIONA*/
  2. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=’#000000’, endColorstr=’#ffffff’)";  /* IE8+ */

Parametros de filter:

     - GradientType : 1 significa horizontal y 0 vertical.

     - StartColorStrUn valor de cadena que representa el color inicial. Para nuestro gradiente empezamos con negro (# 000000) y terminamos con el azul (# 0000FF).

     - EndColorStrUna cadena que representa el color final para nuestro degradado.