hojas de estilos archivos - Instituto FOC | Informática ONLINE | FP Informática ONLINE

Especialistas en Informática

Matricúlate

DAM

Desarrollo de Aplicaciones Multiplataforma

DAW

Desarrollo de Aplicaciones Web

ASIR

Administración de Sistemas Informáticos en Red

DevNet Associate

350 €

Fundamentos de programación en Python

385 €

Fundamentos de JavaScript

200 €

Fundamentos de Io T: Big Data & Analisis

250 €

Fundamentos de IoT: conectando cosas

250 €

Introducción al IoT

100 €

CCNA Cybersecurity Operations

350 €

Cybersecurity Essentials

150 €

Introduction to Cybersecurity

75 €

Etiqueta: hojas de estilos

Los desarrolladores siguen prefiriendo Linux.

Posted on by Instituto Fomento Ocupacional

Aunque Microsoft ha dado un gran salto en el intento de agradar a los desarrolladores, con el lanzamiento de Windows 10.

Otros sistemas de Microsoft no gustaron mucho a los desarrolladores, pero Windows 10 con la incorporación de subsistemas Linux, empieza a tener cada vez más seguidores.

 

Pero Linux sigue teniendo mucho que decir en cuanto a su uso como plataforma de desarrollo de software y mantiene una serie de atractivos que le hacen retener a los desarrolladores.

Para realizar una comparación justa en igualdad de condiciones, necesitamos de la colaboración de los grandes del software que se niegan a portar o editar su software para Linux.

En cualquier caso la plataforma del pingüino mantiene una serie de ventajas muy visibles que le permiten mantener gran número de seguidores entre los desarrolladores de software.

Bajo mi punto de vista las ventajas de Linux son:

  • Es libre y gratuito, lo que le aporta flexibilidad y coste 0,00€ en licencias.
  • Recursos, permite la optimización del sistema para la compilación o para las herramientas de desarrollo que uses.
  • Es sencillo, aunque tiene fama de complejo, no es complicado de usar y gestionar.
  • Tiene soporte para múltiples lenguajes de programación como C, C++,PHP, HTML, CSS, JavaScript, Perl, Java, Python, etc.

Pero seguro que los desarrolladores que siguen en Linux tienen muchas más razones para trabajar con Linux, en el desarrollo de sus proyectos.

Entre por los alumnos del certificado de profesionalidad IFCD0210-Desarrollo de Aplicaciones con Tecnologías Web, y el IFCD0110 Confección y publicación de páginas web, tenemos partidarios de uno y otro sistema.

¿Cómo medir la velocidad de carga de mi página web?

Posted on by Instituto Fomento Ocupacional

Para conseguir una buena experiencia entre los usuarios de nuestra página web, tenemos que conseguir que la carga de la página sea lo más rápida posible y conseguir que el tiempo de respuesta sea adecuado. Estas técnicas para la mejora de la experiencia de los usuarios web, son estudiadas por los alumnos del certificado de profesionalidad IFCD0210-Desarrollo de Aplicaciones con Tecnologías Web, y el IFCD0110 Confección y publicación de páginas web.

Para saber qué velocidad de carga tiene nuestra web y su tiempo de respuesta podemos usar dos herramientas gratuitas.

  • Para medir la velocidad, la herramienta de Google denominada PageSpeeds Insights.
  • Para medir el tiempo de carga web, utilizaremos Pingdom.

La herramienta PageSpeeds Insights analiza la página web que le indiquemos, ofreciendo todo tipo de destalles con respecto a las mejoras necesarias para aumentar la velocidad de la página web, para ello mide el rendimiento de las páginas para dispositivos móviles y para ordenadores, puntuando de 0 a 100. De forma que  si una página tiene 90 puntos es que está muy bien optimizada su velocidad. En el ejemplo de abajo vemos justamente lo contrario, solo 38 puntos de 100.

PageSpeed01

 

Para medir el tiempo de carga usaremos Pingdom. Es muy sencillo de usar, solo tenemos que indicar la web a chequear y nos ofrece los resultados.

pingdown01

El resumen de resultados es el siguiente, en el que te indica el tiempo de carga (Load Time), que como podemos ver es muy alto, ya que Google recomienda 1,5 S.

pingdown02

Es muy importante tener presente que el tiempo de carga y la velocidad de respuesta de una página web, pueden ser factores determinantes para el éxito o el fracaso de una página web.

 

Tipos de hojas de estilos que podemos aplicar en nuestra página web.

Posted on by Instituto Fomento Ocupacional

Las hojas de estilos CSS en inglés Cascading Style Sheets (en español Hojas de Estilo en Cascada), permiten el control total sobre la presentación de las páginas web.

css

Con las  hojas de estilos CSS, puede colocar y definir con precisión la apariencia de los elementos de una página web.

Una hoja de estilos CSS puede ser:

  • Externa
  • Interna
  • En línea

El orden de prioridad de las hojas de estilos es la siguiente:

  1. La hoja de estilos en línea frente a la externa e interna
  2. La hojas de estilos interna frente a la externa

Además debemos tener presente que una página web puede usar uno o varios de estos tipos de CSS a la vez.

Para que sirven los distintos tipos de hojas de estilos.

  • Las CSS externas sirven para aplicar de forma coherente los mismos estilos a un proyecto web. De esta forma una modificación en un estilo se aplica a todas las web de un proyecto, de forma automática.
  • Las CSS internas o también conocidas como incrustadas, sirven para aplicar estilos a una sola web y también para modificar los estilos de heredados de una CSS externa. Las CSS internas se incluyen entre las etiquetas <head> de las páginas web.
  • Las CSS en línea sirven para aplicar las propiedades de las hojas de estilos en cascada a elementos individuales de una página sin tener que reutilizar el estilo. Los estilos en línea se definen dentro de las etiquetas iniciales de los elementos HTML de páginas web.

Por ejemplo:

<div id=»reloj» style=»font-family: ‘DS-Digital’; width: 450px; background-color: black;font-size:100px;color: green ; text-align: center «></div>

En el artículo de la semana pasada, usamos Javascript para aplicar estilos al reloj digital propuesto, mediante estilos en línea. Estos mismos estilos los podemos aplicar mediante:

  • CSS interna, de la siguiente manera:
  1. <script type=»text/javascript»>
  2. function startTime(){
  3. today=new Date();
  4. h=today.getHours();
  5. m=today.getMinutes();
  6. s=today.getSeconds();
  7. m=checkTime(m);
  8. s=checkTime(s);
  9. document.getElementById(‘reloj’).innerHTML=h+»:»+m+»:»+s;
  10. t=setTimeout(‘startTime()’,500);}
  11. function checkTime(i)
  12. {if (i<10) {i=»0″ + i;}return i;}
  13. window.onload=function(){startTime();}
  14. </script>
  15. <div id=»reloj» ></div>
  16. <head>
  17. <style type=»text/css»>
  18. #reloj { font-family: ‘DS-Digital’;
  19.         width: 450px;
  20.                                background-color: black;
  21.                                font-size:100px;
  22.                                color: green ;
  23.                                text-align: center;
  24.                                }
  25.      </style>
  26. </head>
  • CSS externa, de la siguiente manera:

Contenido fichero externo con los estilos CSS. Lo llamaremos estilos_reloj.css.

  1. #reloj {
  2.                                font-family: ‘DS-Digital’;
  3.         width: 450px;
  4.                                background-color: black;
  5.                                font-size:100px;
  6.                                color: green ;
  7.                                text-align: center;
  8. }

Contenido fichero con el código principal:

  1. <script type=»text/javascript»>
  2. function startTime(){
  3. today=new Date();
  4. h=today.getHours();
  5. m=today.getMinutes();
  6. s=today.getSeconds();
  7. m=checkTime(m);
  8. s=checkTime(s);
  9. document.getElementById(‘reloj’).innerHTML=h+»:»+m+»:»+s;
  10. t=setTimeout(‘startTime()’,500);}
  11. function checkTime(i)
  12. {if (i<10) {i=»0″ + i;}return i;}
  13. window.onload=function(){startTime();}
  14. </script>
  15. <div id=»reloj» ></div>
  16. <head>
  17. <meta http-equiv=»Content-Type» content=»text/html; charset=iso-8859-1″ />
  18. <title>Ejemplo de estilos CSS en un archivo externo</title>
  19. <link rel=»stylesheet» type=»text/css» href=»estilos_reloj.css» media=»screen» />
  20. </head>

Animo a lector a desarrollar sus estilos para este reloj digital y publicar el código. Es un ejercicio muy gratificante.

Todos nuestros alumnos  que han cursado el certificado de profesionalidad IFCD0210-Desarrollo de Aplicaciones con Tecnologías Web, y el IFCD0110 Confección y publicación de páginas web, conocen bien todos estos aspectos de las CSS y saben como aplicarlas según los requerimientos de la web que estén programando.

 

¿Necesitas ayuda?