Por ejemplo, les proponemos crear los siguientes efectos:
Efecto ocultar Panel 1 al hacer clic en el botón Button 1
Efecto visualizar Panel 1 al pasar el ratón por encima del botón Button1
A priori, parece que esto nos puede llevar a un proyecto web complejo en el que hay que escribir mucho código. Pero nada más lejos de la realidad. Observa la siguiente imagen y veras que con unas pocas líneas de código Jquery (ver parte izquierda de la imagen), puedes conseguir los efectos que hemos propuesto al inicio de este texto (ver parte derecha de la imagen).
Te propongo que descargues el código fuente de este programa, extrae los ficheros y haz doble clic en el fichero index.html, podrás ver los efectos de ocultar y visualizar el Panel 1, en tu navegador habitual.
Si sabes algo de programación Web lee las siguientes cuatro líneas de código, con ellas se realizan estos efectos visuales:
¿No te parece interesante? Solo con cuatro líneas se pueden generar estos efectos. Jquery es una herramienta potente y muy útil, fundamental para cualquier programador Web.
Puedes descargar el código haciendo clic aquí: index
Habréis observado que cada día la webs son más fáciles de usar y de acceder. Pues no es una pequeña casualidad. Detrás de todas las técnicas y procedimientos que hacen las webs amigables están los siguientes conceptos básicos:
Usabilidad
Accesibilidad
Al hablar de accesibilidad Web, nos referimos a algo tan sencillo y tan actual como el acceso universal a la Web, con independencia del tipo de hardware, software, tipo de red, idioma, nivel cultural, edad, localización geográfica y de las capacidades de los usuarios.
En esta época que estamos viviendo con el Coronavirus, se hace si cabe más necesaria esta accesibilidad.
Esta idea surgió con el objetivo de facilitar el acceso a la web, a las personas con discapacidad mediante:
El desarrollo de pautas de accesibilidad
Mejora de herramientas de evaluación y reparación de accesibilidad Web
Llevado a cabo una labor educativa y de concienciación de la sociedad en la importancia de un diseño web accesible.
Y apostado por iniciativas de mejora de la accesibilidad a través de la investigación es esta área.
De hecho el consorcio World Wide Web (W3C) juega un papel fundamental en el momento de determinar la accesibilidad. El Consorcio World Wide Web (W3C) es una asociación internacional formada por organizaciones, personal y público en general, que trabajan conjuntamente para desarrollar normas y estándares para la Web.
Este consorcio desarrolla normas, estándares web, pautas y recomendaciones sobre cómo deben usarse los diferentes formatos, y lenguajes web.
Por otro lado, la usabilidad está vinculada a la simpleza, la facilidad, la comodidad y la practicidad de uso de una página web. Es decir, que la web sea lo más sencilla de usar por el usuario y que obtenga el máximo rendimiento. De hecho Jakob Nielsen propone diez principios de diseño para productos Software con el objetivo de conseguir un alto grado de usabilidad. Algunos de estos principios son los siguientes:
Visibilidad del estado del sistema: el producto software o sitio web debe siempre mantener informado a los usuarios de lo que ocurre, con un correcto feedback en un tiempo razonable.
Correspondencia entre los contenidos del sitio web y el mundo real: el sitio web debe hablar el lenguaje de los usuarios con palabras, frases y conceptos familiares. Es decir, el contenido debe seguir las convenciones del mundo real y el diseñador de sitios web debe ser capaz de mostrar la información de forma natural y lógica.
Control y libertad del usuario: los usuarios frecuentemente eligen opciones por error, por eso siempre debe ofrecerse a los usuarios un punto de salida a un lugar seguro.
Diseño minimalista: cualquier contenido que aparezca en un sitio web debería estar justificado, ya sean imágenes, vídeos, texto, multimedia, enlaces, etc.
Si te interesa este tema tan actual y de gran repercusión en la sociedad actual, te ofrecemos nuestro ciclo de grado superior en Desarrollo de Aplicaciones Web. En este ciclo grado superior aprenderás todo lo relacionado con la Web.
Desde el nacimiento de internet es indudable la gran cantidad de oportunidades y ventajas que nos ha proporcionado, pero no todo son ventajas y oportunidades, en ocasiones podemos vernos con situaciones de fraude no deseadas.
El supuesto anonimato que ofrece internet, pero sobre todo la capacidad de operar desde cualquier lugar del mundo, hace que se convierta en una oportunidad ideal para la realización de fraudes de todo tipo.
Los fraudes más comunes son los siguientes:
En las compras ONLINE.
Productos falsificados.
Cargan importes superiores a los indicados en el producto.
Plazos de envío superiores a los indicados.
No tienen un teléfono de reclamaciones, solo formularios de contacto de los que nunca tienes respuesta.
El Phishing o robo de datos personales, credenciales de acceso a servicios online o los más buscados, información bancaria. Se basa en enviar mails suplantando a la entidad de la cual quieren robar tus credenciales, con la finalidad de que a través de este correo, siguiendo un enlace adjunto, te dirijas a una web que suplanta a la original y en ella introduzcas tus credenciales.
Falsos prestamos, a través de las redes sociales estos delincuentes ofrecen préstamos a muy bajo interés. Aprovechándose de la desesperación de la gente, con el engaño de un tipo de interés tan bajo, reclaman dinero por adelantado, para gastos de gestión y una vez recibido el dinero desaparecen.
Encontrar pareja por internet. Es este caso lo que más se usa la suplantación de identidad, creando perfiles falsos en redes sociales, con fotos y videos de carácter sexual o comprometedor. Una vez conseguida la confianza de la víctima solicitan cantidades de dinero por cualquier motivo.
Falsos alquileres o ventas de vehículos. Consiste en ofrecer alquileres de inmuebles o coches muy baratos. En ambos casos, el engaño suele ser similar: propietarios que se encuentran en el extranjero, y que no pueden salir del país en el que residen por el alto coste que supondría venir a realizar la operación de venta o alquiler. Además alegan que ya no volverán y por lo tanto no tienen interés en seguir residiendo o haciendo uso del bien en cuestión, y que por ese motivo lo alquilan o venden. El resultado siempre es el mismo, no hay inmueble que alquilar ni vehículo que vender.
Con esta información solo queremos dar a conocer estos fraudes a los usuarios de Internet y que puedan eludirlos y a ser posible denunciarlos.
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.
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.
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.
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.
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.
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.
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:
La hoja de estilos en línea frente a la externa e interna
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:
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.
Todos nuestros alumnos que han cursado el certificado de profesionalidad IFCD0210-Desarrollo de Aplicaciones con Tecnologías Web, conocen que Javascripts es un lenguaje que se ejecuta en el lado del cliente. Permitiendo esto una serie de funcionalidades que hacen que la página cambie su contenido sin necesidad de llamadas al servidor, es decir, cambia de aspecto en el navegador de nuestro ordenador. Una de estas funcionalidad es la de mostrar el fecha y hora actual en nuestra web.
Hay muchos programas de edición web y CMS que permiten añadir esta funcionalidad a nuestras webs, pero para los que buscamos profundizar un poco más, nos gusta saber como hacerlo manualmente, y así aportar nuestro toque personal. Para ello también podemos usar CSS.
Las funciones más usadas para esta funcionalidad son:
Función
Descripción
getDate()
Devuelve el día del mes (entre el 1 y el 31)
getDay()
Devuelve el día de la semana (entre el 0 y el 6)
getMonth()
Devuelve el mes (entre el 0 y el 11)
getFullYear()
Devuelve el año (en formato de 4 dígitos)
getHours()
Devuelve la hora (entre el 0 y el 24)
getMinutes()
Devuelve los minutos (desde 0 a 59)
getSeconds()
Devuelve los segundos (desde 0 a 59)
getTime()
Devuelve el número de milisegundos desde el 01/ Enero /1970
getTimezoneOffset()
Devuelve la diferencia de horario en minutos entre la hora local y GMT (Meridiano de Greenwich)
getUTCHours()
Devuelve la hora de acuerdo a UTC (Tiempo Universal Coordinado)
Para usar estas funciones, es tan sencillo como crear una variable con new Date() para definir la fecha y hora actual y luego pintar en pantalla los datos que deseemos. En el ejemplo siguiente, pintamos el día del mes en el que estamos.
<script type=»text/javascript»>
var d = new Date();
document.write(d.getDate());
</script>
Si queremos que nos diga la hora, podemos escribir el siguiente código:
<script type=»text/javascript»>
var d = new Date();
document.write(d.getHours());
</script>
Para conseguir que nos de toda la información sobre le fecha y hora, podemos encadenar las funciones de fecha y hora, mediante el siguiente código:
<script type=»text/javascript»>
var d = new Date();
document.write(‘Fecha: ‘+d.getDate(),'<br>Dia de la semana: ‘+d.getDay(),'<br>Mes (0 al 11): ‘+d.getMonth(),'<br>Año:’+d.getFullYear(),'<br>Hora:’+d.getHours(),'<br>HoraUTC: ‘+d.getUTCHours(),'<br>Minutos: ‘+d.getMinutes(),'<br>Segundos: ‘+d.getSeconds());
</script>
Obteniendo un resultado en pantalla como el siguiente:
Fecha: 18
Día de la semana: 5
Mes (0 al 11): 7
Año: 2017
Hora: 9
Hora UTC: 7
Minutos: 15
Segundos: 51
Pero esto hay que adaptarlo a nuestro formato de fecha, de forma que sea el usado habitualmente en nuestro país. Por ejemplo el siguiente código, nos muestra la fecha en formato día/mes/año. Ejemplo 22/08/2017.
En muchas publicaciones encontraras ejemplos de códigos para pintar de forma correcta la fecha y hora en tus webs. Aconsejamos al lector que busque y pruebe los ejemplos de código propuestos.
En el siguiente ejemplo tienes el código básico para poner en tu web un reloj digital. A este código le puedes aplicar tantos formatos que como desees para personalizarlo.
Las computadoras cuánticas, están basadas en la mecánica cuántica y no tanto en la electrónica y por tanto tienen el potencial de ser más poderosas que las tradicionales, basadas en el sistema binario, es decir, unos y ceros que representan estados como «on/off» y «verdadero/falso».
Las computadoras cuánticas, contienen qubits, que pueden ser tanto 0 como 1 al mismo tiempo, un estado conocido como superposición.
Las partículas subatómicas (los electrones, fotones e iones) pueden ser manipulados para que se comporten de este modo tan misterioso. Este comportamiento tan excepcional, creen que puede hacer, que un computador cuántico, llegue teóricamente, aresolver tres millones de cálculos por segundo.
Desgraciadamente, hoy en día esta tecnología no está totalmente desarrolla y requiere de ciertas condiciones especiales para su funcionamiento. Una de ellas es que necesita que el procesador esté justamente por encima del cero absoluto (unos -273.15 en la escala de Celsius), además debe estar alejado de cualquier interferencia electromagnética.
Sin embargo, un sector tan pudiente como el de las finanzas está interesado en este tipo de computación, por la capacidad de calcular miles de escenario posibles, estudiarlos y elegir aquellos más viables a largo plazo. Pero también este mismo sector se plantea que esta capacidad del cálculo tan impresionante, será capaces de romper los códigos de encriptación de las transacciones financieras y las encriptaciones de cualquier otro tipo de sistema de seguridad implantado en los sistemas informáticos anteriores, a las supercomputadoras cuánticas.
Es decir, esta capacidad de cálculo que puede llegar a tener las supercomputadoras cuánticas romperá la seguridad informática, hasta la fecha implantada, comprometiendo gravemente, toda la seguridad de los sistemas financieros, gobiernos, ejércitos, etc.
Por lo que cabe concluir que necesitamos, “una fórmula matemática que cree un lenguaje encriptado imposible de quebrar». Según, Marco López de Prado, ejecutivo de la firma Guggenheim Partners.
Teniendo en cuenta que la capacidad de procesamiento de cada generación cuántica, es cada vez mayor, el tiempo apremia para conseguir esa fórmula matemática. De lo contrario, la seguridad de los sistemas informáticos, anteriores a la computación cuántica, se puede ver drásticamente comprometida.
Todos estos conceptos le son muy familiares a los alumnos del certificado de profesionalidad IFCT0210 Operación de Sistemas Informáticos ya que forma parte de su formación en ordenadores tradicionales.
Aunque en noviembre del 2016, ya anunciamos en este blog que Microsoft era nuevo miembro de platino en “Linux Fundation”. Si !!! ¿Increíble pero cierto?
Efectivamente, Microsoft tiene un lugar privilegiado junto a Cisco, Fujitsu, HPE, Huawei, IBM, Intel o Samsung en la fundación del pingüino. Es decir, Microsoft entra a las claras y sin tapujos en la casa madre de Linux.
Para muchos ha supuesto una verdadera sorpresa. ¿Los dos eternos rivales, ahora colaboran juntos? Pues sí, en especial desde que Satya Nadella está al frente de Microsoft.
No es una distribución completa de Ubuntu, pero atención, se anuncia que habrá nuevas posibilidades de descarga de SUSE y Fedora.
Con esta nueva estrategia, Windows pretende consolidarse como la plataforma mar versátil, para desarrolladores y así disuadir a los usuarios más avanzados, en la instalación de un segundo Sistema Operativo.
Para todos los alumnos de los certificados de profesionalidad que disponemos, tanto los de desarrollo, como los de Sistemas, no supone un gran cambio; ya que suelen trabajar con ambos sistemas operativos.
Lo dicho, QUIEN LO HUBIERA DICHO HACE UNA DÉCADA, QUE NOS LO HAGA SABER. Le felicitaremos, por ser el mejor visionario.
Este concepto indica la facilidad con la que algo puede ser accedido por todas las personas, especialmente por aquellas que poseen algún tipo de discapacidad. Busca la igualdad de acceso a la web para todos los usuarios.
Los usuarios con discapacidad tienen los siguientes problemas para acceder a la web:
Acceso a los contenidos web: problemas en visión, audición y/o movilidad.
Manipulación de periféricos: dificultades en el uso del teclado y/o ratón.
Interacción con los interfaces de usuario: dificultades en la navegación y/o comprensión.
Pero hay otros problemas de accesibilidad que no debemos olvidar y que son provocados por el idioma, la edad, conocimientos previos, conectividad, etc..
El máximo organismo dentro de la jerarquía de internet que se encarga de promover la accesibilidad es el World Wide Web Consortium (W3C), en especial su grupo de trabajo Iniciativa de Accesibilidad en la Web (WAI).
La accesibilidad web la podemos definir como la “posibilidad de que un sitio o servicio web pueda ser visitado y utilizado de forma satisfactoria por el mayor número posible de personas, independientemente de las limitaciones personales que tengan o aquellas derivadas del entorno que las rodea”.
El W3C, dispone de esta herramienta https://validator.w3.org/ en que todos los programadores web deben chequear el nivel de accesibilidad de las páginas desarrolladas.
El objetivo a cumplir es que este validador no reporte ni errores ni warning en la accesibilidad de nuestras web, aunque es por todos conocido, que es muy difícil.
Abajo adjunto el resultado de chequear la web de la Universidad de Granada (www.urg.es). Web con de gran importancia y visitada por un amplio abanico de usuarios a diario y que como podéis comprobar no está exenta de problemas de accesibilidad.
Beneficios que tiene para nuestra web al cumplir con las normas de accesibilidad:
Aumentar el número de usuarios visitantes del sitio web, al posibilitar que los usuarios con discapacidad, de edad avanzada, baja alfabetización, etc..
Disminución de costes y mantenimiento. Una página web accesible también permite la reutilización del contenido, al ser independiente del dispositivo de acceso.
Reduce tiempos de carga de las páginas web y del servidor
Consigue mejorar los resultados en los motores de búsqueda.
En certificado profesionalidad IFCD0210-Desarrollo de Aplicaciones con Tecnologías Web, se estudia con detalle todos los aspectos de la accesibilidad web, permitiendo que los alumnos sean capaces de desarrollar webs accesibles.
Todos los que programamos tenemos la necesidad, de poder probar el código que desarrollamos de forma rápida y eficiente. Para ello, necesitamos un entorno mínimo de programación instalado en nuestro ordenador.
Ahora sin necesidad de instalación y todo Online, puedes escribir código, HTML, CSS y JavaScripts y ver de forma inmediata el resultado de su ejecución.
http://rendera.herokuapp.com/
Puedes escribir código HTML, CSS o JavaScript en la parte izquierda de la página web y verás en resultado de la ejecución de ese código en la parte izquierda.
Podrás guardar el código que has desarrollado. En la pestaña “Save and Export”, de la parte izquierda, tienes esta opción y más detalles sobre lo que quieres salvar.
Una pestaña muy interesante es la de Examples, que está en la parte izquierda. Te aconsejo que la mires en profundidad. Hay una gran cantidad de ejemplos de código fuente ya desarrollados que te permitirá avanzar muy rápido en tus proyectos.
El actual (X)HTML está en su fase final a punto de ser sustituido por completo por HTML5.
Muchas son las novedades que aporta HTML5. Una de ellas ya la vimos en la publicación del pasado en la que hablamos del atributo “pattern” y su uso en formularios.
Hoy nos centraremos en ver como HTML5 sustituye el uso del elemento <div>, tan presente en HTML para dividir la web en bloques.
HTML5 cuenta con varios elementos que te sirven para estructurar mucho mejor tu página web. Con el uso de estos elementos, aportamos una semántica adicional a nuestro código web de forma que será mucho más legible por otros desarrolladores web e intuitivo en el seguimiento de la lógica aplicada. Aunque lo fundamental su trivialidad de entender para una ordenador, pudiendo darle más y mayor importancia a determinadas secciones. Por otro lado, la tarea de los buscadores será más fácil en su búsqueda de información en las partes de la web, aunque en general se beneficiará cualquier aplicación que lea páginas web.
Los elementos que HTML5 usa para mejorar la estructura de una web:
section representa a una sección general dentro de un documento. Es como un capítulo de un libro, el cual podemos dividir en subsecciones con h1-h6.
article referencia el contenido independiente del documento. Un ejemplo claro son las noticias y las entradas a un blog.
aside representa el contenido poco relacionado con la web. Ejemplo es la barra lateral. Fundamental para delimitar el contenido importante del contenido de apoyo, de forma que le da más importancia al primero que al segundo.
header representa la cabecera de una sección. Por lo que la lógica indica que se le debe más importancia que al resto.
footer representa el pie del documento. Es esta sección contiene información acerca de la página/sección y poco tiene que ver con el contenido de la página como copyright, edición, año, autor, etc.
nav representa la sección establecida para la navegación dentro del propio sitio. Ejemplo la típica barra superior de los periódicos digitales.
En la imagen siguiente podemos ver cómo sería un documento con estructura HTML en comparación con un documento con estructura HTML5.
Si tienes entre 16 y 30 años y quieres aprender un oficio mientras trabajas, eres el candidato ideal para el contrato para la formación y el aprendizaje.
Este contrato para ti como trabajador, te ofrece las siguientes ventajas:
Te facilita que tengas acceso a tu primer empleo.
Te permite formarte mientras trabajas dentro de tu jornada laboral. Efectivamente, durante el primer año el 25% de tu jornada laboral la dedicarás a formarte.
Tendrás todas las coberturas básicas de la seguridad social, incluido el seguro de desempleo.
La formación que recibirás será conseguir un título oficial. Este título oficial puede ser un certificado de profesionalidad, titulación reconocida en todo el territorio nacional y homologable en la Unión Europea.
La formación que recibirás puede ser a distancia. Siendo la modalidad de teleformación las más usada y recomendada, por su flexibilidad, dinamismo y fácil seguimiento.
Este contrato para ti como empresario, te ofrece las siguientes ventajas:
Reducción del 100% en cuotas de la Seguridad Social en los contratos hechos a desempleados inscritos en la Oficina de Empleo como demandante de empleo.
Reducción del 75% en empresas de más de 250 trabajadores.
Permite a la empresa la incorporación y formación de una plantilla joven, para su posterior incorporación en la empresa con la formación adecuada.
La transformación posterior del contrato de trabajo para la formación en un contrato de trabajo indefinido tiene especiales bonificaciones en las cuotas de la Seguridad Social: 1500€ para hombres y 1800€ para mujeres, durante tres años.
La formación teórica que recibe el trabajador es deducible de las cuotas de la Seguridad Social., 5€/hora/alumno en formación modalidad de teleformación.
Nosotros, como empresa de formación especializada en informática y acreditada por el Servicio Público Estatal de Empleo, ofrecemos a las empresas y a los trabajadores, nuestros servicios de formación para los certificados de profesionalidad de la familia de informática.
Puedes ver nuestros certificados de profesionalidad en la siguiente dirección: www.foc.es/certificados_de_profesionalidad y si tienes alguna consulta, puedes ponerte en contacto con nosotros a través de la web antes indicada.
Si quieres dibujar un texto de manera vertical, puedes usar imágenes, pero no es lo más adecuado, por que puedes usar reglas CSS como las que te enseñamos a continuación y que en cualquiera de nuestros dos certificados de profesionalidad IFCD0210-Desarrollo de Aplicaciones con Tecnologías Web o IFCD0110-Confección y publicación de páginas web puedes aprender y así conseguir este efecto en cualquier web que desarrolles.
La mayoría de los navegadores soporta el uso de rotación en el texto mediante reglas CSS3, aunque para Internet Explorer será necesario el uso de filtros DXMImage Transform; lo que contemplaremos en nuestro ejemplo, para que la compatibilidad no será un problema.
Elegiremos una dirección web a pintar en pantalla, por ejemplo: cdp.foc.es y el .es de la parte de la dirección web que rotaremos.
Para los navegadores Chrome, Safari y Mozilla que usan webkit usaremos la propiedad “transform” para rotar el texto.
Para Opera la propiedad –o-transform, soportada a partir de la versión 10.50.
Para que este efecto pueda funcionar, además de la propiedad “transform” tenemos que establecer el valor de “block” o “inline.block” a la propiedad “display” del elemento que contiene el texto que vamos rotar.
Para Internet Explorer, como suele ocurrir es un poco más complejo, pero se consigue aplicando la propiedad “filter” con un valor llamado “BasicImage” para rotar cualquier elemento que se encuentre en el layout.
El parámetro “rotation” puede tener valores desde el 0 al 3. Donde 0 indica que rotará 0 grados, 1 indica que rotará 90 grados, 2 indica que rotará 180 grados y 3 indica que rotará 270 grados.
Para hacer este ejemplo partimos de una HTML como el siguiente:
Con este código y sus correspondientes reglas de estilos veremos en pantalla lo siguiente:
Las reglas de estilos son las siguientes y son válidas para cualquier navegador:
El código usado para este ejemplo, puedes descargo aquí para probarlo e incluso mejorarlo. 😉
A continuación vamos a explicar cómo crear listas CSS y cómo aplicarles animación con tan solo unas pocas líneas de código JavaScript.
En el siguiente código puedes ver cómo con unas pocas líneas en HTML y un código JavaScript muy sencillo, podemos crear una lista con tres elementos, los cuales gracias al código JavaScript, cambian de tamaño y color cuando pasamos el ratón por encima de cualquiera de ellos.
Pero esto es muy básico para un programador web experto, por lo que le aplicamos una serie de reglas CSS para conseguir un fondo oscuro, cambiar el padding por defecto de la ul para desplazarlo hacia la derecha y aplicar bordes a cada li para crear un pequeño efecto de profundidad. También eliminaremos el borde superior del primer elemento de la lista y el borde inferior del último elemento de esta lista.
El resultado será el siguiente, al pasar el ratón por encima del elemento 3 de la lista:
Todo este desarrollo web en lenguaje HTML, JavaScript y reglas CSS lo puedes aprender si cursas con nosotros cualquiera de estos certificados de profesionalidad:
Serás capaz de aplicar efectos llamativos a las imágenes que publiques en tus webs de forma sencilla y eficiente. De esta forma mejorarás la presentación del tus web incentivando así las visitas de los internautas.
En la publicación de hoy vamos a ver como aplicar un efecto de desvanecimiento y aparición progresiva de una imagen a demanda del usuario visitante de la web.
En este caso partimos de una web con una imagen centrada y dos botones que nos permiten aplicar el efecto de desvanecimiento y revertirlo aplicando además un efecto de transparencia.
Si haces clic en el botón Mostrar verás como se aplica el efecto desvanecimiento y si haces clic en el botón Ocultar verás como el efecto es revertido.
Esto los puedes realizar con los conocimientos adquiridos en cualquiera de los certificados de profesionalidad que arriba te indico y con aplicando las siguientes líneas de código en tu proyecto web:
El código usado para este ejemplo, puedes descargo aquí y usarlo para mejorar tus web.
Los alumnos que realizan nuestro certificado de profesionalidad IFCD0210-Desarrollo de Aplicaciones con Tecnologías Web, serán capaces de desarrollar páginas webs con efectos visuales, que llamen la atención de los visitantes y así generar más visitas en las webs que publiquen.
En la publicación de hoy explicamos cómo hacer que los colores de tres zonas de nuestra web cambien, simplemente con pasar el ratón por encima. Este efecto hará que el visitante de la web se vea sorprendido y fije su atención en la zona de la web en la que deseas publicar alguna información importante.
Partimos de una web en la que tenemos tres zonas bien deferencias por su color de fondo.
Con el código que se indica a continuación y que podrás descargar aquí, podrás ver como los colores de tres zonas van cambiado de forma rotativa cada vez que pasas el ratón por encima.
Este efecto tan llamativo, se consigue con unas cuantas líneas de que código que podrás desarrollar sin dificultad al terminar con éxito nuestro certificado profesionalidad IFCD0210-Desarrollo de Aplicaciones con Tecnologías Web.
Con los conocimientos adquiridos al cursar nuestro certificado de profesionalidad IFCD0210-Desarrollo de Aplicaciones con Tecnologías Web, serás capaz de desarrollar páginas webs que se visualicen correctamente en tablets, móviles y en dispositivos de escritorio, es decir, diseño web adaptable (en inglés Responsive Web Design).
En esta publicación del blog te explicamos cómo hacer este diseño adaptable y te facilitamos el código para que puedas hacer las pruebas que consideres oportunas.
Para explicar adecuadamente como hacer un diseño adaptable para nuestra web partimos de la siguiente página web, la cual está diseñada en cuatro columnas, de forma que cada columna está encabezada por una imagen y a continuación un texto relacionado con la imagen.
Esta visualización de la página web corresponde a un dispositivo de escritorio (ordenador), con un tamaño superior a 900px.
Si reducimos el tamaño de la página web por debajo de los 900px, estamos visualizando para una Tablet. Para que el contenido de nuestra web se visible y legible la página web se visualizada en dos columnas. Tal y como vemos en la siguiente imagen:
Si reducimos el tamaño por debajo de 500px estamos visualizando para un dispositivo móvil y la información se la web se visualizará en una sola columna, tal como vemos en la siguiente imagen:
Para conseguir que tus webs se visualicen correctamente en distintos dispositivos solo tienes que aplicar las siguientes reglas CSS llamas media Queries:
El código asociado a este ejemplo los puedes descargar aquí.
Efecto ocultar Panel 1 al hacer clic en el botón Button 1
Efecto visualizar Panel 1 al pasar el ratón por encima del botón Button1
Descárgate el código fuente de este programa, extrae los ficheros y haz doble clic en el fichero index.html, podrás ver los efectos de ocultar y visualizar el Panel 1, en tu navegador habitual.
Con las siguientes cuatro líneas de código, se realizan estos efectos visuales:
Usamos cookies en nuestro sitio web para brindarle la experiencia más relevante recordando sus preferencias y visitas repetidas. Al hacer clic en "Aceptar todo", acepta el uso de TODAS las cookies. Sin embargo, puede visitar "Configuración de cookies" para proporcionar un consentimiento controlado.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duración
Descripción
cookielawinfo-checkbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
