Archive for the ‘estandares’ Category

HTML 4-5 diferencias

febrero 2, 2010

El HTML 5 todavía está en desarrollo por la W3C pero estas serán algunas de las diferencias con respecto la  versión anterior HTML4:

Listado de etiquetas HTML5

Modificar títulos de webparts

febrero 2, 2010

Muchas veces, sobre todo cuando se diseña una intranet, las páginas de inicio suelen quedar bastantes sosas porque sólo aparecen webparts a modo de listados de bibliotecas y muy pocas imágenes (unos pocos banners a la derecha que a veces son sólo enlaces de interés). Es entonces cuando el diseño nos pide un icono para cada título de webpart (icono de folios para noticias, icono de calendario, clip para notas,…).

La primera idea para personalizar esto fue una solución muy rudimentaria: ocultar el título del webpart que viene por defecto e incluir arriba otro webpart de tipo editor  HTML de contenido, así podíamos colocar el código HTML que quisieramos, pero perdíamos la funcionalidad de poder modificar directamente el webpart de la lista sin tener que entrar en el modo de edición.

Después de leer este artículo de Heather Solomon, la solución es más sencilla:

http://www.heathersolomon.com/blog/articles/Controlling-Single-Web-Parts-with-CSS.aspx

Como todos los webparts usan los mismos estilos, simplemente modificando: .ms-WPHeader, .ms-WPTitle, .ms-WPBody,… no serviría porque cambiaría en todos los sitios. (listado de estilos que se utilizan en SharePoint)

Los titulos de los webparts se pueden difereciar de dos modos: Que cada tipo de webpart tenga un titulo personalizado pero que según el tipo sea el mismo (que todos los webparts de noticias tengan el mismo icono) o que según donde se encuentre tenga un estilo u otro.

Modificar según donde se encuentre en el layout:

La idea es colocar los webparts que se quieren personalizar dentro de un contenedor con un id o class para que, por medio de selectores de descendencia CSS llamar a los estilos por debajo.

Primero habría que establecer una regla general para todos los webpartas. Por ejemplo:

.ms-WPHeader  {background:green; border:1px solid red}

y después diferenciar cada uno de los webparts dependiendo de dondes están. Por ejemplo, teniendo este código HTML:

<div class=”mi_contenedor”>

  <los webpats/>

</div>

Con la siguiente regla CSS:

div.mi_contenedor .ms-WPHeader  {background:yellow; border:0px}

Sólo los estilos .ms-WPHeader que estén dentro de la capa con la clase mi_contenedor se verán amarillos y sin borde.

Hay que tener en cuenta que para este sistema hay que modificar la masterpage o la page layout correspondiente. Si no pudiera ser, una solución es mirar el código fuente de la página desde el navegador y buscar si existe algún contenedor con class o id para poder llamarlo.

Modificar un webpart según su tipo:

Otro modo para diferenciar un webpart de otro según su tipo es por medio de selectores por atributo CSS. Las clases pueden ser las mismas para todos, pero por medio de los atributos de las etiquetas, por ejemplo, title, se puede aplicar unas porpiedades u otras.

El código fuente de la página indicará el atributo para crear la regla CSS que defina el estilo. Hay que buscar el trozo de código que pinta la barra del titulo. Por ejemplo:

 <tr class=”ms-WPHeader”>
      <td title=”Contacts – Create a contacts list when you want to manage information about people that your team works with such as customers or partners. You can share information between your contacts list and Windows SharePoint Services-compatible contacts programs.” id=”WebPartTitleWPQ3″ style=”width:100%;”>
            <h3><a accesskey=”W” tabindex=”0″ href=”/sites/heather/Lists/Contacts/AllItems.aspx”><nobr><span>Contacts</span><span id=”WebPartCaptionWPQ3″></span></nobr></a></h3></td>…….

Identificando que el estilo lo queremos aplicar a la etiqueta td con el atributo title “Contacts…”  ya tendríamos diferenciada la celda del resto.  La formula para escribir reglas en css es la siguiente:

selector [attribute=”value”]  {declarations}

Siguiendo con el ejemplo, se escribiría:

tr.ms-WPHeader td[title^=”Contacts”]{background:yellow}

Como la etiqueta td no está asociada a ninguna clase, no se puede llamar directamente sin que se modifiquen todas las td, por eso se llama al estilo padre: tr.msWPHeader. Así todas las td que estén por debajo cumplirán esta norma. Además se especifica que el atributo title debe contener al principio el texto indicado entre comillas con el símbolo ^antes del igual. (Los selectores se explican en otro articulo)